From Style Guides to Component Libraries

A look at the evolution of style guides from a static tool used by designers, to a living set of functional UI components now prevalent in UI design and development.

Transcript

1. From Style Guides to
   Component Libraries
   

   View Slide

2. Outline
   ● The 3 Building Blocks of Web Pages
   Establish a baseline. A quick overview of the three main languages used to create web pages.
   ● The Rise of Style Guides
   Set historical context. Looking back at the evolution of style guides, starting with brand standards.
   ● Shift Toward Component Thinking
   The epiphany. Modern web design and development looks very different from even a few years ago.
   ● Component-ized Style Guides
   Bring it together. Now we bring together modern component thinking with the idea of a style guide.
   

   View Slide

3. The 3 Building Blocks of
   Web Pages
   

   View Slide

4. HTML: HyperText Markup Language
   “The most basic building block on the web. It defines and describes the content of a
   webpage.”
   

   View Slide

5. CSS: Cascading Style Sheets
   “It describes the presentation of a document written in HTML. CSS describes how
   elements should be rendered on screen, on paper, in speech, or on other media.”
   

   View Slide

6. JavaScript
   “JavaScript runs in the Web browser. It allows HTML documents to have behavior,
   usually triggered by the occurrence of an event.”
   

   View Slide

7. How they all come together
   Think of a house...
   HTML CSS JavaScript
   The structure of your application. The appearance of your
   application.
   The behavior of your application.
   

   View Slide

8. The Rise of Style Guides
   

   View Slide

9. Graphical Brand Standards
   Style guides have their roots in graphic design, advertising,
   and other printed media where you want visual consistency
   across multiple artifacts.
   In the context of web pages, a printed reference is only
   useful to a point. While the graphical standards remain
   important, the medium is inherently different.
   Brand standards must expand to accommodate digital
   interface affordances.
   

   View Slide

10. Static Style Guide
    The transition from printed brand guidelines to a
    web-compatible solution gives us Static Style
    Guides.
    A Static Style Guide is a standalone representation
    of a User Interface (UI), with no direct link to code.
    ✗ Usually created by a graphic designer using
    graphic design software
    ✗ Webpage styling may not look like the static
    style guide
    ✗ Quickly gets out of sync with the actual web
    site
    

    View Slide

11. Living Style Guide
    It would be better if the style guide and the
    web site could be kept in sync automatically.
    A Living Style Guide is auto-generated from
    the codebase when changes are made,
    hence… living.”
    ✓ Style Guide uses actual CSS
    ✗ Still have to maintain the Style Guide
    code separately from the actual web
    site code.
    ✗ Copy and paste from the Style Guide
    creates duplication that becomes
    difficult to maintain in the long term
    

    View Slide

12. Shift toward Component Thinking
    

    View Slide

13. A Component is
    an independent,
    reusable unit of
    your webpage.
    

    View Slide

14. Component-based Web Development
    HTML
    JavaScript
    CSS
    Traditional web development Component-based web development
    Component
    HTML
    CSS
    JavaScript
    Component
    HTML
    CSS
    JavaScript
    Component
    HTML
    CSS
    JavaScript
    Component
    HTML
    CSS
    JavaScript
    

    View Slide

15. A Component-based Application
    Guided Search
    

    View Slide

16. Component-ized Style Guides
    

    View Slide

17. A style guide is only
    a guide.
    

    View Slide

18. A component library is
    part of the application.
    

    View Slide

19. A Component Library
    Toast
    HTML
    CSS
    JavaScript
    Dropdown
    HTML
    CSS
    JavaScript
    Input Field
    HTML
    CSS
    JavaScript
    Masked Data
    HTML
    CSS
    JavaScript
    Independent
    Application Agnostic
    

    View Slide

20. How to Make a Component-ized Style Guide
    Components Application
    Code
    Showcase
    Web site
    Web site!
    InputField
    HTML
    CSS
    JavaScript
    Dropdown
    HTML
    CSS
    JavaScript
    Toast
    HTML
    CSS
    JavaScript
    Masked Data
    HTML
    CSS
    JavaScript
    

    View Slide

21. Without a Component Library
    Quick Search Form
    

    View Slide

22. Using the Component Library
    Quick Search Component
    

    View Slide

23. End
    

    View Slide