Developing Inspired Guides with CSS Custom Properties (variables)

Using CSS Custom Properties (variables) is a useful way to develop style guides that are usable by both creative and technical people. In this fast-paced talk, Andy will introduce CSS Custom Properties and explain how he’s used them in his Inspired Guides (http://inspired.guide).

1. Developing Inspired Guides with CSS Custom Properties Andy Clarke SydCSS, October 2017 @malarkey
3. Head of Design
5. Style guide types • Static style/visual identity guides • Voice and tone guides • Front-end code guidelines • Component/pattern libraries
6. Style guide types Static style/visual identity guides Voice and tone guides Front-end code guidelines Component/pattern libraries
9. 25% off : sydcss25 Valid for an arbitrary 7 days to encourage you buy sooner. 
 Only 50 codes available. May contain nuts.
16. Preprocessor variables • Are removed when compiled • Cannot be updated at runtime • Cannot be manipulated by JavaScript
17. Native CSS variables • No need for a pre/post processor • Use the cascade • Media query or other state changes • Can be manipulated by JavaScript
18. LESS syntax @color-text-default : black; Variable body { color : @color-text-default; } Style
19. Sass syntax $color-text-default : black; Variable body { color : $color-text-default; } Style
20. Custom properties --color-text-default : black; or: --color_text_default : black; Two dashes identified as variables. Hyphens or underscores, 
 but not spaces, allowed in property names.
21. 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.
22. Multiple value strings Multiple value strings allowed. --text-shadow : 1px 1px 2px black; Variable body { text-shadow : var(--text-shadow); } Style
23. 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.
24. 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.
25. 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
26. Specificity :root { --color-text-default : black; } body { --color-text-default : dimgray; } h1 { colour : var(--color-text-default); }
28. Design tokens • Colour palette • Background colours • Border colours • Border radii • Border widths • Font colours • Font families • Font sizes • Line heights • Spacing • Time
29. 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.
30. 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 specificity.
31. Scope :root { --color-text-default : black; } Root element header {
 --color-text-default : dimgray; } Header Collects properties for easier maintenance.
32. Scope elements [role="main"] {--color-text-default : black; } ARIA roles .secondary { --color-text-default : dimgray; } Classes #main { --color-text-default : black; } IDs
33. 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>
34. Scope :root, 
 :root:lang(en) { --external-link : "external link"; } :root:lang(de) { --external-link : "externer link"; }
35. Scope a[href^="http"]::after {content : " ("var(--external-link) ")"} Set the appropriate ::after pseudo-element language according to the lang attribute value.
36. Scope theming body.playfair { --font-typeface-primary : "Playfair Display"; } body.merriweather { --font-typeface-primary : Merriweather; } body { font-family : var(font-typeface-primary ); }
37. 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
38. 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.
39. Internet Explorer 11 CSS Custom Properties not implemented
40. Fails silently body { color : var(--color-text-default); } Style Properties whose names don’t exist are ignored.
41. Fallbacks Substitutions are similar to font stacks. body { color : black; color : var(--color-text-default); }
42. Substitutions Substitutions are similar to font stacks. body { color : var(--color-text-default), black; }
43. Supports @supports((--foo : bar)) { 
 body { color : var(--color-text-default); } } Style Renders CSS Custom Properties only if the dummy property is supported.
44. Supports (not) @supports(not (--foo : bar)) { 
 body { color : $color-text-default; } } Style Renders CSS style when the dummy property isn’t supported.
45. Polyfill 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
47. HTML Properties to display CSS Properties for rendering
48. HTML Properties to display CSS Properties for rendering config.json inspired.js
49. Config "color" : { "text" : { "default" : "#574e4e", "alt" : "#a19c9c", "inverse" : "#fff", "inverse-alt" : "#a19c9c" } } Configure variables in config.json.
50. Mustache <dl> <dt>--color-text-default</dt> <dd>{{{ color.text.default }}}</dd> </dl> Render Mustache variables into HTML at runtime.
51. 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.
52. CSS body { color : var(--color-text-default); }
53. _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.
54. CSS imports <link rel="stylesheet" type="text/css" 
 href="css/inspired.css">
55. 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'); …
58. 25% off : sydcss25 Valid for an arbitrary 7 days to encourage you buy sooner. 
 Only 50 codes available. May contain nuts.
59. speakerdeck.com/ malarkey Andy Clarke SydCSS, October 2017 @malarkey
60. Thanks Andy Clarke @malarkey