Rapid Templating with Serve
-
Upload
nathan-smith -
Category
Design
-
view
111 -
download
1
description
Transcript of Rapid Templating with Serve
![Page 1: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/1.jpg)
Rapid Templating:“DESIGNING IN THE BROWSER”with Sass, Compass, and Serve
Nathan Smith — Principal UI Architect, projekt202
HTML5.tx — Austin, TX — February 2, 2013
![Page 2: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/2.jpg)
I do mobile/webUX + JavaScript at
http://projekt202.com
(me, on Twitter: @nathansmith)
![Page 3: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/3.jpg)
Relax, don’t stress out taking notes. You can get the slides here…
http://j.mp/get-serve
![Page 4: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/4.jpg)
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.)
![Page 5: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/5.jpg)
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…
![Page 6: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/6.jpg)
…but at least we had a reliable design workflow.
![Page 7: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/7.jpg)
Then this happened…
![Page 8: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/8.jpg)
![Page 9: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/9.jpg)
Which of course,now looks like this…
![Page 10: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/10.jpg)
![Page 11: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/11.jpg)
And, can dynamicallychange into this…
![Page 12: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/12.jpg)
![Page 13: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/13.jpg)
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.
![Page 14: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/14.jpg)
Ethan also wrote a book…
http://abookapart.com/products/responsive-web-design
![Page 15: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/15.jpg)
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
![Page 16: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/16.jpg)
Yes, those are (very loosely interpreted) the various stages of grief. Essentially, responsive design has both obliterated, and breathed new life into, our field.
![Page 17: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/17.jpg)
![Page 18: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/18.jpg)
Like accessibility, RWD works best with advanced planning…
#FAIL
![Page 19: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/19.jpg)
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
![Page 20: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/20.jpg)
We’ve had to rethink our vantage point.
![Page 21: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/21.jpg)
Venerable tools like Photoshop still have their place, but other (equally important) front-end tools have arisen as well…
![Page 22: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/22.jpg)
![Page 23: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/23.jpg)
![Page 24: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/24.jpg)
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browserNeatly organized *.sass
![Page 25: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/25.jpg)
CSS Sass Compasshttp://sonspring.com/journal/sass-for-designers
![Page 26: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/26.jpg)
Compass makes vendor prefixes easy...
![Page 27: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/27.jpg)
Compass brings sanity to gradients...
![Page 28: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/28.jpg)
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
![Page 29: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/29.jpg)
For the past two years or so, my preferred approach to rapid prototyping templates (with Sass & Compass) has been Serve…
http://get-serve.com
![Page 30: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/30.jpg)
![Page 31: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/31.jpg)
Continuing the analogy, Serve is like…
http://hdwallpapers.in/the_avengers-wallpapers.html
![Page 32: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/32.jpg)
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
![Page 33: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/33.jpg)
![Page 34: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/34.jpg)
![Page 35: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/35.jpg)
I think of wireframes and prototypes like this…
http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
![Page 36: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/36.jpg)
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.”
![Page 37: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/37.jpg)
This is the index.html.erb home page “view” file.
![Page 38: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/38.jpg)
_layout.html.erb points to application.html.erb
This file has one code snippet…
<%= render :template =>"/layouts/application" %>
![Page 39: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/39.jpg)
<%= yield %> outputs the view file (index, etc.)
![Page 40: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/40.jpg)
This file also renders the <head> partial.
![Page 41: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/41.jpg)
Which then renders the stylesheets partial.
![Page 42: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/42.jpg)
That has all sorts of interesting goodies.
![Page 43: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/43.jpg)
Next up, let’s look at theSass variables partial…
![Page 44: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/44.jpg)
![Page 45: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/45.jpg)
Which is imported bythe base grid file…
Okay, cool.
![Page 46: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/46.jpg)
![Page 47: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/47.jpg)
Which is imported bythe responsive partial…
Eh? Another @import?
![Page 48: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/48.jpg)
![Page 49: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/49.jpg)
Which is finally importedby application.sass…
Seriously, what the?
![Page 50: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/50.jpg)
![Page 51: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/51.jpg)
Bear with me. There’s a pointto all of this. We’ll get to it.
Dude, there’d better be.
![Page 52: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/52.jpg)
![Page 53: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/53.jpg)
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!
![Page 54: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/54.jpg)
![Page 55: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/55.jpg)
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! :)
![Page 56: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/56.jpg)
← The astute observers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS files.
Oh, you saw that? Well…
![Page 57: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/57.jpg)
Most of those files aren’t used directly, but…
![Page 58: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/58.jpg)
…exist to show grid CSS, apart from the site.
![Page 59: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/59.jpg)
Those are also the flat CSS files on GitHub.
![Page 60: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/60.jpg)
This is why grid code is in separate partials…
![Page 61: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/61.jpg)
Hat tip to Nicolas Gallagher for the idea!
![Page 62: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/62.jpg)
Yep. I can identify with that! :)
![Page 63: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/63.jpg)
Maybe I (don’t) know whatI’m doing. Here’s an idea…
![Page 64: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/64.jpg)
Simple view helper function, named “html”
![Page 65: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/65.jpg)
Variable set in… /views/partials/_vars.html.erb
![Page 66: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/66.jpg)
Then, we do/don't end links with *.html
![Page 67: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/67.jpg)
Further evidence that I (probably don't) know what I'm doing…
![Page 68: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/68.jpg)
A voodoo-magic Z shell (or Bash) recipe…
![Page 69: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/69.jpg)
I hate repetitive typing, so I’ve aliased the export command — which also recursively creates a *.zip file — to…
unsemantic_site_html
![Page 70: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/70.jpg)
Being lazy, FTW… Computer, do my bidding!
![Page 71: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/71.jpg)
That builds all the flat files, and a *.zip of it all…
![Page 72: Rapid Templating with Serve](https://reader033.fdocuments.in/reader033/viewer/2022042623/54c783114a7959f6208b464c/html5/thumbnails/72.jpg)
DEMO TIME! :)
Also, don’t forget you can download the slides here…
http://j.mp/get-serve