Slides from a talk I gave at the HTML5.tx conference.

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

2. I do mobile/web
UX + JavaScript at
(me, on Twitter: @nathansmith)
http://projekt202.com

3. Relax, don’t stress out
taking notes. You can
get the slides here…
http://j.mp/get-serve

4. 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.)

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

6. …but at least we had a reliable design workflow.

7. Then this happened…

9. Which of course,
now looks like this…

11. And, can dynamically
change into this…

13. 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.

14. Ethan also wrote a book…
http://abookapart.com/products/responsive-web-design

15. 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

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

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

19. 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

20. We’ve had to rethink our vantage point.

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

24. Neatly organized *.sass CSS served to browser
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli

25. CSS Sass Compass
http://sonspring.com/journal/sass-for-designers

26. Compass makes vendor prefixes easy...

27. Compass brings sanity to gradients...

28. Text editors and IDE’s that support Sass/SCSS syntax
Aptana BBEdit Chocolat Coda
http://aptana.org http://barebones.com/bbedit http://chocolatapp.com http://panic.com/coda
E Text Editor Eclipse Emacs Espresso
http://e-texteditor.com http://eclipse.org http://gnu.org/software/emacs http://macrabbit.com/espresso
GEdit Komodo Netbeans PhpStorm
http://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm
PyCharm RubyMine SubEthaEdit Sublime Text
^
http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedit http://sublimetext.com/dev
TextMate Vim Visual Studio
nd
http://macromates.com http://vim.org http://microsoft.com/visualstudio
We recomme
http://sass-lang.com/editors.html

29. For the past two years or so, my preferred
approach to rapid prototyping templates
(with Sass & Compass) has been Serve…
http://get-serve.com

31. Continuing the analogy, Serve is like…
http://hdwallpapers.in/the_avengers-wallpapers.html

32. 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

35. I think of wireframes and prototypes like this…
http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project

36. 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.”

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

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

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

40. This file also renders the <head> partial.

41. Which then renders the stylesheets partial.

42. That has all sorts of interesting goodies.

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

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

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

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

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

53. 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!

55. 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! :)

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

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

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

59. Those are also the flat CSS files on GitHub.

60. This is why grid code is in separate partials…

61. Hat tip to Nicolas Gallagher for the idea!

62. Yep. I can identify with that! :)

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

64. Simple view helper function, named “html”

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

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

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

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

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

70. Being lazy, FTW… Computer, do my bidding!

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

72. DEMO TIME! :)
Also, don’t forget you can
download the slides here…
http://j.mp/get-serve