Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PatternFly 4 variable system
Andres Galante
September 25, 2018
0
49
PatternFly 4 variable system
Andres Galante
September 25, 2018
Tweet
Share
More Decks by Andres Galante
See All by Andres Galante
Make Something Great! Become an Open Source Contributor
andresgalante
0
150
Make Something Great: Become an Open Source Contributor
andresgalante
0
83
How to use CSS to make your App look amazing and be accessible on any device
andresgalante
0
32
Open source - JUG BA
andresgalante
0
20
Open source - QCon19
andresgalante
0
66
CSS - Media queries o tamanho não importa
andresgalante
0
21
Cosmos
andresgalante
0
33
Open source
andresgalante
3
65
Media Queries - CSS Conf Argentina
andresgalante
3
370
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Designing Experiences People Love
moore
130
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Happy Clients
brianwarren
89
5.6k
Ruby is Unlike a Banana
tanoku
91
9.2k
Writing Fast Ruby
sferik
612
57k
It's Worth the Effort
3n
172
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
A better future with KSS
kneath
225
15k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Facilitating Awesome Meetings
lara
29
4k
Transcript
None
PATTERNFLY’S VARIABLE SYSTEM
PATTERNFLY 3 1
PatternFly Users 1 PATTERNFLY 3 1
None
https://www.nngroup.com/articles/top-10-mistakes-web-design/ “...when things always behave the same, users don't have
to worry about what will happen. Instead, they know what will happen based on earlier experiences” Jakob Nielsen PATTERNFLY 3 1
PatternFly Contributors 2 Developers Designers PATTERNFLY 3 1
“If you give a mockup to 10 developers you’ll get
10 different results and none of them will look like the original mockup” Paul, UXD supreme leader PATTERNFLY 3 1
PATTERNFLY 4 VARIABLES 2
BUMPERS! PATTERNFLY 4 VARIABLES 2
Patternfly 4 Variables Global vs Component variables https://css-tricks.com/theming-with-variables-globals-and-locals/ PATTERNFLY 4
VARIABLES 2
Global and component variables, when combined, can be super powerful,
make CSS more maintainable, and even collaborative. Geoff Graham PATTERNFLY 4 VARIABLES 2
Global variables global variables keep consistency across components PATTERNFLY 4
VARIABLES 2
Global variables Typography Borders Breakpoints Colors Spaces Shadows PATTERNFLY 4
VARIABLES 2
None
Component variables component variables are scoped to theme-able component properties
PATTERNFLY 4 VARIABLES 2
Comment This is a an example of a title Here
goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
Global variable link color: #007bba PATTERNFLY 4 VARIABLES 2
None
None
Comment This is a an example of a title Here
goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
Global link color = BLUE Navigation link color = Global
link color Comment link color = Global link color PATTERNFLY 4 VARIABLES 2
Navigation color Commment color Global link color PATTERNFLY 4 VARIABLES
2
Global link color = YELLOW Navigation link color = Global
link color Comment link color = Global link color PATTERNFLY 4 VARIABLES 2
PATTERNFLY 4 VARIABLES 2 Navigation color Commment color Global link
color
Comment This is a an example of a title Here
goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
Global link color = YELLOW Navigation link color = Global
link color Comment link color = RED PATTERNFLY 4 VARIABLES 2
Navigation color Commment color PATTERNFLY 4 VARIABLES 2 Global link
color
Comment This is a an example of a title Here
goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
None
None
None
None
None
None
Global spacer xl = 32px Modal Box padding = Global
spacer xl PATTERNFLY 4 VARIABLES 2
Global spacer xl 32px PATTERNFLY 4 VARIABLES 2 Modal padding
top Global spacer xl
Global spacer md = 16px Modal Box padding = Global
spacer md PATTERNFLY 4 VARIABLES 2 Global spacer xl = 32px
PATTERNFLY 4 VARIABLES 2 Global spacer md 16px Modal padding
top Global spacer md Global spacer xl 32px
Sharing components between Red Hat’s design systems PATTERNFLY 4 VARIABLES
2
A good design system empowers designers to code, and developers
to design. PATTERNFLY 4 VARIABLES 2
Thanks!