Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing Inspired Guides with CSS Custom Properties (variables)

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

Andy Clarke

October 02, 2017
Tweet

More Decks by Andy Clarke

Other Decks in Technology

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