"Mobile First" Libraries for Responsive Design

Printable View

12-18-2012, 10:43 PM
Danny22

"Mobile First" Libraries for Responsive Design
Hi all,

I'll admit it, I haven't been here since I last registered, which was about the beginning of the year. But between then and now I've gotten into quite a lot of front end and I'm pretty excited about all the more complicated things out there.

Anyway, all apologies and silly rambling aside, I have a question. As the topic title suggests, I'm looking at libraries for responsive design. I want to try out a mobile first approach and see what it's like as well.

Here are a few I've found. One of the big players seems to be 320 and Up. It's based on HTML5 Boilerplate, which I used and have incorporated a lot of things from that into my sites. 320 and Up overwhelmed me. Even though it was an extension to Boilerplate it got a little bit confusing (though admittedly, I did skim over it when I first opened it up).

Here are some of the things I've read about.
- Twitter Bootstrap (another big player, but I've never tried it)
- Responsive.gs
- Frameless
- Golden Grid System
I'll probably have to play around with 320 and Up again. Twitter Bootstrap looks like another one to look at. The others seem to be standalone CSS concepts and grid systems, almost like the 960 grid system that is around for fixed grid systems.

I know it's all down to preference, and it's also down to experience, but getting some insight and comments would be awesome. Especially because I'm feeling lost as well. I'm not looking for a set-in-concrete answer, as I like to try and customise the frameworks for my needs so that I know what all the things I'm including do, and why I include them (like CSS, extra tags in the <head>, scripts, blah).

I'm no expert on this at all. If anyone has used any of them, comments would be great. What you liked, what you didn't, and any other things would be great to read about.

Thanks in advance! I hope I didn't talk too much now!
12-18-2012, 11:21 PM
Danny22

Sorry to do a double post, but I just found this site. It's called Initializr.

It's a great customisation tool, does exactly what I need. I remember finding this early back but didn't understand it. Returning to it and knowing what it all means is a great feeling. I hope this topic helps someone else who's in the same boat or me, in one way or another.

Of course, any personal experiences or more are great and appreciated! I'm off to try out Initializr and I'll see if I can let you all know how it goes and edit this post.
12-29-2012, 12:15 AM
sajidtoor

Thanks for sharing.!
01-03-2013, 09:23 PM
Danny22

Hey all,

Sorry about the delay in response. I would've talked a bit sooner, but hey, Christmas and stuff.

Anyway, I decided to do a bit more reading on each one and I went along with the Golden Grid System. Now I'm not saying that this is the best responsive grid system out there, but I like what it has to offer.

Initializr was alright but was giving me yet another template to use. I wanted something to just kind of "smoosh" into my existing little template I had tinkered with and the Golden Grid System did that nicely.

First and foremost, it isn't a framework, and it makes note of that quite a lot. Although it does provide you with helper CSS, some basic rules and some starting points, it hasn't created a whole bunch of CSS styles for two grid, three grid, n-th grid layouts. It gives you control as the designer to choose what will look best for the layout of your content, and also makes you think about how you should responsively layout your content.

It's got a nice little grid preview option for development too, and claims to have some form of zoomable baseline grid for typography. I can't really verify this but I read that the guide that the JavaScript generates might look a little off. I might play around with it and see if that's true down the track, but it isn't on my to-do list.

I think the fact that is wasn't a framework appealed to me most. 320 and Up is a lot more complex with it's additional JavaScript libraries and LESS/SASS options, and Twitter Bootstrap has a lot of default styling to it as well as heaps of web components for making front-end development quicker. Both are definitely great from what I've seen and read. HTML5 Boilerplate also seems to be going into responsive design. Last time I checked they had some simple media queries but no fluid grids or anything. Will look into that I suppose. This Golden Grid seems to easily be carried over into any project.

At the moment I've taken parts from 320 and Up and mixed it with the Golden Grid System. It's developed this kind of hybrid template I now call my own and I've grown attached to it. I feel that when I move onto looking at Bootstrap, I'll aim to simply modify this template further and build up on it.

There are a few problems with Golden Grid though, I ain't lying about that. There's no support for devices that don't use media queries or box-sizing. The idea the author has gone with is to just throw in some IE conditional styles (no problem for me, using Paul Irish's HTML class technique for that) to add a max-width to the mobile style (as you're encouraged to design mobile up, which seems to be all the buzz). I haven't crossed the <IE9 bridge yet. This looks to be an entirely different issue on it's own, with multiple ways to do it, and no standard way that's been accepted by all.

Urk, I've just gone and confused myself again with all of this fluid layout business. I hope someone's gotten something useful out of these huge posts.