Slide 1

Slide 1 text

DOCUMENTING YOUR STYLESHEETS USING A STYLEGUIDE IS AWESOME AND PERHAPS YOU SHOULD THINK ABOUT DOING IT. Speaking about...

Slide 2

Slide 2 text

As your codebase grows it becomes harder and harder to create a mental map of it as a whole. This is especially true for your CSS

Slide 3

Slide 3 text

HEY THERE I’m Justin Morris (@plasticine) I am the design & frontend guy at...

Slide 4

Slide 4 text

CONTEXT • We have a fairly large (# of Views) app • We have a LOT of UI (editing/reading interfaces) • We have LOTS of CSS (~11k SLOC SCSS) • Everyone at TC writes/maintains/implements front- end code (which is awesome)

Slide 5

Slide 5 text

CONTEXT • Every day; ... CSS is altered across dozens of different commits ... by many devs ... all working in different areas of the codebase

Slide 6

Slide 6 text

LOL , GOOD LUCK KEEPING ON TOP OF THAT

Slide 7

Slide 7 text

THE PROBLEM CSS can sometimes feel like this:

Slide 8

Slide 8 text

THE PROBLEM ...which leads to this: DEV 1: “I need to style this widget, is there a .class for this?” DEV 2: “Who knows! :D Just write even more CSS!” DEV 1: “LOL, Ok! More CSS is better, right? RIGHT!?” ...which results in this (and crap code):

Slide 9

Slide 9 text

ASSET PIPELINE ...are AWESOME! They really help! SASS + COMPASS +

Slide 10

Slide 10 text

• Write modular, abstracted SASS in dev • Serve compiled, compressed CSS in prod • Write less boilerplate, repeat yourself less • Be happier, etc... SASS + COMPASS) + ASSET PIPELINE

Slide 11

Slide 11 text

BUT still really hard to see the big picture...

Slide 12

Slide 12 text

DOCUMENTATION WILL SAVE US! github.com/kneath/kss (well, it seems to be helping so far anyway)

Slide 13

Slide 13 text

WRITE SOME DOCUMENTATION! KSS Step 1

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

WRITE SOME EXAMPLE MARKUP IN THE STYLEGUIDE KSS Step 2

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

PROFIT KSS Step 3 http://localhost:3000/styleguide

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

THANKS! @plasticine pixelbloom.com dribbble.com/justinmorris theconversation.edu.au Go make your own styleguide: github.com/kneath/kss