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

Global styles the story so far

Global styles the story so far

Tammie Lister

April 02, 2020
Tweet

More Decks by Tammie Lister

Other Decks in Design

Transcript

  1. Global Styles:
    What’s in the Works
    Tammie Lister

    View Slide

  2. 1. Why?

    View Slide

  3. “I have this vision, but I
    don’t know CSS”
    So many people

    View Slide

  4. View Slide

  5. View Slide

  6. “I want to allow block
    styling from my theme”
    Theme creators

    View Slide

  7. 2. How?

    View Slide

  8. Put screenshot here
    Starting with some flows

    View Slide

  9. Put screenshot here
    What is the experience of the theme also?

    View Slide

  10. C
    v
    v

    View Slide

  11. yvz8y.csb.app/#/v2/post

    View Slide

  12. yvz8y.csb.app/#/i2

    View Slide

  13. View Slide

  14. What could this look like?

    View Slide

  15. View Slide

  16. View Slide

  17. 3. The story so far

    View Slide

  18. “It all starts with the block”
    A Gutenberg mantra

    View Slide

  19. Line height
    github.com/WordPress/gutenberg/issues/20339

    View Slide

  20. Exposing our need for better design tools
    Label ‘Design tools’

    View Slide

  21. Theme exploration by Kjell
    themeshaper.com/2020/03/20/exploring-global-styles

    View Slide

  22. Follow along
    github.com/WordPress/gutenberg/issues/20331
    github.com/WordPress/gutenberg/projects/40

    View Slide

  23. 3. Coming soon

    View Slide

  24. v1: sidebar
    font/text families | base font/style | link styling

    View Slide

  25. View Slide

  26. Heading and text families
    github.com/WordPress/gutenberg/issues/21028

    View Slide

  27. View Slide

  28. Link styling
    github.com/WordPress/gutenberg/issues/21032

    View Slide

  29. View Slide

  30. Base font size and scale
    github.com/WordPress/gutenberg/issues/21030

    View Slide

  31. View Slide

  32. Let’s have a demo!
    github.com/WordPress/gutenberg/pull/20530

    View Slide

  33. View Slide

  34. 4. The future

    View Slide

  35. Custom CSS

    View Slide

  36. View all global styling

    View Slide

  37. Mosaic view for global styles
    github.com/WordPress/gutenberg/issues/20477

    View Slide

  38. Personal thoughts, hopes
    and dreams…
    None of these are set or certain

    View Slide

  39. Beyond the sidebar
    github.com/WordPress/gutenberg/issues/20212

    View Slide

  40. Beyond the sidebar

    View Slide

  41. View Slide

  42. Importing & exporting

    View Slide

  43. “Everything starts with
    the block…”
    By improving blocks, we can see what should be global

    View Slide

  44. Color picker
    github.com/WordPress/gutenberg/issues/19785

    View Slide

  45. Iterate the block

    View Slide

  46. Bring to the block, if right

    View Slide

  47. What will you make?
    Collaborate, explore and share

    View Slide

  48. Thank you
    speakerdeck.com/tammielis/global-styles-the-story-so-far

    View Slide