rapid templating with serve
DESCRIPTION
Slides from a talk I gave at the HTML5.tx conference.TRANSCRIPT
Rapid Templating:“DESIGNING IN THE BROWSER”with Sass, Compass, and Serve
Nathan Smith — Principal UI Architect, projekt202
HTML5.tx — Austin, TX — February 2, 2013
I do mobile/webUX + JavaScript at
http://projekt202.com
(me, on Twitter: @nathansmith)
Relax, don’t stress out taking notes. You can get the slides here…
http://j.mp/get-serve
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.)
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…
…but at least we had a reliable design workflow.
Then this happened…
Which of course,now looks like this…
And, can dynamicallychange into this…
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.
Ethan also wrote a book…
http://abookapart.com/products/responsive-web-design
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
Yes, those are (very loosely interpreted) the various stages of grief. Essentially, responsive design has both obliterated, and breathed new life into, our field.
Like accessibility, RWD works best with advanced planning…
#FAIL
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
We’ve had to rethink our vantage point.
Venerable tools like Photoshop still have their place, but other (equally important) front-end tools have arisen as well…
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browserNeatly organized *.sass
CSS Sass Compasshttp://sonspring.com/journal/sass-for-designers
Compass makes vendor prefixes easy...
Compass brings sanity to gradients...
http://sass-lang.com/editors.html
Text editors and IDE’s that support Sass/SCSS syntax
Aptanahttp://aptana.org
BBEdithttp://barebones.com/bbedit
Chocolathttp://chocolatapp.com
Codahttp://panic.com/coda
E Text Editorhttp://e-texteditor.com
Eclipsehttp://eclipse.org
Emacshttp://gnu.org/software/emacs
Espressohttp://macrabbit.com/espresso
GEdithttp://projects.gnome.org/gedit
Komodohttp://activestate.com/komodo-ide
Netbeanshttp://netbeans.org
PhpStormhttp://jetbrains.com/phpstorm
PyCharmhttp://jetbrains.com/pycharm
RubyMinehttp://jetbrains.com/ruby
SubEthaEdithttp://codingmonkeys.de/subethaedit
Sublime Texthttp://sublimetext.com/dev
TextMatehttp://macromates.com
Vimhttp://vim.org
Visual Studiohttp://microsoft.com/visualstudio ^We recommend
For the past two years or so, my preferred approach to rapid prototyping templates (with Sass & Compass) has been Serve…
http://get-serve.com
Continuing the analogy, Serve is like…
http://hdwallpapers.in/the_avengers-wallpapers.html
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
I think of wireframes and prototypes like this…
http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
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.”
This is the index.html.erb home page “view” file.
_layout.html.erb points to application.html.erb
This file has one code snippet…
<%= render :template =>"/layouts/application" %>
<%= yield %> outputs the view file (index, etc.)
This file also renders the <head> partial.
Which then renders the stylesheets partial.
That has all sorts of interesting goodies.
Next up, let’s look at theSass variables partial…
Which is imported bythe base grid file…
Okay, cool.
Which is imported bythe responsive partial…
Eh? Another @import?
Which is finally importedby application.sass…
Seriously, what the?
Bear with me. There’s a pointto all of this. We’ll get to it.
Dude, there’d better be.
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!
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! :)
← The astute observers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS files.
Oh, you saw that? Well…
Most of those files aren’t used directly, but…
…exist to show grid CSS, apart from the site.
Those are also the flat CSS files on GitHub.
This is why grid code is in separate partials…
Hat tip to Nicolas Gallagher for the idea!
Yep. I can identify with that! :)
Maybe I (don’t) know whatI’m doing. Here’s an idea…
Simple view helper function, named “html”
Variable set in… /views/partials/_vars.html.erb
Then, we do/don't end links with *.html
Further evidence that I (probably don't) know what I'm doing…
A voodoo-magic Z shell (or Bash) recipe…
I hate repetitive typing, so I’ve aliased the export command — which also recursively creates a *.zip file — to…
unsemantic_site_html
Being lazy, FTW… Computer, do my bidding!
That builds all the flat files, and a *.zip of it all…
DEMO TIME! :)
Also, don’t forget you can download the slides here…
http://j.mp/get-serve