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

Solid, Design Systems Lightning Talk

Emily Brick
December 15, 2016

Solid, Design Systems Lightning Talk

Emily Brick

December 15, 2016
Tweet

Other Decks in Technology

Transcript

  1. how a mock assumes we use things how we really use things

    View full-size slide

  2. “It’s a way to reduce
    duplication”

    View full-size slide

  3. “No more code bloat!”

    View full-size slide

  4. This is a “story block” component It appears in a feed

    View full-size slide

  5. Original story block styles

    View full-size slide

  6. Original story block styling
    story block variant
    another story block variant
    another story block
    & another story block variant
    another type of story block

    View full-size slide

  7. Modified Component Styles

    View full-size slide

  8. how we were currently handling this:
    how we’d handle it with a functional css approach:

    View full-size slide

  9. Choosing a style
    based on our
    specific needs ✔

    View full-size slide

  10. How did we get
    started?

    View full-size slide

  11. Start Small.
    Layout
    • responsive grid
    • utilities
    Base
    • typography
    • colors
    • interface
    • buttons
    • forms
    • tables
    Resources
    • logos
    • templates
    • typefaces and icons
    • sandbox (prototypes)

    View full-size slide

  12. solid.buzzfeed.com

    View full-size slide