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.
-prefix-free library
-prefix-free is the JS library made by Lea Verou. It parses the CSS properties and apply centain vendor prefixes on the rules by determing the browser version. This library allows us to skip worrying about different syntaxes—prefixes and the old syntaxes.
Preprocessor
The logic in CSS preprocessor 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 preprocessor, you may find their equivalents in CSSPre.com. If you aren’t using any preprocessor, no worry, we also provide the full CSS code.