Solid, Design Systems Lightning Talk

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