Preparing for the workshop

You’ll need to bring your laptop with a modern browser and your favorite code editor installed. During the workshop, there are several code demos. I put both the code into the page and on Codepen is live demo. You can find those live demos in the following Codpen collection. Please fork them and play around the code yourself. You won’t learn it until you hack it.

Code examples on CodePen

-prefix-free library

-prefix-free is the JS library made by Lea Verou. It parses the CSS properties and apply certain vendor prefixes on the rules by determine the browser version. This library allows us to skip worrying about different syntax—prefixes and the old syntax.


The logic in CSS pre-processor provides us the DRY—Don’t repeat yourself— way to write the CSS code. We will use some SCSS code when defining the grid layout. It’s loop and list feature helps reducing the lines of code a lot. If you are using other pre-processor, you may find their equivalents in If you aren’t using any pre-processor, no worry, we also provide the full CSS code.