Rapid Templating: “DESIGNING IN THE BROWSER” with Sass, Compass, and Serve Nathan Smith — Principal UI Architect, projekt202 HTML5.tx — Austin, TX — February 2, 2013
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.)
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…
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.
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
Yes, those are (very loosely interpreted) the various stages of grief. Essentially, responsive design has both obliterated, and breathed new life into, our field.
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
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.”
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!
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! :)
nathansmith
xinyao
lovchikov
akinen
uxevents
ashapiro
cyberagentdevelopers
uxaustralia
shingo2000
j5ik2o
hirokazu_oda
studiodetails
robhawkes
andyhume
skipperchong
phodgson
eileencodes
tammielis
lara
frogandcode
wjessup
mza
erikaheidi
kneath