Modular CSS
Why?
Because we write the same CSS over and over
@viewport…box-sizing: border-box;body { margin: 0; }.img-flexlist-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
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>