This PDF has Adobe's "Sticky Notes" with the content of - - PowerPoint PPT Presentation

▶
this pdf has adobe s sticky notes with the content of the
SMART_READER_LITE
LIVE PREVIEW

This PDF has Adobe's "Sticky Notes" with the content of - - PowerPoint PPT Presentation

Sep 19, 2023 231 likes •1.04k views

This PDF has Adobe's "Sticky Notes" with the content of the presentation. To read the content, download the PDF and view with Acrobat. Paul Grant Twitter: @cssinate Regardless of what we discover, we understand and truly believe

slide-1
SLIDE 1

This PDF has Adobe's "Sticky Notes" with the content of the presentation. To read the content, download the PDF and view with Acrobat.

slide-2
SLIDE 2

Paul Grant

Twitter: @cssinate

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12

Regardless of what we discover, we understand and truly believe that everyone did the best job they could, given what they knew at the time, their skills and abilities, the resources available, and the situation at hand.

Norm Kerth

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

Design Systems 101 The Sale The Groundwork The Launch The Obstacles

slide-16
SLIDE 16

Design Systems 101

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

CLARITY > EFFICIENCY > CONSISTENCY > BEAUTY

Jina Bolton

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

Write really great CSS once.

slide-23
SLIDE 23

style guide

/stīl gīd/

A document containing definitions for typefaces, colors, spacing, and other design considerations.

slide-24
SLIDE 24

pattern library

/ˈpadərn ˈlīˌbrerē/

A website where a developer finds patterns for components.

slide-25
SLIDE 25

design system

/dəˈzīn ˈsistəm/

The whole kit and kaboodle.

slide-26
SLIDE 26

Pre-processor Naming Convention

slide-27
SLIDE 27

Naming Convention

slide-28
SLIDE 28

BEM OOCSS ITCSS SMACSS

slide-29
SLIDE 29

<div class="cdc-contactCard"> <h1 class="cdc-contactCard__contactName"></h1> <img src="..." class="cdc-contactCard__contactImage" /> <p class="cdc-contactCard__information"> Phone: 294-555-9234 </p> <p class="cdc-contactCard__information cdc-contactCard__information-- isUnavailable"> Email: UNAVAILABLE </p> <p class="cdc-contactCard__information cdc-contactCard__information-- isUnavailable"> Address: UNAVAILABLE </p> </div>

slide-30
SLIDE 30

cdc- cdc- cdc- cdc- cdc- cdc- cdc- cdc- <div class=" contactCard"> <h1 class=" contactCard__contactName"></h1> <img src="..." class=" contactCard__contactImage" /> <p class=" contactCard__information"> Phone: 294-555-9234 </p> <p class=" contactCard__information contactCard__information-- isUnavailable"> Email: UNAVAILABLE </p> <p class=" contactCard__information contactCard__information-- isUnavailable"> Address: UNAVAILABLE </p> </div>

slide-31
SLIDE 31

contactCard contactCard contactCard contactCard contactCard contactCard contactCard contactCard <div class="cdc- "> <h1 class="cdc- __contactName"></h1> <img src="..." class="cdc- __contactImage" /> <p class="cdc- __information"> Phone: 294-555-9234 </p> <p class="cdc- __information cdc- __information-- isUnavailable"> Email: UNAVAILABLE </p> <p class="cdc- __information cdc- __information-- isUnavailable"> Address: UNAVAILABLE </p> </div>

slide-32
SLIDE 32

__contactName __contactImage __information __information __information __information __information <div class="cdc-contactCard"> <h1 class="cdc-contactCard "></h1> <img src="..." class="cdc-contactCard " /> <p class="cdc-contactCard "> Phone: 294-555-9234 </p> <p class="cdc-contactCard cdc-contactCard

  • isUnavailable">

Email: UNAVAILABLE </p> <p class="cdc-contactCard cdc-contactCard

  • isUnavailable">

Address: UNAVAILABLE </p> </div>

slide-33
SLIDE 33
  • isUnavailable
  • isUnavailable

<div class="cdc-contactCard"> <h1 class="cdc-contactCard__contactName"></h1> <img src="..." class="cdc-contactCard__contactImage" /> <p class="cdc-contactCard__information"> Phone: 294-555-9234 </p> <p class="cdc-contactCard__information cdc-contactCard__information "> Email: UNAVAILABLE </p> <p class="cdc-contactCard__information cdc-contactCard__information "> Address: UNAVAILABLE </p> </div>

slide-34
SLIDE 34

SCSS LESS

slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37

.cdc-form__label--large _form.scss

slide-38
SLIDE 38

https:/ /github.com/davidhund

slide-39
SLIDE 39

The Sale

slide-40
SLIDE 40

(c) 1983 CSSinate Games

slide-41
SLIDE 41

NO! No design systems. We already have Bootstrap We don't need it It's not on the roadmap ⏵

slide-42
SLIDE 42

It has things we don't need. It doesn't have everything we do need. It will be just as easy. You can do better than Bootstrap!

slide-43
SLIDE 43

NO! No design systems. We already have Bootstrap We don't need it It's not on the roadmap ⏵

slide-44
SLIDE 44

Work is getting duplicated The UI/UX has inconsistencies Sloppy code means sloppy work

slide-45
SLIDE 45

NO! No design systems. We already have Bootstrap We don't need it It's not on the roadmap ⏵

slide-46
SLIDE 46

It can be rolled out over time A few hours per week for setup It will make future feature development faster

slide-47
SLIDE 47

Okay! You win!

slide-48
SLIDE 48

The Groundwork

slide-49
SLIDE 49

Open-source as a project model for internal work.

Kevin Lamping

slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

The Launch

slide-54
SLIDE 54
slide-55
SLIDE 55

Why? How? What?

slide-56
SLIDE 56

Why?

Reducing duplication of work Creating something better than Bootstrap Giving users a more consistent experience

slide-57
SLIDE 57

How?

Pattern library Good documentation Naming convention

slide-58
SLIDE 58

What?

Show off some changes Either mock-up as image, or in the browser

slide-59
SLIDE 59

We're ready!

slide-60
SLIDE 60

Rolling out a pattern library is infinitely harder than building one.

Dave Rupert

slide-61
SLIDE 61

Rolling out a pattern library is infinitely harder than building one.

Dave Rupert

slide-62
SLIDE 62

The Obstacles

slide-63
SLIDE 63

Don't go into a tunnel you can't see the end of

Paraphrased from Harry Roberts

slide-64
SLIDE 64
slide-65
SLIDE 65

Prefixes

Prefixes for CSS, JS, automated testing, etc...

slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71

Specificity Type selectors p, h1, section Class selectors .mds-button, [name*="mds-"] ID selectors #myDiv

!important

slide-72
SLIDE 72

1000s 100s 10s 1s 1 5

slide-73
SLIDE 73

!important id class type 1 5

<style> .myId { color: red; } .class1.class2.class3.class4.class5 { color: blue; } </style> <div id="myId" class="class1 class2 class3 class4 class5">Text</div>

Text

slide-74
SLIDE 74

<style> #myDiv { color: red !important; } </style> <div id="myId">Text</div>

!important id class type 1 1

div#myId { color: blue !important; } [id="#myId"]#myId { color: blue !important; }

slide-75
SLIDE 75

Lead Time

slide-76
SLIDE 76

This was a problem anyway, even before your design system. Bootstrap might not have had the component either.

slide-77
SLIDE 77

_probation.scss

Stores probationary CSS Put a placeholder in the pattern library

slide-78
SLIDE 78

Wrap-up

New features use the design system Roll out to older components one at a time Tackle conflicts by using a single file of overwrites Give new components documentation

slide-79
SLIDE 79

Paul Grant

Twitter: @cssinate