Dynamic CSS: Layouts & Beyond

from: shared
use: susy

from: shared
use: no-susy

1989… HTML

Markup Language

It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors.

– Sir Tim

1996 2000…
Cascading Style Sheets

Declarative Syntax
!= Static Results

Design for an Unknown Canvas

CSS is Dynamic & Resilient by Design

2011… calc()

Firefox 4 – function

calc( 16px + 20% )

Combine Relative & Fixed Widths!

2014… CSS Variables

Firefox 31 (unless you count currentColor)

--aka: 'custom properties';

-<empty>-browser-prefix

var(--name, fallback)

var(--one, var(--two, var(--three, fallback)))

See the Pen Custom Props (live code) by @miriamsuzanne on CodePen.

See the Pen Variables » Functions » Mixins (live code) by @miriamsuzanne on CodePen.