Dynamic Goodreads SASS formatting

Summary

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

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

comments

comments powered by Disqus

more articles to enjoy:

bash scripting: batch file renamer
25 february 2013 | programming

Bit by bit, I have replaced repetitive tasks completed using downloaded programs with scripts that do the same thing more efficiently, with[...]out the residual registry and file junk many programs leave, and with the flexibility to allow me to modify the script to suite specific needs in the future. This was the case with batch renaming files. I've included the script and briefly go over the code.

powerpoint themes
10 august 2012 | design

Many default PowerPoint themes are too outlandish and graphics heavy for my taste. So over the last year or so, I have begun designing my o[...]wn themes for PowerPoint. I'll go over the design decisions behind a couple and provide links to download the themes.

bio42: diagrams, part 1
25 january 2013 | teaching

Had a couple minutes to spare before leaving lab, so decided to throw together some diagrams to help explain a couple biological pathways s[...]tudents of bio42, a bio class at Stanford I'm TAing. Hoping to make a set for each system we study. Started with vesicle budding and fusion along with muscle contraction in smooth and skeletal muscles.

©2006-2024 | Site created & coded by Biafra Ahanonu | Updated 09 January 2024
biafra ahanonu