Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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…

http://j.mp/rapid-templating

Nathan Smith

February 02, 2013
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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…

    View full-size slide

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

    View full-size slide

  7. Then this happened…

    View full-size slide

  8. Which of course,
    now looks like this…

    View full-size slide

  9. And, can dynamically
    change into this…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Compass makes vendor prefixes easy...

    View full-size slide

  21. Compass brings sanity to gradients...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. This file also renders the partial.

    View full-size slide

  32. Which then renders the stylesheets partial.

    View full-size slide

  33. That has all sorts of interesting goodies.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Hat tip to Nicolas Gallagher for the idea!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Simple view helper function, named “html”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide