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. Hello!

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

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

    View Slide

  7. View Slide

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

    View Slide

  9. “No more code bloat!”

    View Slide

  10. View Slide

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

    View Slide

  12. Original story block styles

    View Slide

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

    View Slide

  14. Modified Component Styles

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. Solid Team

    View Slide

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

    View Slide

  21. Choosing a style
    based on our
    specific needs ✔

    View Slide

  22. View Slide

  23. How did we get
    started?

    View Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. solid.buzzfeed.com

    View Slide