Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Global styles the story so far
Search
Tammie Lister
April 02, 2020
Design
1
690
Global styles the story so far
Tammie Lister
April 02, 2020
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
1k
CSS in the editor
tammielis
0
260
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
670
Opportunity of Open Source
tammielis
0
580
Product design through stories
tammielis
0
330
Other Decks in Design
See All in Design
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
LLMによるRAG評価用合成テストデータの生成
licux
6
660
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Speed Design
sergeychernyshev
25
780
A better future with KSS
kneath
238
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Automating Front-end Workflow
addyosmani
1367
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Bash Introduction
62gerente
610
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
Global Styles: What’s in the Works Tammie Lister
1. Why?
“I have this vision, but I don’t know CSS” So
many people
None
None
“I want to allow block styling from my theme” Theme
creators
2. How?
Put screenshot here Starting with some flows
Put screenshot here What is the experience of the theme
also?
C v v
yvz8y.csb.app/#/v2/post
yvz8y.csb.app/#/i2
None
What could this look like?
None
None
3. The story so far
“It all starts with the block” A Gutenberg mantra
Line height github.com/WordPress/gutenberg/issues/20339
Exposing our need for better design tools Label ‘Design tools’
Theme exploration by Kjell themeshaper.com/2020/03/20/exploring-global-styles
Follow along github.com/WordPress/gutenberg/issues/20331 github.com/WordPress/gutenberg/projects/40
3. Coming soon
v1: sidebar font/text families | base font/style | link styling
None
Heading and text families github.com/WordPress/gutenberg/issues/21028
None
Link styling github.com/WordPress/gutenberg/issues/21032
None
Base font size and scale github.com/WordPress/gutenberg/issues/21030
None
Let’s have a demo! github.com/WordPress/gutenberg/pull/20530
None
4. The future
Custom CSS
View all global styling
Mosaic view for global styles github.com/WordPress/gutenberg/issues/20477
Personal thoughts, hopes and dreams… None of these are set
or certain
Beyond the sidebar github.com/WordPress/gutenberg/issues/20212
Beyond the sidebar
None
Importing & exporting
“Everything starts with the block…” By improving blocks, we can
see what should be global
Color picker github.com/WordPress/gutenberg/issues/19785
Iterate the block
Bring to the block, if right
What will you make? Collaborate, explore and share
Thank you speakerdeck.com/tammielis/global-styles-the-story-so-far