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

Global styles the story so far

Tammie Lister
April 02, 2020
Design
1
640

Global styles the story so far

Tammie Lister

April 02, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
tammielis
1
970
CSS in the editor
tammielis
0
240
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.1k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
980
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
610
Opportunity of Open Source
tammielis
0
550
Product design through stories
tammielis
0
310

Other Decks in Design

See All in Design
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
Haruki_Konaka_Portforio.pdf
haruki556
0
650
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
140
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
310
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
我做了一個詐騙網站...嗎？
crboy
1
150
利用者が離れないUX/UIデザイン　長く使われる業務アプリデザインのポイント
ncdc
3
170
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
370

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Code Review Best Practice
trishagee
64
17k
How STYLIGHT went responsive
nonsquared
95
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120

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