Developing Inspired Guides with CSS Custom Properties (variables)

Developing Inspired Guides with CSS Custom Properties Andy Clarke SydCSS,
October 2017 @malarkey

Head of Design

Style guide types • Static style/visual identity guides • Voice
and tone guides • Front-end code guidelines • Component/pattern libraries

Style guide types Static style/visual identity guides Voice and tone
guides Front-end code guidelines Component/pattern libraries

25% off : sydcss25 Valid for an arbitrary 7 days
to encourage you buy sooner.   Only 50 codes available. May contain nuts.

Preprocessor variables • Are removed when compiled • Cannot be
updated at runtime • Cannot be manipulated by JavaScript

Native CSS variables • No need for a pre/post processor
• Use the cascade • Media query or other state changes • Can be manipulated by JavaScript

LESS syntax @color-text-default : black; Variable body { color :
@color-text-default; } Style

Sass syntax $color-text-default : black; Variable body { color :
$color-text-default; } Style

Custom properties --color-text-default : black; or: --color_text_default : black; Two
dashes identiﬁed as variables. Hyphens or underscores,   but not spaces, allowed in property names.

Case sensitive --color-text-default : black; is different to: --Color_Text_Default :
dimgray; Custom property names are case-sensitive. --foo and --FOO are distinct properties.

Multiple value strings Multiple value strings allowed. --text-shadow : 1px
1px 2px black; Variable body { text-shadow : var(--text-shadow); } Style

Retrieving variables --color-text-default : black; Custom property body { color
: var(--color-text-default); } Style var() tells a browser to retrieve the value of a property.

JavaScript document.documentElement.style.setProperty("  --color-text-default", "black"); CSS Custom Properties can be accessed
and manipulated by JavaScript.   I have no idea how to do that.

Nesting variables --color-base-default-darker : dimgray; 1st custom property --gradient-gray :
linear-gradient(to top,   var(--color-base-default-darker), black); 2nd custom property

Speciﬁcity :root { --color-text-default : black; } body { --color-text-default
: dimgray; } h1 { colour : var(--color-text-default); }

Design tokens • Colour palette • Background colours • Border
colours • Border radii • Border widths • Font colours • Font families • Font sizes • Line heights • Spacing • Time

Design tokens --color-primary --color-primary-dark --color-primary-darker --color-primary-light --color-primary-lighter --color-supporting --color-supporting-dark --color-supporting-darker
--color-supporting-light --color-supporting-lighter Semantic, human readable properties.

Scope :root { --font-primary-typeface : "Playfair Display"; --font-primary-stack : "Playfair
Display", serif; --font-primary-weight : 400; } :root pseudo-class matches everything in the <html> element but with a higher speciﬁcity.

Scope :root { --color-text-default : black; } Root element header
{  --color-text-default : dimgray; } Header Collects properties for easier maintenance.

Scope elements [role="main"] {--color-text-default : black; } ARIA roles .secondary
{ --color-text-default : dimgray; } Classes #main { --color-text-default : black; } IDs

Scope elements <p>black: Inherited from :root<html></p> <header><p>dimgray: Set by <header>
element</p><header> <div role="main">black: Set by main role</div> <p class="secondary">dimgray: Set by .secondary class</p> <div id="main">black: Set by #main id</div>

Scope :root,   :root:lang(en) { --external-link : "external link"; }
:root:lang(de) { --external-link : "externer link"; }

Scope a[href^="http"]::after {content : " ("var(--external-link) ")"} Set the appropriate
::after pseudo-element language according to the lang attribute value.

Scope theming body.playfair { --font-typeface-primary : "Playfair Display"; } body.merriweather
{ --font-typeface-primary : Merriweather; } body { font-family : var(font-typeface-primary ); }

Calc --spacing : 1.5rem; 1st custom property --spacing-small : calc(2/var(--spacing)); 
--spacing-medium : calc(1.5*var(--spacing));  --spacing-large : calc(2*var(--spacing)); More custom properties

March ’16 July ’14 March ’16 Firefox 31 Chrome 49
Opera 36 March ’16 Safari 9.1 February ’17 March ’16 iOS  Safari 9.3 Android   Chromium 56 Microsoft   Edge 15 * April ’17 September ’17 Chrome   Android 61 NB: It’s not possible to use CSS Custom Properties in pseudo elements in Edge 15.

Internet Explorer 11 CSS Custom Properties not implemented

Fails silently body { color : var(--color-text-default); } Style Properties
whose names don’t exist are ignored.

Fallbacks Substitutions are similar to font stacks. body { color
: black; color : var(--color-text-default); }

Substitutions Substitutions are similar to font stacks. body { color
: var(--color-text-default), black; }

Supports @supports((--foo : bar)) {   body { color :
var(--color-text-default); } } Style Renders CSS Custom Properties only if the dummy property is supported.

Supports (not) @supports(not (--foo : bar)) {   body {
color : $color-text-default; } } Style Renders CSS style when the dummy property isn’t supported.

Polyﬁll PostCSS has a plugin to transform CSS Custom Properties
if you understand how to $ npm install postcss-custom-properties. I don’t. http://postcss.org  https://github.com/postcss/postcss-custom-properties

HTML Properties to display CSS Properties for rendering

HTML Properties to display CSS Properties for rendering conﬁg.json inspired.js

Config "color" : { "text" : { "default" : "#574e4e",
"alt" : "#a19c9c", "inverse" : "#fff", "inverse-alt" : "#a19c9c" } } Configure variables in config.json.

Mustache <dl> <dt>--color-text-default</dt> <dd>{{{ color.text.default }}}</dd> </dl> Render Mustache variables
into HTML at runtime.

branding-colours navigation branding-logo panels components principles contents tables forms-buttons tokens
forms typography- comparison icons typography-font media typography- headings typography-lists typography- numerals typography- paragraphs typography- quotations typography Render partial HTML pages into style guide index page.

CSS body { color : var(--color-text-default); }

_a _hr _alerts _ig _breadcrumbs _img _cards _media _components _pagination
_form-buttons _pills _forms _print _global _tables _type-columns _type-heading typography- paragraphs _type-lists _type-misc _type-paragraphs _type-quotes Dedicated stylesheets for each element type and components.

CSS imports <link rel="stylesheet" type="text/css"   href="css/inspired.css">

inspired.css @import url('_global.css'); @import url('_a.css'); @import url('_alerts.css'); @import url('_breadcrumbs.css'); @import
url('_cards.css'); @import url('_components.css'); @import url('_forms.css'); @import url('_form-buttons.css'); …

25% off : sydcss25 Valid for an arbitrary 7 days
to encourage you buy sooner.   Only 50 codes available. May contain nuts.

speakerdeck.com/ malarkey Andy Clarke SydCSS, October 2017 @malarkey

Thanks Andy Clarke @malarkey

Developing Inspired Guides with CSS Custom Properties (variables)

Developing Inspired Guides with CSS Custom Properties (variables)

More Decks by Andy Clarke

Other Decks in Technology

Featured

Transcript