Developing Inspired Guides with CSS Custom Properties (variables)

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
October 02, 2017

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).

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

October 02, 2017
Tweet

Transcript

  1. Developing Inspired Guides with CSS Custom Properties Andy Clarke SydCSS,

    October 2017 @malarkey
  2. None
  3. Head of Design

  4. None
  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
  7. None
  8. None
  9. 25% off : sydcss25 Valid for an arbitrary 7 days

    to encourage you buy sooner. 
 Only 50 codes available. May contain nuts.
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  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); }
  27. None
  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
  46. None
  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'); …
  56. None
  57. None
  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