Rapid Templating with Serve

Slide 1

Slide 1 text

Rapid Templating: “DESIGNING IN THE BROWSER” with Sass, Compass, and Serve Nathan Smith — Principal UI Architect, projekt202 HTML5.tx — Austin, TX — February 2, 2013

Slide 2

Slide 2 text

I do mobile/web UX + JavaScript at http://projekt202.com (me, on Twitter: @nathansmith)

Slide 3

Slide 3 text

Relax, don’t stress out taking notes. You can get the slides here… http://j.mp/get-serve

Slide 4

Slide 4 text

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.)

Slide 5

Slide 5 text

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…

Slide 6

Slide 6 text

…but at least we had a reliable design workﬂow.

Slide 7

Slide 7 text

Then this happened…

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Which of course, now looks like this…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

And, can dynamically change into this…

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

The term “Responsive Web Design” was coined by Ethan Marcotte, in an an article published by A List Apart. Loosely deﬁned, it means adapting to various screen sizes, using a ﬂuid grid and @media queries in CSS.

Slide 14

Slide 14 text

Ethan also wrote a book… http://abookapart.com/products/responsive-web-design

Slide 15

Slide 15 text

Upon hearing about this new design technique, I… 1. Felt shock and denial: “Whoa, no way!” 2. Felt guilty for making a ﬁxed-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

Slide 16

Slide 16 text

Yes, those are (very loosely interpreted) the various stages of grief. Essentially, responsive design has both obliterated, and breathed new life into, our ﬁeld.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Like accessibility, RWD works best with advanced planning… #FAIL

Slide 19

Slide 19 text

Designers “throwing it over the wall” to developers is no longer an ideal workﬂow. Nowadays, all of the cool kids are working collaboratively. http://ﬂickr.com/photos/camknows/8374910613

Slide 20

Slide 20 text

We’ve had to rethink our vantage point.

Slide 21

Slide 21 text

Venerable tools like Photoshop still have their place, but other (equally important) front-end tools have arisen as well…

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli CSS served to browser Neatly organized *.sass

Slide 25

Slide 25 text

CSS Sass Compass http://sonspring.com/journal/sass-for-designers

Slide 26

Slide 26 text

Compass makes vendor preﬁxes easy...

Slide 27

Slide 27 text

Compass brings sanity to gradients...

Slide 28

Slide 28 text

http://sass-lang.com/editors.html Text editors and IDE’s that support Sass/SCSS syntax Aptana http://aptana.org BBEdit http://barebones.com/bbedit Chocolat http://chocolatapp.com Coda http://panic.com/coda E Text Editor http://e-texteditor.com Eclipse http://eclipse.org Emacs http://gnu.org/software/emacs Espresso http://macrabbit.com/espresso GEdit http://projects.gnome.org/gedit Komodo http://activestate.com/komodo-ide Netbeans http://netbeans.org PhpStorm http://jetbrains.com/phpstorm PyCharm http://jetbrains.com/pycharm RubyMine http://jetbrains.com/ruby SubEthaEdit http://codingmonkeys.de/subethaedit Sublime Text http://sublimetext.com/dev TextMate http://macromates.com Vim http://vim.org Visual Studio http://microsoft.com/visualstudio ^ We recommend

Slide 29

Slide 29 text

For the past two years or so, my preferred approach to rapid prototyping templates (with Sass & Compass) has been Serve… http://get-serve.com

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Continuing the analogy, Serve is like… http://hdwallpapers.in/the_avengers-wallpapers.html

Slide 32

Slide 32 text

Since I can’t show you NDA’d client stuﬀ I’ve made using Serve, we are going to look at one of my personal projects. http://unsemantic.com

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

I think of wireframes and prototypes like this… http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project

Slide 36

Slide 36 text

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.”

Slide 37

Slide 37 text

This is the index.html.erb home page “view” ﬁle.

Slide 38

Slide 38 text

_layout.html.erb points to application.html.erb This ﬁle has one code snippet… <%= render :template => "/layouts/application" %>

Slide 39

Slide 39 text

<%= yield %> outputs the view ﬁle (index, etc.)

Slide 40

Slide 40 text

This ﬁle also renders the partial.

Slide 41

Slide 41 text

Which then renders the stylesheets partial.

Slide 42

Slide 42 text

That has all sorts of interesting goodies.

Slide 43

Slide 43 text

Next up, let’s look at the Sass variables partial…

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Which is imported by the base grid ﬁle… Okay, cool.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Which is imported by the responsive partial… Eh? Another @import?

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Which is ﬁnally imported by application.sass… Seriously, what the?

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Bear with me. There’s a point to all of this. We’ll get to it. Dude, there’d better be.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

So, after all of that, we end up with a tightly compiled, single application.css ﬁle. Eh? What about all the @import statements? HTTP requests, fool. C’mon man!

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

That’s the beauty of Sass. If you @import a *.sass (or *.scss) ﬁle, it becomes part of the single, compiled *.css ﬁle. Rage subsiding? Okay, good. Still, why all the @import daisy chaining? Glad you asked! :)

Slide 56

Slide 56 text

← The astute observers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS ﬁles. Oh, you saw that? Well…

Slide 57

Slide 57 text

Most of those ﬁles aren’t used directly, but…

Slide 58

Slide 58 text

…exist to show grid CSS, apart from the site.

Slide 59

Slide 59 text

Those are also the ﬂat CSS ﬁles on GitHub.

Slide 60

Slide 60 text

This is why grid code is in separate partials…

Slide 61

Slide 61 text

Hat tip to Nicolas Gallagher for the idea!

Slide 62

Slide 62 text

Yep. I can identify with that! :)

Slide 63

Slide 63 text

Maybe I (don’t) know what I’m doing. Here’s an idea…

Slide 64

Slide 64 text

Simple view helper function, named “html”

Slide 65

Slide 65 text

Variable set in… /views/partials/_vars.html.erb

Slide 66

Slide 66 text

Then, we do/don't end links with *.html

Slide 67

Slide 67 text

Further evidence that I (probably don't) know what I'm doing…

Slide 68

Slide 68 text

A voodoo-magic Z shell (or Bash) recipe…

Slide 69

Slide 69 text

I hate repetitive typing, so I’ve aliased the export command — which also recursively creates a *.zip ﬁle — to… unsemantic_site_html

Slide 70

Slide 70 text

Being lazy, FTW… Computer, do my bidding!

Slide 71

Slide 71 text

That builds all the ﬂat ﬁles, and a *.zip of it all…

Slide 72

Slide 72 text

DEMO TIME! :) Also, don’t forget you can download the slides here… http://j.mp/get-serve