addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1linklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

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

    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, 2012

  • Sam R.

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

    July 17, 2012

  • joel m.

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

    July 17, 2012

  • Nick H.

    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, 2012

  • Scott K.

    The sass book can be found here: http://www.manning.com/netherland/
    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, 2012

  • 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, 2012

  • Mark R.

    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, 2012

  • Walter W B.

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

    June 20, 2012

  • Jeff W.

    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, 2012

  • A former member
    A former member

    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, 2012

  • Anthony C.

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

    June 20, 2012

  • A former member
    A former member

    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, 2012

  • Claudina S.

    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, 2012

  • Sam R.

    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.

    June 18, 2012

  • Michael L.

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

    June 13, 2012

  • Claudina S.

    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, 2012

  • Sam R.

    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, 2012

  • Claudina S.

    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, 2012

  • Matthew S.

    Event looks Great! Looking forward to it.

    June 11, 2012

  • Claudina S.

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

    June 11, 2012

  • Sam R.

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

    June 8, 2012

  • Claudina S.

    Mason Wendell and Sam Richard

    June 5, 2012

  • Slava B.

    Hello. Who will be the presenters?

    June 5, 2012

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy