Modular CSS

A introduction to Modular CSS, writing code for patterns, and a tool, Modulifier, to help simplify use.

Go fullscreen: ⌃⌥F

Modular CSS

Why?

Because we write the same CSS over and over

  • @viewport…
  • box-sizing: border-box;
  • body { margin: 0; }
  • .img-flex
  • list-style-type: none
  • .etc

We see the same patterns repeated

  • Lists without bullets
  • Horizontal lists
  • Responsive images & videos
  • Icons beside text
  • Buttons

A pattern library

  • A bunch of CSS classes to reduce what we type
  • Common layouts that we do on many websites

Modulifier

I don’t want to have to write the same code every time!

  • Generates a whole pattern library

Modulifier »

HTML 
<link href="css/modules.css" rel="stylesheet">

<a class="btn">Go!</a>
<a class="btn btn-light">Go, Go Power Rangers!</a>
<a class="btn btn-ghost">Thunderbirds are Go!</a>
HTML 
<link href="css/modules.css" rel="stylesheet">

<ul class="list-group">
  <li>Diplodocus</li>
  <li>Apatosaurus</li>
  <li>Brontosaurus</li>
</ul>

<ul class="list-group-inline">
  <li>Velociraptor</li>
  <li>Microraptor</li>
</ul>
HTML 
<link href="css/modules.css" rel="stylesheet">

<i class="icon i-18"><img src="images/icon.svg" alt=""></i>
<span class="icon-label">Icons ahoy!</span>

<i class="icon i-64"><img src="images/icon.svg" alt=""></i>
<span class="icon-label">Icons-r-us!</span>
HTML 
<link href="css/modules.css" rel="stylesheet">

<div class="embed embed-16by9">
  <img class="embed-item" src="images/placeholder-16by9.svg" alt="">
</div>

<div class="embed embed-16by9">
  <iframe class="embed-item" src="https://www.youtube.com/embed/tpuhLkh358Y" frameborder="0" allowfullscreen></iframe>
</div>

Videos & tutorials

Start

Modular CSS

A introduction to Modular CSS, writing code for patterns, and a tool, Modulifier, to help simplify use.