Form with Function

Form with Function

NDC Oslo 2015
Tim G. Thomas

@timgthomas

timgthomas.com
avention.com
Why CSS?

Smaller file size

Less complexity

Single responsibility

Declarative
Why not CSS?
“Stateful” CSS
<div>...</div>
<div class="active">...</div>
Today

CSS Foundations

Experiments
CSS Foundations
Adjacent Sibling Selector
Direct Sibling Selector
The “Checked” Pseudoselector
Labels
Generated Content
The “Hover” Pseudoselector
Today’s Experiments

Loading Indicator

Form Elements

“Show More”/“Show Less”

Application State

Tabs

Modals

Menu
Loading Indicator
Form Elements
“Show More”/“Show Less”
Application State
Tabs
Modals
Menu
One more thing...
Thanks!

@timgthomas

codepen.io/TimGThomas

github.com/TimGThomas/stateful-css-slides