HowAboutWe for Couples Views & Styles Patterns

Slide 1

Slide 1 text

Overview of Couples Views/Styles HowAboutWe Server 1 pointer March 26, 2013

Slide 2

Slide 2 text

● logic in views is harder to test ● views are difficult to reason about Problem: Our Views are messy WTF is happening here??

Slide 3

Slide 3 text

Fix #0: SASS and View Styleguide! https://github.com/howaboutwe/sass-style-guide

Slide 4

Slide 4 text

NOT DESIGN Markup is about content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Use SASS THE GOOD PARTS

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Variables are your friend

Slide 9

Slide 9 text

Mixin it up ... WITH

Slide 10

Slide 10 text

Decorators & Helpers WHEN SHIT GETS COMPLICATED

Slide 11

Slide 11 text

Decorators Logic moves with the OBJECT Helpers Logic moves with the VIEW

Slide 12

Slide 12 text

Move logic out of views When ● if statements ● ternary ● lots of states ● It hurts my head Then Generate in (testable) code ● Classes ● Copy ● Html attributes

Slide 13

Slide 13 text

This

Slide 14

Slide 14 text

Slide 15

Slide 15 text

How?

Slide 16

Slide 16 text

Generate classes

Slide 17

Slide 17 text

Move classes up

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Generate Copy

Slide 20

Slide 20 text

Encapsulate repetition in partials Sometimes zero Sometimes one Sometimes two

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Generate html attributes From TO WITH

Slide 23

Slide 23 text

Our current pattern ● Use & enforce styleguide for SASS & views ● Markup is about content not design ● Use SASS ○ variables ○ mixins ● Move classes up & design changes to CSS ● Use decorators (or helpers) to: ○ Generate classes ○ Generate copy ○ Generate HTML attributes