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

Global styles the story so far

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
April 02, 2020
Design
1
200

Global styles the story so far

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

April 02, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
CSS in the editor
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
42
Dropped stitches and tangled yarn - a call to simplify WordPress
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
110
Being Brave
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
180
Lessons from growing design in the open
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
100
Thinking in patterns
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
Design matters in open source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
76
Opportunity of Open Source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
45
Product design through stories
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
150
User casualty
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
25

Other Decks in Design

See All in Design
「SPACE DESIGN × DX」 - 店舗・オフィス等の空間DX伴⾛⽀援 -
9105b00a46e39490dceece1a02593cbb?s=48 pointedge
0
290
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
2.3k
Meep
2dd96d0fb363cbdc029639bf0e8452a9?s=48 vincentwu
PRO
1
240
Free Charlie_Old
F2a18f1ef63198439d0722c7e88129e2?s=48 kignato1
1
270
Owl House Story Test
Bdd9e989b8078ae14ea9abd4d4d81a83?s=48 blakedg95
1
340
デザインシステムチームの「身内」を増やす取り組み / Design Study Morning #07
A6679d91db1449741ed55c061f981b02?s=48 numata
0
360
Maslow会社資料 | Maslow Company Guide ver.8.5
Aa19e202c24c51a41415206e7742c098?s=48 maslow_akkun
1
2.6k
Fairest of Them All
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
1
620
NCDC_UXSession_20220120
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
0
660
やさしいBacklogの使い方
Ff18a27b908029695ca70b144d42e3ba?s=48 wattlaa
2
420
Head Above The Water
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
2
600
Cosoji
5b00d9af8ebf80927291b9863cda8501?s=48 rsmile
0
240

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
910
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.2k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.5k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
890
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k

Transcript

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

  2. 1. Why?

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

    many people
  4. None
  5. None

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

    creators

  7. 2. How?

  8. Put screenshot here Starting with some flows

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

    also?

  10. C v v

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

  12. yvz8y.csb.app/#/i2

  13. None

  14. What could this look like?

  15. None
  16. None

  17. 3. The story so far

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

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

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

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

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

  23. 3. Coming soon

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

  25. None

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

  27. None

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

  29. None

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

  31. None

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

  33. None

  34. 4. The future

  35. Custom CSS

  36. View all global styling

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

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

    or certain

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

  40. Beyond the sidebar

  41. None

  42. Importing & exporting

  43. “Everything starts with the block…” By improving blocks, we can

    see what should be global

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

  45. Iterate the block

  46. Bring to the block, if right

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

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