Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Rapid Templating with Serve
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
(me, on Twitter: @nathansmith)
http://projekt202.com
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. 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;
}
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.
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
21. Venerable tools like Photoshop
still have their place, but other
(equally important) front-end
tools have arisen as well…
22.
23.
24. Neatly organized *.sass CSS served to browser
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
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.
34.
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" %>
49. Which is finally imported
by application.sass…
Seriously, what the?
50.
51. Bear with me. There’s a point
to all of this. We’ll get to it.
Dude, there’d better be.
52.
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.
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…