The Problem

Existing homegrown style framework is dated

Over-opinionated

Escape hatches?

Prior assumptions

Choices, Choices, Choices

Existing frameworks

• Bootstrap, Foundation, etc.

Build something new

Solution

StyleBitz!

Goals

Minimal

Building blocks

Extendable

Generated CSS optional

Basis

Inspiration

BASSCSS

Minimalism

Bootstrap/ Foundation

Style & HTML structure

Susy

Organization/ structure

Decisions

So many decisions

Code Organization

Semantic Syntax

Name spacing

BEM vs SUIT

 
.ComponentName-descendantName--modifierName {}

 .block-name__element-name--modifier-name {}

Single-class vs Multi-class

 %btn-base { /* styles */ }
 .btn { @extend %btn-base; }
 .btn-primary {
   @extend %btn-base;
   // additional styles
 }
 // example usage: <button class="btn-primary">Submit</button>

 %btn-base { /* styles }
 .btn { @extend %btn-base; }
 .btn-primary {
   // additional styles
 }
// example usage: <button class="btn btn-primary">Submit</button>

Usability

rems, ems, and px

• Responsive Typography
  
• Components
• Absolute

Documentation

Issues

Compass

Undefined styles

Practice vs Theory

Down the Rabbit Hole

Be careful...it's a long way down

Responsive typography

Modular scale

Vertical rhythm