rapid templating with serve

Download Rapid Templating with Serve

Post on 27-Jan-2015




1 download

Embed Size (px)


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


  • 1. Rapid Templating:DESIGNING IN THE BROWSERwith Sass, Compass, and ServeNathan Smith Principal UI Architect, projekt202 HTML5.tx Austin, TX February 2, 2013

2. I do mobile/webUX + JavaScript at (me, on Twitter: @nathansmith)http://projekt202.com 3. Relax, dont stress outtaking notes. You canget the slides herehttp://j.mp/get-serve 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. Which isnt to say we werent using CSShtml body * div#id tabletbody tr td a.special span {/*Dear next developer:Please forgive me!*/color: red !important;} 6. but at least we had a reliable design workow. 7. Then this happened 8. Which of course,now looks like this 9. And, can dynamically change into this 10. The term Responsive Web Designwas coined by Ethan Marcotte, in anan article published by A List Apart.Loosely dened, it means adaptingto various screen sizes, using a uidgrid and @media queries in CSS. 11. Ethan also wrote a bookhttp://abookapart.com/products/responsive-web-design 12. Upon hearing about thisnew design technique, I1. Felt shock and denial: Whoa, no way!2. Felt guilty for making a xed-width grid.3. Bargained: Maybe itll 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. Yes, those are (very looselyinterpreted) the variousstages of grief. Essentially,responsive design has bothobliterated, and breathednew life into, our eld. 14. Like accessibility, RWD works best with advanced planning#FAIL 15. Designers throwing it overthe wall to developers is nolonger an ideal workow.Nowadays, all of the cool kidsare working collaboratively. http://ickr.com/photos/camknows/8374910613 16. Weve had to rethink our vantage point. 17. Venerable tools like Photoshopstill have their place, but other(equally important) front-endtools have arisen as well 18. Neatly organized *.sassCSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli 19. CSSSass Compasshttp://sonspring.com/journal/sass-for-designers 20. Compass makes vendor prexes easy... 21. Compass brings sanity to gradients... 22. Text editors and IDEs that support Sass/SCSS syntax AptanaBBEdit ChocolatCoda http://aptana.orghttp://barebones.com/bbedit http://chocolatapp.comhttp://panic.com/coda E Text EditorEclipse EmacsEspressohttp://e-texteditor.com http://eclipse.org http://gnu.org/software/emacshttp://macrabbit.com/espresso GEdit KomodoNetbeans PhpStormhttp://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm PyCharmRubyMine SubEthaEditSublime Text^ http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedithttp://sublimetext.com/dev TextMateVim Visual Studio nd http://macromates.comhttp://vim.org http://microsoft.com/visualstudio We recommehttp://sass-lang.com/editors.html 23. For the past two years or so, my preferredapproach to rapid prototyping templates(with Sass & Compass) has been Servehttp://get-serve.com 24. Continuing the analogy, Serve is likehttp://hdwallpapers.in/the_avengers-wallpapers.html 25. Since I cant show you NDAd client stu Ive made using Serve, we are going to look at one of my personal projects. http://unsemantic.com 26. I think of wireframes and prototypes like this http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project 27. Ultimately, what were aiming to launch isnot a PSD le or PDF wireframe. Nor is itthe at HTML, CSS, and JavaScript thatcomprise a dynamic prototype.Everything except the nal product existsjust to facilitate the launch. Its cha thatburns up, once the real thing takes ight.To that end, Serve is like the V of Ruby onRails MVC. It is similar to the real thing. 28. This is the index.html.erb home page view le. 29. _layout.html.erb points to application.html.erb This le has one code snippet "/layouts/application" %> 30. outputs the view le (index, etc.) 31. This le also renders the partial. 32. Which then renders the stylesheets partial. 33. That has all sorts of interesting goodies. 34. Next up, lets look at theSass variables partial 35. Which is imported by the base grid leOkay, cool. 36. Which is imported bythe responsive partialEh? Another @import? 37. Which is nally imported by application.sass Seriously, what the? 38. Bear with me. Theres a point to all of this. Well get to it.Dude, thered better be. 39. So, after all of that, we endup with a tightly compiled,single application.css le.Eh? What about all the@import statements? HTTPrequests, fool. Cmon man! 40. Thats the beauty of Sass. If you@import a *.sass (or *.scss)le, it becomes part of thesingle, compiled *.css le.Rage subsiding? Okay, good.Still, why all the @import daisychaining? Glad you asked! :) 41. The astute observersamongst you perhapshave noticed what lookslike a big compost heapof compiled CSS les.Oh, you saw that? Well 42. Most of those les arent used directly, but 43. exist to show grid CSS, apart from the site. 44. Those are also the at CSS les on GitHub. 45. This is why grid code is in separate partials 46. Hat tip to Nicolas Gallagher for the idea! 47. Yep. I can identify with that! :) 48. Maybe I (dont) know whatIm doing. Heres an idea 49. Simple view helper function, named html 50. Variable set in /views/partials/_vars.html.erb 51. Then, we do/dont end links with *.html 52. Further evidence that I (probablydont) know what Im doing 53. A voodoo-magic Z shell (or Bash) recipe 54. I hate repetitive typing, so Ive aliasedthe export command which alsorecursively creates a *.zip le tounsemantic_site_html 55. Being lazy, FTW Computer, do my bidding! 56. That builds all the at les, and a *.zip of it all 57. DEMO TIME! :)Also, dont forget you candownload the slides herehttp://j.mp/get-serve