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

Global styles the story so far

Avatar for Tammie Lister Tammie Lister
April 02, 2020
Design
1
740

Global styles the story so far

Avatar for Tammie Lister

Tammie Lister

April 02, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.1k
CSS in the editor
Avatar for Tammie Lister tammielis
0
290
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.3k
Being Brave
Avatar for Tammie Lister tammielis
2
1.6k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
740
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
610
Product design through stories
Avatar for Tammie Lister tammielis
0
350

Other Decks in Design

See All in Design
Flow, Not Stock 知識触媒としてのIA
Avatar for Takehisa Gokaichi 5kaichi
1
280
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
680
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.1k
パンくずリストかわいい(breadcrumb so cute)
Avatar for Ysuda ysuda
0
270
マズロー安達の弟子2期生、成功事例集（17人中17人が3ヶ月平均140万受注）
Avatar for マズロー安達 maslow_akkun
0
5.2k
「デザイン」を信じるには
Avatar for なつ iflection
0
240
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
280
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
0
120
freee + Product Design FY25Q4
Avatar for freee freee
4
14k
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1k
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
540
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
480

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
640
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k

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