Responsive Web Design with Sass (aka The Right and Only Way to do Responsive)

"Responsive Web Design is hard. Really hard, actually." The opening words to Jeff Croft's insightful post (http://jeffcroft.com/blog/2012/mar/02/implementing-responsive-design/) about his development approach with Sass. Yes, responsive is challenging. It is changing the way we think about design; the way we architect our CSS, as we move to from thinking in 960px to thinking about mobile first and designs that will look good at any size; it is changing our perception, workflow, attitude, and swagger. Not since the birth of Web Standards has the web development community received such a resounding shake up. The explosion of CSS Preprocessors couldn't have come at more needed time. We need all the help we can get!

In the words of John Albin (http://john.albin.net/), Front-End Developer extraordinaire and creator of Zed Grids (http://zengrids.com/), the only way to do responsive web is with a css preprocessor. Sass, especially with its newest release 3.2, outshines the other two CSS Preprocessors when it comes to @media handling. First Sass lets us remove all the junk and rigidity of grid classes from our markup; Second, Sass does all the heavy lifting with is solid math functions–write your own or use one of the many grid extensions available–to spit out those % values down to the 100th value; Third media bubbling keeps stylesheets logical and legible; Fourth, the @content directive and addition of variables in Sass 3.2 blow it all out of the water allowing us to create power mixins that "respond to" different devices (https://github.com/jcroft/jeffcroft-css-framework-v2/blob/master/framework/css/contrib/_media_queries.sass); Fifth, Sass along with new tools, like beloved Live Reload, bring Photoshop to the browser, getting you in the medium faster.

For the rest and much more on principles and philosophies of Responsive Web join us Tuesday, June 19th 7PM at New Work City for presentations by Mason Wendell, VP of Creative at Zivtech, and Sam Richard, Front-end Developer at World Economic Forum. This third installment of NYC Sass is not to be missed. Not to worry though, this revolution will be televised (https://plus.google.com/114681737886881049489/posts).

The Speakers

Mason Wendell (http://thecodingdesigner.com/about) has been writing, coding, and touting the magic of Sass and Responsive since before we even decided to open our ears to the magic flute of CSS Preprocessor. He's the creator behind Survival Kit (https://github.com/canarymason/Survival-Kit), coined the term Coding Designer (http://thecodingdesigner.com/), and author of many articles on RWD in Sass. His work has inspired many, including Jeff Croft who sites Mason's articles as the inspiration for his respond-to gist.

Sam Richard (http://snugug.com/me) is one of the leading voices on Sass and Responsive as well as frequent collaborator and friend of Mason. He has given talks on RWD at Meetups and Conferences the world over. His recent article, Principles of Responsive Web Design (http://snugug.com/musings/principles-responsive-web-design) is one of the most thorough and expansives look on RWD since Marcotte's seminal text (http://www.alistapart.com/articles/responsive-web-design/). A must read!

The Talk

Mason and Sam will be giving a combined session for the length of the meetup covering the whole Sass+RWD stack with an intermission for a lightning talk on Susy (http://susy.oddbird.net/), the responsive grid framework for Compass, so strap in and prepare to have your socks blown off.

Live Streaming

We will be live streaming this event on the Sass Meetups Ustream.tv channel (http://bit.ly/sasslive)

Good Reads by Mason Wendell

Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (http://thesassway.com/intermediate/responsive-web-design-part-2)

Responsive Web Design in Sass Part 2: Media Queries in Sass (http://thesassway.com/intermediate/responsive-web-design-part-2)

Responsive Web Design in Sass Part 1: Fluid Layouts and Fluid Images (http://thesassway.com/intermediate/responsive-web-design-part-1)