Download to read offline
Uploaded byNathan Smith
Rapid Templating with Serve
This document summarizes a presentation about using Sass, Compass, and Serve for rapid templating and designing in the browser. It discusses how responsive design has changed workflows, and tools like Sass, Compass, and Serve allow collaborative work between designers and developers. Serve is presented as a tool that allows building prototypes that resemble the final product through templating with Sass and Compass in a Rails-like MVC structure, without the overhead of a full Rails app.
More Related Content
Similar to Rapid Templating with Serve
Rapid Templating with Serve
- 1. Rapid Templating: “DESIGNING INTHE 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 stressout taking notes. You can get the slides here… http://j.mp/get-serve
- 4. It used tobe, 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 tosay 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 leastwe had a reliable design workflow.
- 7.
- 9. Which of course, nowlooks like this…
- 11. And, can dynamically change into this…
- 13. The term “ResponsiveWeb 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 wrotea book… http://abookapart.com/products/responsive-web-design
- 15. Upon hearing aboutthis 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, RWDworks best with advanced planning… #FAIL
- 19. Designers “throwing itover 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 torethink our vantage point.
- 21. Venerable tools likePhotoshop 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 vendorprefixes easy...
- 27. Compass brings sanityto gradients...
- 28. Text editors andIDE’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 pasttwo 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’tshow 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 ofwireframes and prototypes like this… http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
- 36. Ultimately, what we’reaiming 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 theindex.html.erb home page “view” file.
- 38. _layout.html.erb points toapplication.html.erb This file has one code snippet… <%= render :template => "/layouts/application" %>
- 39. <%= yield %>outputs the view file (index, etc.)
- 40. This file alsorenders the <head> partial.
- 41. Which then rendersthe stylesheets partial.
- 42. That has allsorts of interesting goodies.
- 43. Next up, let’slook at the Sass variables partial…
- 45. Which is importedby the base grid file… Okay, cool.
- 47. Which is importedby the responsive partial… Eh? Another @import?
- 49. Which is finallyimported 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 allof 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 beautyof 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 astuteobservers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS files. Oh, you saw that? Well…
- 57. Most of thosefiles aren’t used directly, but…
- 58. …exist to showgrid CSS, apart from the site.
- 59. Those are alsothe flat CSS files on GitHub.
- 60. This is whygrid code is in separate partials…
- 61. Hat tip toNicolas Gallagher for the idea!
- 62. Yep. I canidentify with that! :)
- 63. Maybe I (don’t)know what I’m doing. Here’s an idea…
- 64. Simple view helperfunction, named “html”
- 65. Variable set in…/views/partials/_vars.html.erb
- 66. Then, we do/don'tend links with *.html
- 67. Further evidence thatI (probably don't) know what I'm doing…
- 68. A voodoo-magic Zshell (or Bash) recipe…
- 69. I hate repetitivetyping, 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 allthe 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