Slide 1

Slide 1 text

Empowering designers to code Diana Mounter @broccolini

Slide 2

Slide 2 text

Product Designer & Design Systems Lead GitHub !

Slide 3

Slide 3 text

Git is not GitHub

Slide 4

Slide 4 text

Git is a free and open source distributed version control system

Slide 5

Slide 5 text

GitHub is a collaboration platform built on top of Git, where you can host and share code

Slide 6

Slide 6 text

GitHub is a collaboration platform built on top of Git, where you can host and share code

Slide 7

Slide 7 text

Design Systems Goal: to build a robust, composable, and flexible system, that works across platforms and context, providing guidance on visual language, voice and tone, and implementation.

Slide 8

Slide 8 text

…but right now We’re mostly focussed on improving our CSS style guide. !

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

“it’s all relative” - @jsavalle

Slide 11

Slide 11 text

Learning to code is 
 a journey

Slide 12

Slide 12 text

www

Slide 13

Slide 13 text

Setup dev environment? Git commit what?! How to push O_o Where is all the code? How to run tests? www

Slide 14

Slide 14 text

HTML & CSS prototypes Contributes to production Contributes to style guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance

Slide 15

Slide 15 text

HTML & CSS prototypes Contributes to production Contributes to style guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance

Slide 16

Slide 16 text

Style guides are a gateway 
 drug for empowering 
 designers to code

Slide 17

Slide 17 text

Style guides for designers

Slide 18

Slide 18 text

What makes a style guide good for designers?

Slide 19

Slide 19 text

What makes a style guide good for designers? 1. Highly reusable and flexible styles

Slide 20

Slide 20 text

What makes a style guide good for designers? 1. Highly reusable and flexible styles 2. A clear and consistent naming convention

Slide 21

Slide 21 text

What makes a style guide good for designers? 1. Highly reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation

Slide 22

Slide 22 text

1.Highly reusable and flexible styles

Slide 23

Slide 23 text

1.Highly reusable and flexible styles Styles that can be mixed and matched to achieve many different layouts, independent of their location.

Slide 24

Slide 24 text

Components Frequently used patterns. ! ! ! x x

Slide 25

Slide 25 text

! Layout objects Common layout patterns. The media object Grid systems ♥

Slide 26

Slide 26 text

! Layout objects Common layout patterns. The media object Grid systems ♥

Slide 27

Slide 27 text

! Layout objects Common layout patterns. The media object Grid systems ♥

Slide 28

Slide 28 text

Utilities Single-purpose classes that do one thing well. .h1 .h2 .h3 .h4 .CAPS .strong .regular .underline .no-underline .p-1 .p-2 .p-3 .p-4 .text-gray .text-blue-light .text-blue-dark .text-blue .text-turquoise .text-green .text-yellow .text-orange .text-pink .text-red .mt-1 .mt-2 .mt-3 .mt-4 .mr-1 .mr-2 .mr-3 .mr-4 .py-4 .px-4

Slide 29

Slide 29 text

https://www.etsy.com

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

https://www.etsy.com/shop/HookAndMatter

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Open/closed principle Open for extension, closed for modification.

Slide 34

Slide 34 text

Base component styles only contain styles shared across all variations.

Slide 35

Slide 35 text

Modifiers add variations on top of those styles, and don’t override base styles. ♥

Slide 36

Slide 36 text

2.A clear and consistent 
 naming convention

Slide 37

Slide 37 text

2.A clear and consistent 
 naming convention • Make it easy to understand what styles are being applied

Slide 38

Slide 38 text

"If I’m reading html, I want to know what the css is going to do.” - Adam Morse, CSS and Scalability

Slide 39

Slide 39 text

Saved!

Slide 40

Slide 40 text

2.A clear and consistent 
 naming convention • Make it easy to understand what styles are being applied • Follow a consistent pattern

Slide 41

Slide 41 text

.text-gray-dark .text-gray .text-gray-light .bg-blue-dark .bg-blue .bg-blue-light .btn .btn--small .btn--green-dark .card .card--small .card--large

Slide 42

Slide 42 text

2.A clear and consistent 
 naming convention • Make it easy to understand what styles are being applied • Follow a consistent pattern • Promote reuse of styles

Slide 43

Slide 43 text

// Do .btn-orange {…} .alert-error {…} // Don’t .homepage-cta-button {…} .registration-form-error {…} Use presentational or functional names rather than location-specific

Slide 44

Slide 44 text

// Do .btn-orange {…} // Presentational .alert-error {…} Use presentational or functional names rather than location-specific

Slide 45

Slide 45 text

// Do .btn-orange {…} .alert-error {…} // Functional Use presentational or functional names rather than location-specific

Slide 46

Slide 46 text

// Do .btn-primary {…} // Functional .alert-red {…} // Presentational Use presentational or functional names rather than location-specific

Slide 47

Slide 47 text

Choose what’s right for your team.

Slide 48

Slide 48 text

“The most reusable components are those with class names that are independent of the content.” - Nicolas Gallagher, About HTML semantics and 
 front-end architecture

Slide 49

Slide 49 text

3.Up-to-date & well-written documentation

Slide 50

Slide 50 text

3.Up-to-date & well-written documentation • Explain how to use styles with production code examples

Slide 51

Slide 51 text

• Name • Description • Example • Code snippet

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

CSS Style guide documentation Production website

Slide 54

Slide 54 text

3.Up-to-date & well-written documentation • Explain how to use styles with production code examples • Keep documentation regularly updated

Slide 55

Slide 55 text

Show the status of styles, such as: experimental, stable, or deprecated Examples from: Salesforce Lightning Design System

Slide 56

Slide 56 text

• Use routine events as a reminder to make updates

Slide 57

Slide 57 text

• Use routine events as a reminder to make updates • Make it part of your code review checklist

Slide 58

Slide 58 text

• Use routine events as a reminder to make updates • Make it part of your code review checklist • Make it easy for everyone to contribute

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

CSS Style guide documentation Production website Markdown docs GitHub.com repo

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

3.Up-to-date & well-written documentation • Explain how to use styles with production code examples • Keep documentation regularly updated • Include principles and coding guidelines that explain the CSS behind the styles

Slide 64

Slide 64 text

Teach people the what, the how and the why, so they’ll become champions of your style guide.

Slide 65

Slide 65 text

Most importantly… A style guide should rarely require you to write new CSS.

Slide 66

Slide 66 text

Designing in the browser can be productive and fun!

Slide 67

Slide 67 text

Designers need a safe way to practice with production code.

Slide 68

Slide 68 text

Prototyping tools

Slide 69

Slide 69 text

Prototyping tools ✓ pulls in the style guide

Slide 70

Slide 70 text

Prototyping tools ✓ pulls in the style guide ✓ can share a URL to the prototype

Slide 71

Slide 71 text

Prototyping tools ✓ pulls in the style guide ✓ can share a URL to the prototype ✓ is tracked in Git

Slide 72

Slide 72 text

Prototyping tools ✓ pulls in the style guide ✓ can share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS

Slide 73

Slide 73 text

Prototyping tools ✓ pulls in the style guide ✓ can share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS ✓ includes a simple templating language

Slide 74

Slide 74 text

HTML & CSS prototypes

Slide 75

Slide 75 text

Contributes to production Contributes to style guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance HTML & CSS prototypes

Slide 76

Slide 76 text

The issues with CSS that affect designers are often problems for everyone else too.

Slide 77

Slide 77 text

What makes a style guide good for designers everyone? 1. Highly reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation

Slide 78

Slide 78 text

Building style guides

Slide 79

Slide 79 text

1. Write down your principles

Slide 80

Slide 80 text

Sure! You’re gonna make it OOCSS/ functional/atomic/BEM right?

Slide 81

Slide 81 text

When you actually see the code.

Slide 82

Slide 82 text

Lots of arguments vibrant discussions

Slide 83

Slide 83 text

Principle led development!

Slide 84

Slide 84 text

2. Design for systems

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Spacing scales Use highly composable numbers, such as 16 or 12. Not 10.

Slide 88

Slide 88 text

16 breaks down 8 8 4 4 4 4 2 2 2 2 2 2 2 2

Slide 89

Slide 89 text

16 breaks down, and adds up to whole numbers more easily. 32 32 32 32 32 32 32 32 64 64 64 64 128 128 64

Slide 90

Slide 90 text

Type scales Type scales based on powers of two often end up in more sensible numbers.

Slide 91

Slide 91 text

- Brent Jackson, Mathematical Web Typography Type scales based on powers of two often end up in more sensible numbers.

Slide 92

Slide 92 text

3. Evaluate decisions based on user needs

Slide 93

Slide 93 text

What’s important for your naming convention? • Searchablity • Clarity • Scannability • Intention

Slide 94

Slide 94 text

Treat your style guide like a product.

Slide 95

Slide 95 text

Style guides are design tools for the web.

Slide 96

Slide 96 text

• Reduce barriers

Slide 97

Slide 97 text

• Reduce barriers • Improve workflows

Slide 98

Slide 98 text

• Reduce barriers • Improve workflows • Build a better user experience

Slide 99

Slide 99 text

• Reduce barriers • Improve workflows • Build a better user experience • Empower designers to code

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

Diana Mounter @broccolini Thank you.