$30 off During Our Annual Pro Sale. View Details »

Rapid Templating with Serve

Nathan Smith
February 02, 2013

Rapid Templating with Serve

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

Video here…


Nathan Smith

February 02, 2013

More Decks by Nathan Smith

Other Decks in Design


  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 http://projekt202.com (me, on

    Twitter: @nathansmith)
  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. 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…
  6. …but at least we had a reliable design workflow.

  7. Then this happened…

  8. None
  9. Which of course, now looks like this…

  10. None
  11. And, can dynamically change into this…

  12. None
  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.
  17. None
  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…
  22. None
  23. None
  24. http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli CSS served to browser Neatly organized *.sass

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

  26. Compass makes vendor prefixes easy...

  27. Compass brings sanity to gradients...

  28. 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
  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
  30. None
  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
  33. None
  34. None
  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…

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

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

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

  50. None
  51. Bear with me. There’s a point to all of this.

    We’ll get to it. Dude, there’d better be.
  52. None
  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!
  54. None
  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