Sass Conf 2013 Roundup

October 20th, 2013

Last weekend I went to the first Sass Conf in NYC and it was amazing! I met a bunch of great people and was engrossed in a shit-ton of great resources and initiated a couple of potential side projects. The part I loved most about this conference was the fact that everyone was talking to everyone, it felt really personal (I think due to the size and that it was the first of it's kind).

I've had a bit of a fettish for living style guides lately and have been producing one for a client at Myplanet for a while now so I've done tons of research on them. So it was great to see so many people talking about the topic. They really do encourage you to maintain and modularise code better while giving you an overview of the components that make up a site/app/project.

I created a list of style guides that I've collected over the last few months or so. Feel free to add any others to the comments.

These are my notes from the conference, some are what was covered in the presentation and some are my personal notes/observations. As a result some of these notes are possibly incomplete, incorrect or even incoherent but if available, links to slides are there.

Takana

These guys never got to officially announce their product but they definitely deserve a LOT of attention. There are tools that do similar things to this (Emmet LiveStyle and livereload) but I'm yet to see one that does it as well as Takana. This updates the browser as you type CSS or Sass! No need to save. I know that sounds minor but it isn't. Get it!

Cheap Sass Tricks

John W. Long – UX Designer at Uservoice @johnwlong | Github | http://wiseheartdesign.com/ | Dribbble

John gave us exactly the crazy Sass demos and collection of Sass tricks to help us sell people who've been reluctant to embrace Sass that the line up promised.

Announcements

  • CSS spinners "CSS spinners and throbbers made with CSS and minimal HTML markup"

Summary

Sass Pros

  • Project organisation
  • Mixins
  • Build your own framework
  • Community

Wish list

  • sass.js
  • keyframe animation for compass
  • Better docs and more posts, articles and books

Demos/Links

Sass at GitHub

Ben Bleikamp – Designer at Github @bleikamp | Github | http://bleikamp.com/ | Dribbble

Ben's talk was more about CSS performance and how Github monitor and measure it than using Sass itself but pretty good nevertheless. Would love to know more about Primer.

Summary

  • Their stack: Rails 2.3, Sinatra, HTML ERB + View Models, Coffeescript, Sass (SCSS)
  • 75 people touching stylesheets
  • Staff have autonomy to fix anything if they see a mistake
  • Use of dashboards for CSS performance and browser response times
  • Team mentions in Github issues (I didn't know about this. Sounds really cool!) /cc @github/css
  • Anyone can join a team they care about
  • Ben leans on Jon Rohan for CSS performance knowledge
  • Github Styleguide and Github Mobile Styleguide use KSS to automatically generate the styleguide. (See my note at the top of this post about alternatves
  • Primer is used for shared styles (node module using bower for components but no mention of this being available to public)
  • Graphite used for performance graphs
  • CSS Explain used to learn about CSS performance

Presentation

It Takes a Village to Raise a Website

Chris Eppstein – Engineer at Linkedin @chriseppstein | http://chriseppstein.github.io/

This presentation was fantastic, I loved it! It touched on a few things of particular interst to me (style guides and plugin repo/registry) and the whole thing was really inspiring, a call to arms for web development. Thanks Chris!

Announcements

  • Sass 3.3 gem install sass --pre

    • Sourcemaps
    • Maps
    • & in SassScript
    • @at-root
    • String Functions
    • Meta Functions
    • Variable Keyword Arguments
    • Watcher Rewrite
    • if() works
    • Trailing Commands in Lists
    • set-nth(), nth(-1)
    • Una Kravets and Jason Garber have good writeups on some of the new features

  • Compass 0.13 gem install compass --pre

    • New CSS3 Modules: Animaiton, Transitions, Placeholder
    • Now uses caniuse.com data (you can set browser version thresholds)
    • Removed grid frameworks

Summary

  • CSS preprocessing has won
  • Sass then and now
  • People have misinterpretations about Sass due to syntax
  • Sass is now sponsored by LinkedIn, Google and Moovweb

The future

  • Better documentation and styleguides (looking for a project leader)
  • Unit testing with compass plugin true by Eric Meyer
  • Sass/Compass plugin repo/registry (looking for a project leader - John Long is starting this and I've offered to help out)
  • Linter (looking for a project leader)
  • Non-ruby install
  • Speed enhancements LibSass
  • Sass in the browser (native)

Demos/Links

Sass: Bridging the Designer/Developer Gap

Bermon Painter – UX Designer, Front-End Developer, Web Analytics Professional @bermonpainter | Github | http://bermonpainter.com/ | Dribbble

Bermon and I clearly share very similar views on process and documentation when designing – designers should work closely/along side developers and create as little documentation as possible, opting to build out quick prototypes instead. After all, it's much easier to get an idea of how something works when you can actually interact with it as opposed to imagining it. His presentation covered the process he uses.

Summary

Clean out your Sass Junk-Drawer

Dale Sande – UI Developer at Codefellows, Seattle @anotheruiguy | Github | http://www.dalesande.com/

Dale gave us a great overview of file structures that encourage modularisation of our code.

Summary

  • Increased complexity of large CSS files table-less designs and CSS3
  • Sass Partials folder is the junk drawer
  • No nesting at all as a potential approach (endorsed by 37 signals)
  • Never go more than 3 levels deep (inception) - I find over-nesting to be most people's objection to using Sass which is pretty ridiculous as that is a symptom of improper use, not an issue related to Sass specifically
  • Encourages working from the "inside-out" instead of "outside-in" (Decompose the UI)

File structures

  • elements, modules, layouts and config.scss, style.scss + manifest for each directory
  • style.scss - partials and the manifest
  • _config.scss - broad variables (no css)
  • Importing brings the CSS with it (can cause duplication)
  • Foundation UI - no logic
_buttons.scss // import files from buttons directory then use css code
	buttons/
		_mixins.scss - functional
		_extend.scss - functional
  • Reuseable
  • UI patterns - gray area/personal interpretation
  • Modules
modules
	module-xxx
		_extends.scss
		_mixins.scss
		_functions.scss
		_module_module-xxx.scss
		_module_module-xxx-submodule.scss
  • Placeholders for all modules can be useful for reuse
  • Layout consists of modules fitting into different "holes" within a grid
  • Import modules
.class {
	@extend module
	// other properties
}
  • System used in enterprise

Demos/Links

Show Your Work & Share Your Toys

Eric Meyer – Designer and Developer at Oddbird @eriiicam | Github | http://eric.andmeyer.com/ | Dribbble

The thing I enjoyed most about Eric's presentation and speaking with him afterwards was his humility and his "anyone-can-build-this-stuff" attitude to all of this, especially given his contibution to the Sass/Web dev community.

Announcements

  • Susy 2 (almost ;)

Summary

  • All the things you don't need to show your work (followers, experience, ruby skills or plans)
  • Grid systems that are only possible with Sass (Susy)
  • Natalie Downe's CSS Systems presentation as inspiration for Susy (maybe)
  • target/context = multiplier
  • Do a side project to have people teach you (by way of contributions from the community)
  • Compass plugin template (just replace the code from an existing plugin with your code)

Demos/Links

The Front End Revolution: A Call to Arms

Hampton Catlin – CTO at Moovweb @hcatlin | Github | http://www.hamptoncatlin.com/

Announcements

  • Tritium - text/code manipulation (i.e. change all table tags to divs with .table class)

Summary

  • Made the iPhone dictionary and wikipedia apps
  • HAML created by Hampton and was the pre-cursor to Sass
  • Sass built to create actual change for CSS3. Could/Should actually be the next version of CSS
  • LibSass
  • node-sass provides binding for Node.js to libsass
  • Lots of enterprise level companies using Sass/libSass
  • Separate/emphasise differences between web development from interface development (interface/experience, web, backend layers)

Sweating the Small Stuff: Recreating Subtle Design Details Using Sass

Tim Hettler – Senior Open Standards Developer at R/GA @timhettler | Github | http://www.timhettler.com/ | Dribbble

I loved Tim's presentation, it spoke to something I'm really interested in working on myself, getting web designers more comfortable with or at the very least understanding the medium they work for so they can perhaps make it the medium they work in. He got about a couple of minutes into his presentation when I had a great idea – why not create a set of mixins that reflect the layer styles settings heavily used in creating UIs in Photoshop?! That "flash of genius" was of course followed by Tim showing us exactly that. This is something that you just can NOT do without the ever-amazing, Sass!

Demos/Links

Programming? In MY CSS? or, How to program amazing CSS with Sass and Compass functions

Jackie Balzer – Lead Front End Developer, Behance @jackiebackwards | Github | http://jackiebalzer.com/

Jackie's presentation was way over my head but she managed to produce a pretty cool looking weather app in no time.

Realigning & Refactoring UI

Jina Bolton – Product Designer at Do @jina | Github | http://sushiandrobots.com/ | Dribbble

Another great presentation with a focus again on style guides (they are all the rage now, get on it!), Jina took us through the full process of refactoring existing code and creating a style guide.

Summary

// no output
@import "color";
@import "layout";
@import "typography";
  • Normalize over Compass Reset
  • * { box-sizing: border-box; } FTW! – Paul Irish
  • Modular components – icons, buttons, toggles, messages, etc.
  • Regions – banner, nav, content info, complementary sections
  • Helpers – placeholder-selectors, nonsemantic-classes, etc.
  • Responsive adjustments – (I personally prefer nested media queries to keep all the properties in one place)
  • Tools – debug show grid (for dev)
  • Change sass file extension to .rb to include ruby code (apparently not condoned by others but it works)
  • Style guides
  • Make a UI Library – oocss.org, Android style guide
  • Responsive iframe page (something I've been neaning to do for a while now)

Demos/Links

Take the Pain Out of Sass

Ian Carrico – Developer At Four Kitchens @iamcarrico | Github | http://iamcarrico.com/

Ian took us through the process of getting rbenv and bundler setup to manage ruby and gems along with grunt.js for automation. I already had most of this setup but it was good to see how to integrate bundler, been meaning to work that out for a while now.

Summary

Install rbenv

Run:

echo 'gem: --no-rdoc --no-ri' >> ~/.gemrc
brew install rbenv ruby-build
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
rbenv install 2.0.0-p247
rbenv rehash
rbenv global 2.0.0-p247

I use zsh as my shell instead of bash. You can view my setup here.

Put a file at the root of ALL your projects called .ruby-version and put this inside:

rbenv local 2.0.0-p247

Install Bundler

Run:

{sudo} gem install bundler
mkdir ~/.bundle
echo 'BUNDLE_PATH: vendor/bundle' >> ~/.bundle/config
bundle install
bundle exec compass compile

Demos/Links

Designing in the Browser, Live

Mason Wendell – Coding Designer at NBC Universal @codingdesigner | Github | http://thecodingdesigner.com/

This was probably the presentation I was most looking forward. I'm always looking for more tools and methods to improve the experience of designing for the web whilst avoiding spending unecessary time with tools producing throw-away pieces (wireframes and comps) and Mason delivered. I had seen most of the tools before but it was great to see his working process. He walked us through how he goes from a sketch straight to designing in the browser with a sample project and showed us the tools he uses to get the job done. Thanks Mason!

Summary

  • Process

    • Research and content strategy
    • Wireframe sketch
    • Markdown content outline (could just convert to HTML after this)
    • Wireframes (HTML)
    • Style tiles
    • Elements design (collect all elements into style guide)
    • Sass Components
    • Colours
    • Modular scale to establish grid and typographic ratios
  • All put together using the Yeoman Generator for Style Prototypes that Mason and @snugug have been working on.

Demos/links