next»

next article
book review: The Old Man's War
in books on 13 February 2015

«previous

previous article
interstellar review: was this the final cut?
in movies on 17 December 2014

random!

random article
book review: The Old Man's War
in books on 13 February 2015

 

Dynamic Goodreads SASS formatting

in programming on 18 January 2015

Summary

Putting up some code that might be useful to others when formatting Goodreads widgets using dynamic class creation in SASS.

article image

Over at my reading list and book mini-reviews page, I've re-formatted the Goodreads widgets to save space and look a bit nicer. Originally was editing a bunch of CSS, but like other parts of the site, decided to migrate it over the SCSS. Below is the resulting code that allows me to compactly define the CSS stylesheet for all the different widgets. Since Goodreads javascript dynamically calls the html, I can't control the naming of the classes but they are similar across widgets that I can use @each loops, @extends (to define the actually styles) and lists to dynamically create all the CSS needed for that page. I used @extends instead of @include in this case because didn't need dynamic variables input to mixins and currently @include doesn't work with dynamic variables. The % signs are just placeholder selectors used in lieu of . and # normally seen with classes and ids.

See below for the code, useful either as a template for modifying your own SCSS or just as an example for nested @each loops in SCSS and combining them with @extends to dynamically define a group of classes easily.

download goodreads.scss

CSS
  1. /*======================================*/
  2. /*Dynamically create Goodreads classes*/
  3. $container-list: 1406083933 1421607017 1402318543 1402387978;
  4. $tag-list: "gr_custom_container" "gr_custom_header" "gr_custom_each_container" "gr_custom_book_container" "gr_custom_author" "gr_custom_tags" "gr_custom_rating";
  5. @each $container in $container-list {
  6.     @each $tag in $tag-list {
  7.       .#{$tag}_#{$container} {
  8.         @extend %#{$tag};
  9.       }
  10.     }
  11. }
  12. /*Modify images to make them standard across classes*/
  13. $container-list: 1406083933 1421607017 1402318543 1402387978;
  14. $tag-list: "gr_custom_book_container";
  15. @each $container in $container-list {
  16.     @each $tag in $tag-list {
  17.       .#{$tag}_#{$container} img{
  18.         width:100%;
  19.       }
  20.     }
  21. }
  22. /*======================================*/
  23. /*Placeholder selectors for later use with @extends*/
  24. %gr_custom_container{
  25.   /* customize your Goodreads widget container here*/
  26.   padding: 10px 5px 10px 5px;
  27.   background-color: transparent;
  28.   color: #000000;
  29.   width: 100%;
  30.   -webkit-column-count: 3; /* Chrome, Safari, Opera */
  31.       -moz-column-count: 3; /* Firefox */
  32.       column-count: 3;
  33.   @media only screen and (max-width : 1000px){
  34.     -webkit-column-count: 1; /* Chrome, Safari, Opera */
  35.         -moz-column-count: 1; /* Firefox */
  36.         column-count: 1;
  37.   }
  38. }
  39. %gr_custom_header{
  40.   /* customize your Goodreads header here*/
  41.   border-bottom: 1px solid gray;
  42.   width: 100%;
  43.   margin-bottom: 5px;
  44.   text-align: center;
  45.   font-size: 120%;
  46.   display:none;
  47. }
  48. %gr_custom_each_container{
  49.   /* customize each individual book container here */
  50.   width: 95%;
  51.   display: inline-table;
  52.   clear: both;
  53.   margin-bottom: 19px;
  54.   overflow: auto;
  55.   padding-bottom: 4px;
  56.   /*border-bottom: 5px solid #aaa;*/
  57.   border: 1px solid #aaa;
  58.   background-color: rgb(242,242,242);
  59.   @media only screen and (max-width : 1000px){
  60.     width: 100%;
  61.   }
  62. }
  63. %gr_custom_book_container{
  64.   /* customize your book covers here */
  65.   overflow: hidden;
  66.   height: 160px;
  67.     float: left;
  68.     margin-right: 4px;
  69.     width: 98px;
  70.     float:left;
  71. }
  72. %gr_custom_author{
  73.   /* customize your author names here */
  74.   font-size: 10px;
  75. }
  76. %gr_custom_tags{
  77.   /* customize your tags here */
  78.   font-size: 10px;
  79.   color: gray;
  80.   display:inline;
  81.   display:none;
  82. }
  83. %gr_custom_rating{
  84.   /* customize your rating stars here */
  85.   /*float: right;*/
  86.   /*display:inline;*/
  87. }
  88. %gr_custom_review{
  89.   display:inline;
  90. }
  91.  

-biafra
bahanonu [at] alum.mit.edu

other entires to explore:

bash scripting: randomly rename files
13 june 2013 | programming
Small script to enable quick randomization of files in a directory and conversion back to original names later. Original inspiration was a [...]way to blind data analysis, e.g. if studying images from an experiment and don't want to be biased by the conditions applied.

review of mad max: fury road
02 june 2015 | movies
A gorgeously shot film that is hampered by a spartan story that never really goes anywhere and action that becomes repetitive by the end of[...] the first act.

comment system!
05 august 2012 | website
Wanted to add the ability for people to comment on this website, but delayed adding the feature until I could write the code myself. There [...]are many pre-built PHP solutions on the market (like commentator), but the original purpose of this site was to allow me to learn how to build a website from scratch. So I've implemented the comment system using about a hundred lines of code to access the MySQL database, verify inputs and display all the comments for a particular article.

why we need more james polks
25 september 2012 | politics
James J. Polk expanded the territory of the United States by about one-third during his tenure. A remarkable feat. Not only that, but i[...]t was done through an astonishing three ways: territorial conquest, gold and negotiation.

Some thoughts on why we should demand less rhetoric and more pragmatism/details from our presidents.

©2006-2024 | Site created & coded by Biafra Ahanonu | Updated 17 April 2024
biafra ahanonu