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
neuroscience and biology resources
in science on 09 May 2014

 

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

additional articles to journey through:

bash scripting: youtube downloading macro
17 may 2013 | programming
<p> Once again, the command line is the root of all that is good in the world. This time, it has helped improve on a long[...]-standing issue for me: what is the easiest way to get a copy of all the <a href='http://www.youtube.com/playlist?list=PLmku2swCXQpqWAZSscjV4h9bcLennVcif' target='_blank'>luscious melodies</a> i hear on youtube? Courtesy of <a href='http://rg3.github.io/youtube-dl/' target='_blank'>youtube-dl</a>, a nifty little command line utility, this problem has been solved. However, every once in awhile it throws errors and i wanted a wrapper bash script to take care of this and some other processing. I'll briefly go over the code. </p>

¿qué es la calle?
24 may 2013 | short story | spanish
Había terminado y salé para mi cocina. Tenía hambre pero este día no había comida dentro de mi despensa. Me fui y caminé hacienda[...] la Tport—una máquina que puede transportar una persona a otro lugar sin energía y tiempo. Cuando entré la máquina, toqué algunos botónes y esperé. Pero nada ocurrió y lo hice las mismas acciones otra vez—y nada ocurrió.

How would the disappearance of streets affect the social fabric? This short story briefly (in castellano!) explores a world in which instantaneous, free transport is possible. Meant mainly to practice my spanish, i plan to follow-up with a more detail story in the future.

howard hughes medical institute hanna h. gray fellowship
18 february 2021 | science
I recently became a Howard Hughes Medical Institute Hanna H. Gray Fellow. A brief post thanking my amazing mentors and highlighting (some o[...]f) my goals as a Fellow.

why you should watch black mirror
29 november 2015 | television
Black Mirror is a unique and ever timely experience. The vignettes are spot on and while each explores a different aspect of our interactio[...]n with technology, the internet, and social media, there is an underlying dystopian view of the world that unifies the whole series. Watch it.

©2006-2024 | Site created & coded by Biafra Ahanonu | Updated 21 October 2024
biafra ahanonu