Rapid Templating: "Designing in the Browser" with Sass, Compass, and Serve
summary
Claims a browser-first workflow using Sass, Compass and the Ruby tool serve to prototype and export real templates rather than PSDs. Shows a working CSS grid called unsymmetric.com, with Sass variables and placeholders, media-query partials (mobile <767px / desktop ≥767px), RTL via variable swaps, and IE7/8 fixed-width fallback. Demonstrates live local serving, a one-command flat-HTML export and a GitHub repo; the pipeline successfully produces previewable, minified, concatenated HTML/CSS artifacts.
AI-written summary · about
chapters (11)
- 0:00Start
- 2:08but at least we had a reliable design workflow.
- 5:21We've had to rethink our vantage point.
- 7:15Compass makes vendor prefixes easy...
- 7:50Compass brings sanity to gradients...
- 10:36I think of wireframes and prototypes like this...
- 11:41This is the index.html.erb home page "view" file.
- 12:01outputs the view file [index, etc.]
- 15:59Those are also the flat CSS files on GitHub.
- 17:09Hat tip to Nicolas Gallagher for the idea!
- 17:33Simple view helper function, named "html"
related talks
29mEffective user interface design with HTML prototyping
42mKeeping Your HTML Semantic with SASS
43mResponsive Design: now 90% easier with SASS!
21mStyling your CSS with Reason
33mDynamically Sassy
51mModern CSS Development: Tooling & Workflows
50mEffortless Style
20mSweating the Small Stuff: Recreating Subtle Design Details Using Sass