CSS Preprocessor / Responsive Framework
There has been a lot of discussion about responsive in issue #30, but it doesn't really belong there so here goes.
There's a conversation starting here about responsive design which I'll quote bits and pieces of directly for background:
One way to have a good mobile interface for before native applications are finished or for mobile platforms that aren't supported (because there will always be phone/tablet OSs that you've never heard of) is to write the web interface in a way that doesn't cause the need for a separate mobile site.
By being careful not to specify px widths for containers, not to use tables to align content, separating sections vertically instead of horizontally, etc. you can have a web interface that negates the need for a separate mobile and desktop interface. [link to post]
Yeah, the techniques you are describing used to be known as "fluid layouts", because they would expand and contract to fit the size of the display. In the last few years, since the adoption by browsers of CSS3 and media queries those techniques have been expanded and modified and are now known as "responsive web design". [link to post]
There are a lot of tools and techniques for helping people build responsive designs, with bootstrap and foundation being two of the most popular. susy and neat are two others, which take a different approach than bootsrap and foundation by tying in with in with tools that help process and generate CSS so that you don't need to include layout classes in your HTML markup.
We'll definitely be making use of some combination of responsive techniques and tools so that the site looks and works great on all devices. [link to post]
...in mobile-first designs you design for the smallest screen initially, which almost always means elements are stacked vertically instead of laid out horizontally side-by-side.
The mobile layout is the default in the event the browser doesn't support media queries, so teeny-tiny small screened devices with ancient, nonstandard browsers can absolutely be anticipated [link to post]
The benefit to responsive design is that as you scale up to larger and larger screens, when those columns get too wide to be readable, you can start putting them side-by-side and rearranging the components to accommodate the greater width.
Maintenance can be a concern, especially when using the frameworks that require you to add extra layout markup to your HTML classes, but there are ways to mitigate it, and the benefits are huge. [link to post]
@crimsonvessel
Regarding extra markup with frameworks, I've been looking into InuitCSS (which works with SASS) seems like a good one to utilize? It's purposefully design agnostic, and I believe (though I'm still researching) that it predominantly utilizes SASS's extend feature (so you're referring to hidden classes and only pulling them into your own classes on an as needed basis). This way you can keep markup semantic and use class names that make sense. [link to post]
Bourbon/Neat and Compass/Susy both work somewhat similarly to the way you're describing InuitCSS (side-eying that name with this logo tbh).
They utilize SASS mixins to implement the grid system which you pull into your classes. With bourbon/neat, you can also add bitters which gives you typography defaults, some extends, etc. They have their quirks but they work well. [link to post]
So, I guess the big questions for this issue are: Which responsive framework should we use, should we use any particular CSS preprocessor (responsive framework will probably influence that decision) and should we build the responsive design mobile-first?