Slide 1

Slide 1 text

Rapid Templating: “DESIGNING IN THE BROWSER” with Sass, Compass, and Serve Nathan Smith — Principal UI Architect, projekt202 HTML5.tx — Austin, TX — February 2, 2013

Slide 2

Slide 2 text

I do mobile/web UX + JavaScript at (me, on Twitter: @nathansmith)

Slide 3

Slide 3 text

Relax, don’t stress out taking notes. You can get the slides here…

Slide 4

Slide 4 text

It used to be, that you could make a picture of a website, chop it up, put it back together with code, and with a little luck, maybe even turn it into a real website! (Confession: I miss those days.)

Slide 5

Slide 5 text

html body * div#id table tbody tr td a.special span { /* Dear next developer: Please forgive me! */ color: red !important; } Which isn’t to say we weren’t using CSS…

Slide 6

Slide 6 text

…but at least we had a reliable design workflow.

Slide 7

Slide 7 text

Then this happened…

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Which of course, now looks like this…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

And, can dynamically change into this…

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

The term “Responsive Web Design” was coined by Ethan Marcotte, in an an article published by A List Apart. Loosely defined, it means adapting to various screen sizes, using a fluid grid and @media queries in CSS.

Slide 14

Slide 14 text

Ethan also wrote a book…

Slide 15

Slide 15 text

Upon hearing about this new design technique, I… 1. Felt shock and denial: “Whoa, no way!” 2. Felt guilty for making a fixed-width grid. 3. Bargained: “Maybe it’ll just go away?” 4. Felt depressed, over how little I knew. 5. Started looking up: “Maybe I can learn?” 6. Reconstructed my way of thinking. 7. Felt acceptance and hope: “I can do this!”

Slide 16

Slide 16 text

Yes, those are (very loosely interpreted) the various stages of grief. Essentially, responsive design has both obliterated, and breathed new life into, our field.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Like accessibility, RWD works best with advanced planning… #FAIL

Slide 19

Slide 19 text

Designers “throwing it over the wall” to developers is no longer an ideal workflow. Nowadays, all of the cool kids are working collaboratively.

Slide 20

Slide 20 text

We’ve had to rethink our vantage point.

Slide 21

Slide 21 text

Venerable tools like Photoshop still have their place, but other (equally important) front-end tools have arisen as well…

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text CSS served to browser Neatly organized *.sass

Slide 25

Slide 25 text

CSS Sass Compass

Slide 26

Slide 26 text

Compass makes vendor prefixes easy...

Slide 27

Slide 27 text

Compass brings sanity to gradients...

Slide 28

Slide 28 text Text editors and IDE’s that support Sass/SCSS syntax Aptana BBEdit Chocolat Coda E Text Editor Eclipse Emacs Espresso GEdit Komodo Netbeans PhpStorm PyCharm RubyMine SubEthaEdit Sublime Text TextMate Vim Visual Studio ^ We  recommend

Slide 29

Slide 29 text

For the past two years or so, my preferred approach to rapid prototyping templates (with Sass & Compass) has been Serve…

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Continuing the analogy, Serve is like…

Slide 32

Slide 32 text

Since I can’t show you NDA’d client stuff I’ve made using Serve, we are going to look at one of my personal projects.

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

I think of wireframes and prototypes like this…

Slide 36

Slide 36 text

Ultimately, what we’re aiming to launch is not a PSD file or PDF wireframe. Nor is it the flat HTML, CSS, and JavaScript that comprise a dynamic prototype. Everything except the final product exists just to facilitate the launch. It’s chaff that burns up, once the real thing takes flight. To that end, Serve is like the V of Ruby on Rails’ MVC. It is similar to the “real thing.”

Slide 37

Slide 37 text

This is the index.html.erb home page “view” file.

Slide 38

Slide 38 text

_layout.html.erb points to application.html.erb This file has one code snippet… <%= render :template => "/layouts/application" %>

Slide 39

Slide 39 text

<%= yield %> outputs the view file (index, etc.)

Slide 40

Slide 40 text

This file also renders the partial.

Slide 41

Slide 41 text

Which then renders the stylesheets partial.

Slide 42

Slide 42 text

That has all sorts of interesting goodies.

Slide 43

Slide 43 text

Next up, let’s look at the Sass variables partial…

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Which is imported by the base grid file… Okay, cool.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Which is imported by the responsive partial… Eh? Another @import?

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Which is finally imported by application.sass… Seriously, what the?

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Bear with me. There’s a point to all of this. We’ll get to it. Dude, there’d better be.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

So, after all of that, we end up with a tightly compiled, single application.css file. Eh? What about all the @import statements? HTTP requests, fool. C’mon man!

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

That’s the beauty of Sass. If you @import a *.sass (or *.scss) file, it becomes part of the single, compiled *.css file. Rage subsiding? Okay, good. Still, why all the @import daisy chaining? Glad you asked! :)

Slide 56

Slide 56 text

← The astute observers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS files. Oh, you saw that? Well…

Slide 57

Slide 57 text

Most of those files aren’t used directly, but…

Slide 58

Slide 58 text

…exist to show grid CSS, apart from the site.

Slide 59

Slide 59 text

Those are also the flat CSS files on GitHub.

Slide 60

Slide 60 text

This is why grid code is in separate partials…

Slide 61

Slide 61 text

Hat tip to Nicolas Gallagher for the idea!

Slide 62

Slide 62 text

Yep. I can identify with that! :)

Slide 63

Slide 63 text

Maybe I (don’t) know what I’m doing. Here’s an idea…

Slide 64

Slide 64 text

Simple view helper function, named “html”

Slide 65

Slide 65 text

Variable set in… /views/partials/_vars.html.erb

Slide 66

Slide 66 text

Then, we do/don't end links with *.html

Slide 67

Slide 67 text

Further evidence that I (probably don't) know what I'm doing…

Slide 68

Slide 68 text

A voodoo-magic Z shell (or Bash) recipe…

Slide 69

Slide 69 text

I hate repetitive typing, so I’ve aliased the export command — which also recursively creates a *.zip file — to… unsemantic_site_html

Slide 70

Slide 70 text

Being lazy, FTW… Computer, do my bidding!

Slide 71

Slide 71 text

That builds all the flat files, and a *.zip of it all…

Slide 72

Slide 72 text

DEMO TIME! :) Also, don’t forget you can download the slides here…