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

Transcript

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

   View Slide

2. View Slide

3. Head of Design
   

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

7. View Slide

8. View Slide

9. 25%
   off : sydcss25
   Valid for an arbitrary 7 days to encourage you buy sooner. 

   Only 50 codes available. May contain nuts.
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

26. Specificity
    :root {
    --color-text-default : black; }
    body {
    --color-text-default : dimgray; }
    h1 {
    colour : var(--color-text-default); }
    

    View Slide

27. View Slide

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

    View Slide

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.
    

    View Slide

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 element but with a higher specificity.
    

    View Slide

31. Scope
    :root {
    --color-text-default : black; }
    Root element
    header {

    --color-text-default : dimgray; }
    Header
    Collects properties for easier maintenance.
    

    View Slide

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

    View Slide

33. Scope elements
    black: Inherited from :root
    dimgray: Set by element
    black: Set by main role
    dimgray: Set by .secondary class
    black: Set by #main id
    

    View Slide

34. Scope
    :root, 

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

39. Internet Explorer 11
    CSS Custom Properties
    not implemented
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Supports
    @supports((--foo : bar)) {
    

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

    View Slide

44. Supports (not)
    @supports(not (--foo : bar)) {
    

    body {
    color : $color-text-default; }
    }
    Style
    Renders CSS style when the dummy property isn’t supported.
    

    View Slide

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
    

    View Slide

46. View Slide

47. HTML
    Properties to display
    CSS
    Properties for rendering
    

    View Slide

48. HTML
    Properties to display
    CSS
    Properties for rendering
    config.json
    inspired.js
    

    View Slide

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

    View Slide

50. Mustache
    
    --color-text-default
    {{{ color.text.default }}}
    
    Render Mustache variables into HTML at runtime.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

54. CSS imports
    href="css/inspired.css">
    

    View Slide

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');
    …
    

    View Slide

56. View Slide

57. View Slide

58. 25%
    off : sydcss25
    Valid for an arbitrary 7 days to encourage you buy sooner. 

    Only 50 codes available. May contain nuts.
    

    View Slide

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

    View Slide

60. Thanks
    Andy Clarke
    @malarkey
    

    View Slide