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 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, Front-End Developer extraordinaire and creator of Zed Grids, 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; 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.

The Speakers

Mason Wendell 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, coined the term Coding Designer, 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 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 is one of the most thorough and expansives look on RWD since Marcotte's seminal text. 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, 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

Good Reads by Mason Wendell

Responsive Web Design in Sass: Using Media Queries in Sass 3.2

Responsive Web Design in Sass Part 2: Media Queries in Sass

Responsive Web Design in Sass Part 1: Fluid Layouts and Fluid Images

Join or login to comment.

  • joel maria

    thanks you for the quick response. On linkedin, you can create an event for this meetup to allow us to publish this meetup on our profile page.

    July 17

  • Sam Richard

    What do you mean? This specific meetup has already taken place.

    July 17

  • joel maria

    is it possible to open this meetup as a Likedin event?

    July 17

  • Nick Hudson

    The meetup on a whole was great; the presentation was informative (just a bit too technical for beginners), there was beer and snacks and the turnout was great. Might be a good idea to use a mic for the presenters though (for the people in the back who couldn't hear).

    June 24

  • Scott Kellum

    The sass book can be found here: http://www.manning.com/netherla...
    You can always find help in the #sass channel of irc.freenode.net

    If you spot any of us after the RWD or Sass meetups we will be happy to help you out as best we can.

    June 21

  • leela

    hi team, can any one share me useful links , ebooks to follow . I am searching for SASS utilities . I found scout app for windows , but didn't fnd how to use it , the other way i am using is installed ruby gems and doing command line . i wanted to really make some what automated .

    June 21

  • Mark Reilly

    Another excellent meetup. Great information on Responsive Web Design techniques using Sass and Compass. I particularly enjoyed creating grids with susy. I am working on a new project and this will be invaluable. Nice selection of Beer too and the Pork buns and fruit were a welcome treat. Thanks again to the organizers: Claudina, Scott, Mason, and Sam.

    June 20

  • Walter W Brown

    Great Meetup!
    Thanks.
    Looking forward to the next one.

    June 20

  • Jeff Scott

    This was far and away the most amazing meetup for SASS I have ever been too. A real deal indepth look into optimizing with modernizr as well as the Coding Designers Survival kit was amazing!

    June 20

  • Benjamin Cortes

    It was very interesting. I do responsive design and did see some benefits to using the technology that was presented. I'm not sold on using a grid system to layout my design. I also think the subjects have to be broken up into there own meetups. The QA was ongoing and I understand why, it was a lot to take in.

    I look forward to reading up and learning more about Sass and Compass. Thanks

    June 20

  • Anthony Cangelosi

    Awesome info. Learned a lot. Only critique is better time management.

    June 20

  • Rebecca G

    Super excited guys! Awesome job Claudina & Sam for setting up these amazing meetups, glad I'll be able to go to this one.

    June 19

  • Claudina Sarahe

    We have a new livestream channel on Ustream.tv http://bit.ly/sasslive Tune in tonight at 7PM. Edited recordings will be posted soon after.

    June 19

  • Sam Richard

    Mason and I have a full list of items we are going to be covering tomorrow night, but if there is anything specific you'd like covered, let us know and we will try and include it.
    As a heads up, this talk will neither be an introduction to Responsive Web Design nor an Introduction to Sass talk; it will be about how Sass+Compass can improve your RWD work.

    1 · June 18

  • Michael Leow

    Will it be streamed or recorded for those of us not around?

    June 13

  • Claudina Sarahe

    Brush up! A Book Apart has just given us some copies of RWD by Ethan Marcotte and Mobile First by Luke Wroblewski.

    1 · June 12

  • Sam Richard

    We will be giving these away based on your #rwd and Sass knowledge! The questions will be pulled from all of the resources linked to above, so read up! LiveReload and CodeKit are resources we use and are resources we will be covering, so this is stuff you'll be able to (and want to) use immediately!

    June 11

  • Claudina Sarahe

    LiveReload just kicked in 15 free licenses! Please give all our great sponsors a big thanks on Twitter: @livereload #codekit @voxmediainc @nwc Our hashtag is #nycsass

    June 11

  • Matthew Snyder

    Event looks Great! Looking forward to it.

    June 11

  • Claudina Sarahe

    Codekit just gave us three free licenses to raffle on Tuesday! Must be present to win.

    June 11

  • Sam Richard

    If anyone is interested in giving a lightning talk, let us know.

    June 8

  • Claudina Sarahe

    Mason Wendell and Sam Richard

    June 5

  • Slava Belenky

    Hello. Who will be the presenters?

    June 5

VOX Media

Refreshments courtesy of VOX Media! @VoxMediainc and @VoxProduct

Pivotal Labs

Thank you for hosting our 6-month anniversary Meetup 17th September 2012

CodeKit

Free licenses for 3 lucky winners at June 19th Meetup. Thanks @bdkjones

LiveReload

15 free licenses for our June 19th RWD Sass Meetup. Thanks @livereload

A Book Apart

Copies of Responsive Web Design and Mobile First for 5 winners June 19th

People in this
Meetup are also in:

Log in

Not registered with us yet?

Sign up

Meetup members, Log in

or
By clicking the "Sign up using Facebook" or "Sign up" buttons above, you agree to Meetup's Terms of Service