Code Snippets for Functional CSS post on slalom.com

challenging-class-order-01.html

<div class="flex m0 p0 md-m2 md-p2">
  The breakpoints are grouped
</div>

challenging-class-order-02.html

<div class="flex m0 md-m2 p0 md-p2">
  The properties are grouped
</div>

challenging-responsive.html

<nav class="fixed top-0 right-0 bottom-0 left-0 z4 bg-red flex-start md-relative md-flex-auto md-min-width-0">

</nav>

challenging-to-reuse.html

<div class="box-component flex p2 bg-blue white h4 bold">
  The .box-component class wouldn't actually style anything, it would merely be a search key for finding instances where the box component gets used.
</div>

immutable-classes-in-html.html

<div class="flex p1 red">
  Hi, I'm a flexbox div with 1 unit of padding and red text!
</div>

immutable-classes.css

.p1 { padding: 0.5rem; }
.flex { display: flex }
.red { color: red; }

managing-state-in-html.html

<nav class="hide block">
  .block gets toggled by JavaScript to show this element. It's also not terribly readable.
</nav>

managing-state.css

.nav { display: none; }

.nav.is-open { display: block; }