An Adventure
in Style
About Me
- Software Engineer @CustomInk
- Github: @jdlehman
- Twitter: @inLehmans_Terms
The Problem
Existing homegrown style framework is dated
Over-opinionated
Escape hatches?
Prior assumptions
Choices, Choices, Choices
Existing frameworks
- Bootstrap, Foundation, etc.
- Bootstrap, Foundation, etc.
Build something new
Solution
StyleBitz!
Goals
Minimal
Building blocks
Extendable
Generated CSS optional
Basis
- Sass (3.3 for Sass map wins!)
- Bourbon
- Susy
- Breakpoint
- Normalize.css
Inspiration
BASSCSS
Minimalism
Bootstrap/ Foundation
Style & HTML structure
Susy
Organization/ structure
Decisions
So many decisions
- Access to packages and usability
- Code organization
- Naming, semantics, and style
- rems, ems, and px??
- How to convey these decisions?
Code Organization
Architecture
Semantic Syntax
Name spacing
"sb-"
BEM vs SUIT
BEM (block element modifier)
SUIT
.ComponentName-descendantName--modifierName {}
.block-name__element-name--modifier-name {}
Single-class vs Multi-class
Single-class
%btn-base { /* styles */ } .btn { @extend %btn-base; } .btn-primary { @extend %btn-base; // additional styles
} // example usage: <button class="btn-primary">Submit</button>
Multi-class
%btn-base { /* styles }
.btn { @extend %btn-base; }
.btn-primary {
// additional styles
}
// example usage: <button class="btn btn-primary">Submit</button>Usability
- Bower/ Ruby Gem - assets
- Rails Engine - helpers, layouts
- Sass - functions, mixins, opt. CSS
rems, ems, and px
-
Responsive Typography
- Components
- Absolute
Documentation
Living style guide
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
An Adventure in Style
By Jonathan Lehman
An Adventure in Style
A trip down the path from a problematic old style framework to a new custom style framework. Explores the considerations and decisions along the way.
