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
730
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
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
220
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
550
もうひとつのアーキテクチャ #kichijojipm
Avatar for kondoyuko kondoyuko
0
240
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
3.8k
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
120
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
180
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
Avatar for sugiyama sugiyama_sukedachi
0
120
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
230
freee + Product Design FY25Q4
Avatar for freee freee
4
14k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
420
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
170
「デザイン」を信じるには
Avatar for なつ iflection
0
240

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
920
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
290
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k

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