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
http://projekt202.com
(me, on Twitter: @nathansmith)
Slide 3
Slide 3 text
Relax, don’t stress out
taking notes. You can
get the slides here…
http://j.mp/get-serve
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…
http://abookapart.com/products/responsive-web-design
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!”
http://www.recover-from-grief.com/7-stages-of-grief.html
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.
http://flickr.com/photos/camknows/8374910613
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
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browser
Neatly organized *.sass
Slide 25
Slide 25 text
CSS Sass Compass
http://sonspring.com/journal/sass-for-designers
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
http://sass-lang.com/editors.html
Text editors and IDE’s that support Sass/SCSS syntax
Aptana
http://aptana.org
BBEdit
http://barebones.com/bbedit
Chocolat
http://chocolatapp.com
Coda
http://panic.com/coda
E Text Editor
http://e-texteditor.com
Eclipse
http://eclipse.org
Emacs
http://gnu.org/software/emacs
Espresso
http://macrabbit.com/espresso
GEdit
http://projects.gnome.org/gedit
Komodo
http://activestate.com/komodo-ide
Netbeans
http://netbeans.org
PhpStorm
http://jetbrains.com/phpstorm
PyCharm
http://jetbrains.com/pycharm
RubyMine
http://jetbrains.com/ruby
SubEthaEdit
http://codingmonkeys.de/subethaedit
Sublime Text
http://sublimetext.com/dev
TextMate
http://macromates.com
Vim
http://vim.org
Visual Studio
http://microsoft.com/visualstudio
^
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…
http://get-serve.com
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Continuing the analogy, Serve is like…
http://hdwallpapers.in/the_avengers-wallpapers.html
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.
http://unsemantic.com
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…
http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
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…
http://j.mp/get-serve