Styling a design system based on Bootstrap 4 and Web Components @ - - PowerPoint PPT Presentation

▶
styling a design system based on bootstrap 4 and web
SMART_READER_LITE
LIVE PREVIEW

Styling a design system based on Bootstrap 4 and Web Components @ - - PowerPoint PPT Presentation

Jun 10, 2023 148 likes •1.1k views

qCON SP, APril 24th, 2017 Styling a design system based on Bootstrap 4 and Web Components @ andres galante Hola! @ andres galante pt_AR CSS MODULARITY qCON SP, APril 24th, 2017 Styling a design system based on Bootstrap 4 and Web

slide-1
SLIDE 1

qCON SP, APril 24th, 2017

Styling a design system based on Bootstrap 4 and Web Components

@andresgalante

slide-2
SLIDE 2

😋 Hola!

slide-3
SLIDE 3

@andresgalante

slide-4
SLIDE 4
slide-5
SLIDE 5

pt_AR 💪

slide-6
SLIDE 6
slide-7
SLIDE 7

qCON SP, APril 24th, 2017

Styling a design system based on Bootstrap 4 and Web Components

@andresgalante

CSS MODULARITY

slide-8
SLIDE 8

Agenda

Good CSS Architecture The PatternFly Use Case Q&A Design Systems CSS Specificity Shadow DOM

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11

Um argentino incomoda muita gente…

slide-12
SLIDE 12

Design systems. The road to consistency and modularity.

LEt’s Star t…

slide-13
SLIDE 13

“A design system is everything that makes up your product.”

– Mark Otto

https://speakerdeck.com/mdo/build-your-own-bootstrap

slide-14
SLIDE 14

Consistency

slide-15
SLIDE 15

– Jakob Nielsen

“...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”

https://www.nngroup.com/articles/top-10-mistakes-web-design/

slide-16
SLIDE 16

5 + 8 = ?

slide-17
SLIDE 17

5 + 8 = 13

slide-18
SLIDE 18

123 + 34 = ?

slide-19
SLIDE 19

123 + 34 = 157

slide-20
SLIDE 20

123 + 34 = ?

slide-21
SLIDE 21

123 + 34 = 157

slide-22
SLIDE 22

Cache Memory

slide-23
SLIDE 23

Average attention span

  • f a human:

2000: 12 seconds 2015: 8 seconds

http://www.statisticbrain.com/attention-span-statistics/

slide-24
SLIDE 24

http://www.statisticbrain.com/attention-span-statistics/

9 seconds

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

Modularity

slide-28
SLIDE 28

http://atomicdesign.bradfrost.com/chapter-4/

slide-29
SLIDE 29

http://atomicdesign.bradfrost.com/chapter-4/

slide-30
SLIDE 30

http://atomicdesign.bradfrost.com/chapter-4/

slide-31
SLIDE 31

CSS Villains

Globally operating Very leaky Dependent on location Based on inheritance

slide-32
SLIDE 32

CSSSpecificity

slide-33
SLIDE 33

How the browsers decides which CSS declaration is the most relevant to apply to an element.

CSS Specificity

slide-34
SLIDE 34

If one selector is more specific than another, it overrides it. If two selector share the same weight, the later one is applied.

CSS Specificity

slide-35
SLIDE 35

Selector Weight

Selector Weight Example Type Selector 1 p { … } Class Selectors 10 .success { … } ID Selectors 100 #header { … } Inline Styles 1000 <p style=“color: red”>

slide-36
SLIDE 36

p.success { color: green; } !important;

slide-37
SLIDE 37
slide-38
SLIDE 38

Demo

Specificity

slide-39
SLIDE 39

Class 🔫 Type Selectors IDs 🔫 Class Inline styles 🔫 IDs !important 💤 all of them.

slide-40
SLIDE 40

https://stufgandnonsense.co.uk/archives/css_specificity_wars.html

slide-41
SLIDE 41

ShadowDOM

good CSS

slide-42
SLIDE 42

Web Components

slide-43
SLIDE 43

https://www.w3.org/standards/techs/components#w3c_all

ShadowDOM Custom Elements HTML Imports HTML Templates

Web Components

slide-44
SLIDE 44

Encapsulate all of their HTML and CSS. JavaScript behaviours are native on the browser.

Web Components

slide-45
SLIDE 45

Shadow Dom

slide-46
SLIDE 46

Custom elements + Shadow DOM = Self contained HTML, CSS and JS

slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49

CSS

slide-50
SLIDE 50

The ShadowRoot

A shadow root is a document fragment that gets attached to a “host” element.

slide-51
SLIDE 51

Demo

ShadowRoot

slide-52
SLIDE 52

ShadowDOM

Light DOM + Shadow DOM = Composed DOM

<slot> <p>text<p> LightDOM

Distributed Node

slide-53
SLIDE 53

<slot>

Placeholders inside your component that users can fill with their own markup.

slide-54
SLIDE 54

Demo

Slots

slide-55
SLIDE 55

Stylin’ the Shadow DOM

slide-56
SLIDE 56
slide-57
SLIDE 57

💪 💪 💪 💪

Life Life Life

Life as a parent

slide-58
SLIDE 58
slide-59
SLIDE 59

CSS selectors from the outer page don’t apply inside your component. Styles defined inside don’t bleed out. They’re scoped to the host element.

slide-60
SLIDE 60

:host(<selector>) selector

Allows you to target the host if it matches a <selector>.

::host-context(<selector>) selector

Matches the component if it or any of its ancestors matches <selector>.

:slotted(<compound-selector>) selector

Matches nodes that are distributed into a <slot>

slide-61
SLIDE 61

Demo

host and slotted selectors

slide-62
SLIDE 62
slide-63
SLIDE 63

https://www.polymer-project.org/ https://www.webcomponents.org/

slide-64
SLIDE 64

http://caniuse.com/#feat=shadowdomv1

slide-65
SLIDE 65

https://platform-status.mozilla.org/#shadow-dom https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shadowdom/

slide-66
SLIDE 66

webcomponents.org

slide-67
SLIDE 67

Shadow DOM 👎 Excellent name 👎 Scoped Styles 🎊 👎 Modular components 👏 Bad browser support

slide-68
SLIDE 68

Let’s write really good CSS!

CSS GUIDELINES

slide-69
SLIDE 69

4 Rules to keep your CSS tidy

Write great CSS documentation

1 2 3 4

Use a global namespace Use BEM Keep selectors flat

slide-70
SLIDE 70

Use a namespace to avoid conflicts. 1

slide-71
SLIDE 71

.pf-masthead { color: white; }

slide-72
SLIDE 72

BEM syntax {{block}}__{{element}}--{{modifier}}

https://en.bem.info/methodology/

2

slide-73
SLIDE 73

.pf-masthead .pf-masthead__section .pf-masthead--inverse

Block Element Modifier

slide-74
SLIDE 74

Use flat Selector to avoid specificity issues.

https://en.bem.info/methodology/

3

slide-75
SLIDE 75

👎 Whenever possible don’t nest selectors 👎 Use classes, never IDs 👎 Never use !important

slide-76
SLIDE 76

Write good CSS docs for a correct CSS implementation. 4

https://github.com/patternfly/patternfly-css/blob/master/.github/DOCUMENTATION_TEMPLATE.md

slide-77
SLIDE 77

Class name: .classname Applied to: <element> Outcome: what does it do? Required: Yes or no Remarks: General remarks Accessibility: role, aria and a11y comments

slide-78
SLIDE 78

<header class="pf-masthead">

slide-79
SLIDE 79

Class name: .pf-masthead Applied to: <header> or <div> Outcome: Initiates a masthead Required: Yes Remarks: Always use it with the grid Accessibility: role=”navigation”, skip link, etc

slide-80
SLIDE 80

Lint CSS!

slide-81
SLIDE 81

https://houndci.com

slide-82
SLIDE 82

OOCSS & BEM 👎 Vanilla CSS 👎 Transparent structure 👎 Modular components 👏 It can go wrong really fast

slide-83
SLIDE 83
slide-84
SLIDE 84

PatternFly Putting everything together

USE CASE

slide-85
SLIDE 85
slide-86
SLIDE 86

Custom Elements: Shadow DOM: 👎 yes! 👏 not now.

slide-87
SLIDE 87

https://patternfly-webcomponents.github.io/

slide-88
SLIDE 88

CSS PatternFly Guidelines

https://github.com/patternfly/patternfly-css/blob/master/CODE-GUIDELINES.md

slide-89
SLIDE 89
slide-90
SLIDE 90

Bootstrap 4 is awesome = happy me

slide-91
SLIDE 91
slide-92
SLIDE 92

Demo

PatternFly masthead

slide-93
SLIDE 93

…and they all live happily ever after.

slide-94
SLIDE 94

Muito Obrigado :)

github.com/patternfly slack.patternfly.org patternfly.org

@andresgalante