SASS and Pattern-Lab team workflow

class: center, middle

# SASS and Pattern-Lab team workflow using Vagrant/Puppet

[CASCADE BOS | Tues., November 18](http://www.meetup.com/cascadebos/events/214545522/) @ HBR

by **Kevin Newman, Daigo Fujiwara, Fred Lalande and Matt Wagner**

![img](img/hbr_logo.svg)

---

# Welcome

[HBR.org’s redesigned website](http://hbr.org) launched on November 10.

.small[The HBR Tech team wanted to take advantage of css pre-processing and other recent technologies, but with multiple developers in different environments (Mac, PC and Linux), they faced a workflow challenge.

The team developed a solution on top of github-hosted Vagrant virtual machine configurations packaging everything from ubuntu to sass compilation managed by grunt, all to power local Pattern Lab environments.

HBR developers Kevin Newman, Daigo Fujiwara, Matt Wagner, and Fred Lalande will talk about the process and tools they used.]

---
class: center, middle, inverse

# HBR redesign overview

---
class: center, middle

# Responsive Web Design

---
### Before

![img](img/old-site.png)

---

### After

![img](img/am-i-responsive.png)

---
class: center, middle

## Not a new idea

---
class: center, middle

# It's Easy... 
```css
    @media (min-width:500px) { ... }
```

---
class: center, middle

# ...or is it?

Not just code, but an approach

---
class: middle

### Tools and approaches:
* SCSS (build using grunt "grunt-contrib-compass")
* Atomic Web Design/Pattern Lab
* Object Oriented CSS approach
* Zurb Foundation 
* Require.js to r.js AMD javascript 
.small[(JavaScript will not be covered in this talk)]

---
class: middle

### What made it possible:
* Github 
* Vagrant
* Jenkins 
* Grunt

---
class: middle

### Dependencies: 
* Pattern Lab = PHP +  Apache 
* Grunt, Bower = Node.js
* Sass/Compass = Ruby

---
class: center, middle

## Daigo Fujiwara

---
class: center, middle

![img](img/sass.png)

---
class: center

Old site - homepage only 77 KB, but **16 HTTP request** for stylesheets 
![img](img/old-hbr-css.png)

---
class: center

New site - homepage (and ALL the other pages) **ONE http request** cached by Amazon cloudfront (but large, 180 KB)
![img](img/new-hbr-css.png)

---
class: center, middle

## Our **main goal** going into the redesign was to write _reusable, flexible, scalable, modular, and pattern-based_ front-end code.

---
class: center, middle, inverse

# Object-Oriented CSS

---
class: middle

## Object-oriented CSS, or OOCSS.

A term and methodology coined by Nicole Sullivan

[github.com/stubbornella/oocss/wiki](https://github.com/stubbornella/oocss/wiki)

---
class: center, middle
### Instead of one monolithic piece of code to complete tasks ABC, you’d end up with **each of A , B and C** abstracted into its own object. Now we’d have A which we can combine with either B or C in any order we choose.

-- _Harry Roberts_ 
---
class: middle

# Two rules

1.  **Separate "Structure" and "Skin"**
     - Structure contains core of an object and skin extends its visual representation. 
2.  **Separate "Container" and "Content"**
      - Avoid location-dependent styles.

---
class: center, middle

#Helper classes

---
class: center, middle
## Example: 
```html
    <button class="button">Submit</button>
```
OR
```html
    <button class="button letter-spacing-neutral">
      Button with lots of words in them
    </button>
```
---
class: center, middle

##Example: Spacing helpers

Use following 3-letter combination for a class name

.small[
`p, m` = padding, margin

`a, t, r, b, l, h, v` = all, top, right, bottom, left, horizontal, vertical

`s, m, l, n` = small(6px), medium(12px), large(24px), none(0px)]

```html
    <div class="mtl">margin top large</button>
```
From <a href="https://github.com/kianoshp/SASS-CSS-Boilerplate/blob/master/sass/padding-margin.scss" target="_blank">Kianosh Pourian's CSS-SASS Boilerplate</a>

---
class: middle

# Single responsibility principle

### **Code that does one job, one job only, and one job very well.**

---
class: center, middle, inverse

# Atomic Web Design

---
class: middle

Created by **Brad Frost**, creator of [this is responsive](http://bradfrost.github.io/this-is-responsive/) pattern library

### Atomic web design is a methodology used to construct web design systems.

---
class: center, middle

![img](img/atomic-web-design.gif)

---
class: middle

### Designing **"Web pages"** doesn't make sense anymore.

### With different screen sizes, pixel perfection & designing the same experience for "all devices" is not possible.

But our reality still consists of design review meetings where people look over static mock-ups.

---
class: middle

### Web sites are living things that fill a variety of containers.

# **EMBRACE THE FLUIDITY OF THE WEB!**

### Instead of page-based designs, we need **design systems**.

---
class: center, middle

![img](img/atomic-web-design.gif)
**Atoms** on the Web are HTML elements like: h1, p, div, button, etc. More abstract atoms include colors and fonts.

Combining atoms, you get **molecules**, molecules create **organisms**, and so on.

---
class: middle

![img](img/atomic-web-design.gif)

## Each of them is **on its own, responsive**.

---
class: middle

![img](img/atomic-web-design.gif)
Think of molecules and organisms as **Lego-like building blocks** designed to be combined together.

Combined, they become **templates**, and ultimately **pages**. 
---
class: middle

![img](img/atomic-web-design.gif)

Atomic design allows us to **traverse from abstract to concrete** (in context), so you can find reusable pieces / building-blocks more easily, and only evolve certain section of the page.

---
class: center, middle, inverse

# Front end Style Guide

---
class: middle

### A browser-based web front-end style guide, an interface inventory, or pattern library, can help us with:
* Design Consistency
* Code Standards (i.e. html structure, css class names)
* Responsive Web Design

---
class: middle

### Benefits of a front-end style guide

* Being able to test responsive design ("Where does this design break?")
* Improved workflow (Feedback / collaboration "Designing/deciding in the browser.")
* Shared vocabulary (Design/Tech/Edit "What do you call this building block?")
* Future reference ("What's available? What needs to be designed/coded next?")

Adapted from [Front-end Style Guides](http://24ways.org/2011/front-end-style-guides/) by Anna Debenham

---
class: middle

## Examples of front-end style guide
* [StyleGuides.io](http://styleguides.io/)
* [BBC](http://www.bbc.co.uk/gel)
* [Starbucks](http://www.starbucks.com/static/reference/styleguide/)
* [Yelp](http://www.yelp.com/styleguide)
* [styleguides.io](http://styleguides.io/)
* [Debenham's style guide collection](https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides-and-pattern-libraries)

---
class: middle

### Those style guides are great, but...
* Time consuming to create
* Seen only as a designer/developer tool
* Often too abstract
* Often too incomplete and/or out-of-date

---
class: middle, center

## Instead of writing style guide after redesign is finished, we built & tested small building-blocks that later **_became_** our front-end style guide.

---
class: middle, center

![img](img/pattern-lab.png)

---

class: middle, center

## Fred Lalande

---
class: center, middle, inverse

# Pattern Lab

---
class: middle

![img](img/pattern-lab.png)
[patternlab.io](http://patternlab.io)

Pattern Lab is a collection of tools to help you create atomic design systems.

It's an open sourced tool to create the Atomic Web Design system that will become your site's "living" front-end style guide and pattern library.

Written in PHP, hosted at [github](https://github.com/pattern-lab/patternlab-php)
---
class: middle
## What does Pattern-Lab give us?

- Visual library of building blocks
- View-port resizer
- Annotation and Code viewer
- NOT language-dependent (write HTML, CSS and JavaScript however you want)

---
class: middle

## Why Pattern Lab?

**Build systems, not pages**

---
class: middle

**The need for modularity**
- Component-driven design
- It's essential to consider how every thing you include in an interface looks and functions across a whole slew of browsers, devices, and environments.

---
class: middle

**A better workflow**
- Pattern libraries create a shared vocabulary between disciplines, make testing easier, and build a canonical reference to keep coming back to.

---
class: middle

**Tiny Bootstraps, for Every Client/Project**
- Responsive deliverables need to be more than an ad hoc collection of pages. 
- Create a custom design system with which clients/colleagues can modify, extend, and grow with into the future.

---
class: middle

## Who is it for?

---
class: middle

**Information Designers**
- Integrate modular thinking into the design process right out of the gate, and helps demonstrate responsive patterns to create.

**Visual Designers**
- Way to see how each module works in a responsive environment

---
class: middle

**Developers**
- Efficient system for quickly developing prototypes and production-ready front-end code.

**Clients and managers**
- Can view the project in the browser, as a review, and as a reference.

---
class: middle

## One URL to Rule Them All

Pattern Lab can serve as a hub for your project and should live in an environment accessible via a URL where everyone involved with your project can view the design system.

---
class: middle

## Demo

[demo.patternlab.io](http://demo.patternlab.io/)

---
class: center, middle, inverse

# Zurb Foundation

---
class: middle

![img](img/foundation.svg)
http://foundation.zurb.com/

---
class: middle

- Written in SASS
- Loaded via Bower
- Mobile first grid system
- Built in media query
- Open Source -- **Daigo** even contributed with a pull request
- Rem based units
- Very well documented [foundation.zurb.com/docs/](http://foundation.zurb.com/docs/)

---
class: middle

**Grid**

[foundation.zurb.com/docs/components/grid.html](http://foundation.zurb.com/docs/components/grid.html)

- Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. 
- Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

---
class: middle

**Utility Classes**

[foundation.zurb.com/docs/utility-classes.html](http://foundation.zurb.com/docs/utility-classes.html)

- Foundation includes a handful of helpful utility classes to add certain behaviors to your elements.

---
class: middle

**Why not bootstrap?**

- Less design to override
- Bootstrap creator Mark Otto used to work for ZURB. (Now he works for GitHub)

---
class: middle, center

# But _team_ workflow?

---
class: middle, center

## Matt Wagner

---
class: middle, center

# **Afterthought**

---
class: middle, center

### You've developed a fully-functional website
### ...or a pattern...

---
class: middle, center

_How are people going to **see** what you've created_?

# Development and **Deployment**

## Deploy what you've developed to a website

---
class: middle, center

# **FTP**

File Transfer Protocol

---
class: middle, center

How does FTP play out in a **group**?

---
class: middle, center

# Hint:

File **Trampling** Protocol

---
class: middle, center

# Solution?

Version/Revision Control

---
class: middle, center

# SVN
Emphasis on **Control**

Not on **Flexibility**

---
class: middle, center

# **git**
The right mix of accountability and flexibility

---
class: middle, center

Deployment becomes routine

**automatable**

Updates to master branch on github trigger a build/push to the website using Jenkins

---
class: middle, center

# Flying Solo
##"I got all this set up on my computer in 1 day"

_...then spent 1/2 a day a week keeping it up-to-date_

---
class: middle, center

![img](img/php.png)

---
class: middle, center

![img](img/ruby.png)

---
class: middle, center

![img](img/grunt.png)

---
class: middle, center

![img](img/compass.png)

---
class: middle, center

![img](img/bower.png)

---
class: middle, center

![img](img/pattern-lab.png)

---
class: middle, center

![img](img/foundation.svg)

---
class: middle, center

![img](img/kitchen-sink.png)

---
class: middle, center

# Development ecosystem so far:
[your favorite tools], plus -

PHP, Ruby, Grunt, Compass, Bower, Pattern Lab, Foundation, the kitchen sink...

---
class: middle, center

![img](img/github.png)

---
class: middle, center

![img](img/jenkins.png)

---
class: middle, center

# + Collaboration

Add on FTP/SVN/GIT, Jenkins... oh my.

---
class: middle, center

##The challenge is in the math:

How do you get 5 team members, at least as many contractors, and who knows how many others **contributing** as quickly and continuously as possible?

---
class: middle, center

Every developer has the same computer, _right_?

---
class: middle, center

#Box it up!

---
class: middle, center

#VirtualBox

Everyone can use the same machine...

---
class: middle, center

![img](img/vagrant.png)

---
class: middle, center

# Vagrant
...with the same settings and add-on software...

### _plus_...

---
class: middle, center

![img](img/puppet.jpg)

---
class: middle, center

##Pass-through file system

...and get right to the work of developing -
on their favorite platform!

---
class: middle, center

##Put ALL THE THINGS together on GitHub

---
class: middle, center

#"DevOps" role

Centralized or shared

_just do it_

---
class: middle, center

##To make it easier for **you** to start...
...introducing [**daisy**](https://github.com/HBRGTech/daisy).

---
class: middle, center

# thank you!

[Download and try daisy](https://github.com/HBRGTech/daisy), let us know what you think!
https://github.com/HBRGTech/daisy