0
Rapid Templating:“DESIGNING IN THE BROWSER”with Sass, Compass, and Serve  Nathan Smith — Principal UI Architect, projekt20...
I do mobile/webUX + JavaScript at (me, on Twitter: @nathansmith)          http://projekt202.com
Relax, don’t stress outtaking notes. You canget the slides here…http://j.mp/get-serve
It used to be, that you could makea picture of a website, chop it up,put it back together with code,and with a little luck...
Which isn’t to say we weren’t using CSS…  html body * div#id table  tbody tr td a.special span {    /*      Dear next deve...
…but at least we had a reliable design workflow.
Then this happened…
Which of course,now looks like this…
And, can dynamically change into this…
The term “Responsive Web Design”was coined by Ethan Marcotte, in anan article published by A List Apart.Loosely defined, it...
Ethan also wrote a book…  http://abookapart.com/products/responsive-web-design
Upon hearing about thisnew design technique, I…1. Felt shock and denial: “Whoa, no way!”2. Felt guilty for making a fixed-w...
Yes, those are (very looselyinterpreted) the variousstages of grief. Essentially,responsive design has bothobliterated, an...
Like accessibility, RWD works best with advanced planning…#FAIL
Designers “throwing it overthe wall” to developers is nolonger an ideal workflow.Nowadays, all of the cool kidsare working ...
We’ve had to rethink our vantage point.
Venerable tools like Photoshopstill have their place, but other(equally important) front-endtools have arisen as well…
Neatly organized *.sass                                      CSS served to browser http://thingsorganizedneatly.tumblr.com...
CSS                    Sass                             Compass      http://sonspring.com/journal/sass-for-designers
Compass makes vendor prefixes easy...
Compass brings sanity to gradients...
Text editors and IDE’s that support Sass/SCSS syntax         Aptana                              BBEdit                   ...
For the past two years or so, my preferredapproach to rapid prototyping templates(with Sass & Compass) has been Serve…http...
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.   h...
I think of wireframes and prototypes like this…           http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
Ultimately, what we’re aiming to launch isnot a PSD file or PDF wireframe. Nor is itthe flat HTML, CSS, and JavaScript thatc...
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 :tem...
<%= 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 by the base grid file…    Okay, cool.
Which is imported bythe responsive partial…Eh? Another @import?
Which is finally imported by application.sass… Seriously, what the?
Bear with me. There’s a point to all of this. We’ll get to it.  Dude, there’d better be.
So, after all of that, we endup with a tightly compiled,single application.css file.Eh? What about all the@import statement...
That’s the beauty of Sass. If you@import a *.sass (or *.scss)file, it becomes part of thesingle, compiled *.css file.Rage su...
← The astute observers  amongst you perhaps  have noticed what looks  like a big compost heap  of compiled CSS files.  Oh, ...
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/dont end links with *.html
Further evidence that I (probably  dont) know what Im doing…
A voodoo-magic Z shell (or Bash) recipe…
I hate repetitive typing, so I’ve aliasedthe export command — which alsorecursively creates a *.zip file — to…unsemantic_si...
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 candownload the slides here…  http://j.mp/get-serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Rapid Templating with Serve
Upcoming SlideShare
Loading in...5
×

Rapid Templating with Serve

1,459

Published on

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

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,459
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Rapid Templating with Serve"

  1. 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. 2. I do mobile/webUX + JavaScript at (me, on Twitter: @nathansmith) http://projekt202.com
  3. 3. Relax, don’t stress outtaking notes. You canget the slides here…http://j.mp/get-serve
  4. 4. It used to be, that you could makea picture of a website, chop it up,put it back together with code,and with a little luck, maybe eventurn it into a real website!(Confession: I miss those days.)
  5. 5. Which isn’t to say 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. 6. …but at least we had a reliable design workflow.
  7. 7. Then this happened…
  8. 8. Which of course,now looks like this…
  9. 9. And, can dynamically change into this…
  10. 10. The term “Responsive Web Design”was coined by Ethan Marcotte, in anan article published by A List Apart.Loosely defined, it means adaptingto various screen sizes, using a fluidgrid and @media queries in CSS.
  11. 11. Ethan also wrote a book… http://abookapart.com/products/responsive-web-design
  12. 12. Upon hearing about thisnew 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
  13. 13. Yes, those are (very looselyinterpreted) the variousstages of grief. Essentially,responsive design has bothobliterated, and breathednew life into, our field.
  14. 14. Like accessibility, RWD works best with advanced planning…#FAIL
  15. 15. Designers “throwing it overthe wall” to developers is nolonger an ideal workflow.Nowadays, all of the cool kidsare working collaboratively. http://flickr.com/photos/camknows/8374910613
  16. 16. We’ve had to rethink our vantage point.
  17. 17. Venerable tools like Photoshopstill have their place, but other(equally important) front-endtools have arisen as well…
  18. 18. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  19. 19. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  20. 20. Compass makes vendor prefixes easy...
  21. 21. Compass brings sanity to gradients...
  22. 22. Text editors and IDE’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 PhpStormhttp://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
  23. 23. For the past two years or so, my preferredapproach to rapid prototyping templates(with Sass & Compass) has been Serve…http://get-serve.com
  24. 24. Continuing the analogy, Serve is like… http://hdwallpapers.in/the_avengers-wallpapers.html
  25. 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
  26. 26. I think of wireframes and prototypes like this… http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
  27. 27. Ultimately, what we’re aiming to launch isnot a PSD file or PDF wireframe. Nor is itthe flat HTML, CSS, and JavaScript thatcomprise a dynamic prototype.Everything except the final product existsjust to facilitate the launch. It’s chaff thatburns up, once the real thing takes flight.To that end, Serve is like the V of Ruby onRails’ MVC. It is similar to the “real thing.”
  28. 28. This is the index.html.erb home page “view” file.
  29. 29. _layout.html.erb points to application.html.erb This file has one code snippet… <%= render :template => "/layouts/application" %>
  30. 30. <%= yield %> outputs the view file (index, etc.)
  31. 31. This file also renders the <head> partial.
  32. 32. Which then renders the stylesheets partial.
  33. 33. That has all sorts of interesting goodies.
  34. 34. Next up, let’s look at theSass variables partial…
  35. 35. Which is imported by the base grid file… Okay, cool.
  36. 36. Which is imported bythe responsive partial…Eh? Another @import?
  37. 37. Which is finally imported by application.sass… Seriously, what the?
  38. 38. Bear with me. There’s a point to all of this. We’ll get to it. Dude, there’d better be.
  39. 39. So, after all of that, we endup with a tightly compiled,single application.css file.Eh? What about all the@import statements? HTTPrequests, fool. C’mon man!
  40. 40. That’s the beauty of Sass. If you@import a *.sass (or *.scss)file, it becomes part of thesingle, compiled *.css file.Rage subsiding? Okay, good.Still, why all the @import daisychaining? Glad you asked! :)
  41. 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…
  42. 42. Most of those files aren’t used directly, but…
  43. 43. …exist to show grid CSS, apart from the site.
  44. 44. Those are also the flat CSS files on GitHub.
  45. 45. This is why grid code is in separate partials…
  46. 46. Hat tip to Nicolas Gallagher for the idea!
  47. 47. Yep. I can identify with that! :)
  48. 48. Maybe I (don’t) know whatI’m doing. Here’s an idea…
  49. 49. Simple view helper function, named “html”
  50. 50. Variable set in… /views/partials/_vars.html.erb
  51. 51. Then, we do/dont end links with *.html
  52. 52. Further evidence that I (probably dont) know what Im doing…
  53. 53. A voodoo-magic Z shell (or Bash) recipe…
  54. 54. I hate repetitive typing, so I’ve aliasedthe export command — which alsorecursively creates a *.zip file — to…unsemantic_site_html
  55. 55. Being lazy, FTW… Computer, do my bidding!
  56. 56. That builds all the flat files, and a *.zip of it all…
  57. 57. DEMO TIME! :)Also, don’t forget you candownload the slides here… http://j.mp/get-serve
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×