So there are two things I've never really done before.

 

1. Design & Build a responsive site

2. Build a site using a grid/framework of some sort

 

I know this question is very much opinion and there is no right answer but for someone with the above in mind, which would you guys suggest? I've always just designed my sites in photoshop how I like then built it how I like, without grids or anything like that. I've also now started working on responsive design and I've got the general idea of most of it but a lot of the ideas seem to revolve around grids or similar frameworks, which I've never used.

 

So if I want to start out with grids and also work on responsive sites which would you suggest I start with? Obviously I've looked at a few different options and some I like, some seem restrictive on designing around the grid rather than the other way around. I don't want something huge and complicated like bootstrap but what do you guys use, or what did you use before you moved on to something like that?

 

Ideally it'll be something with both PSD & HTML/CSS options and lightweight, some of the ones I looked at had 50kb of CSS before I'd even done anything.

 

Thanks!

I used to like the 320 and up since it was one of the first to realize the mobile first principle. (making sure smaller screen sizes don't need to download unnecessary content) http://stuffandnonsense.co.uk/projects/320andup/

 

edit: I notice it's not actively supported anymore, but you might try their successor?

Edited June 29, 201313 yr by PietPuk

As you may have seen from my previous preaching, I'm stubborn on grids (mostly from an old school print background, but also because of stucture). My best advice would be to get stuck in and create your own stuff. One the earlier grid systems I used to swear by was Semantic.gs. I like semantics. It makes me warm. I use a custom grid now for the majority of my projects using SASS, but judging from your post, I'd take one step at a time before creating a custom grid.

 

My first love was Skeleton http://wdf.co/ik and then I moved on to Foundation http://wdf.co/il - however version 3, not the latest. Foundation in particular had/has a really excellent grid system that compliments mobile devices in particular (I'm also a Mobile First disciple - so highly recommend that route). Frameworks are very user friendly and well documented but they aren't always the best route - especially if you intend to learn your craft. If it's feasible, try and learn the fundamentals of grids from scratch. If you can

 

Bootstrap is also a good resource and very comprehensive. You say that it is huge and complicated but you can strip it down to what you want to use, but I appreciate how overwhelming it can be. In terms of what to use before that, I'd suggest Skeleton as mentioned above. It's very lightweight, no JavaScript and it has a focus on typography (always a good thing!).

 

The above recommendation is excellent, but as noted, it isn't supported anymore. It's successor is Rock Hammer. It utilises Bootstrap values as well so you might find it overwhelming again but it is very thorough and will teach you some new tricks. Again, if you can go the 'raw' route, do so, but my own preference and experience would be Skeleton. I've recommend before to others on here and it has been suitable most of the time.

 

Good luck

If you use someone elses code you'll never learn to do it yourself.

 

That's why I recommend learning how to make responsive layouts first, once you know how it all works then you won't be reliant on a 3rd party grid system, and that will give you ba lot more flexibility.

Thanks for the replies guys. My first instinct was to continue as I was doing, making everything myself but while reading up on responsive grids and frameworks there was so much raving about how streamlined and easy it makes things so curiosity made me want to try it. I'll have a look at Skeleton, think I've looked before and if I still don't get on with that I'll go back to DIY.

 

As a slight tangent then, is there something out there which isn't a grid or a framework but basically a vanilla HTML5 setup for a responsive site, just the head ready done and a bit of the CSS, reset stuff and any other starters.

 

I always seem to end up just copying and pasting my last project and removing the content to start something new but I'd like to find something better as a super basic base.

I always seem to end up just copying and pasting my last project and removing the content to start something new

 

I shouldn't be admitting this, but I still do this not for all projects but a little more frequent than I should...

 

As I mentioned in my earlier post as well as BlueDreamer also pointed out, you'll learn more if you do it yourself. It's not always a viable option - depends on the time you can commit and how serious you are of making a thing of it. Try Skeleton at least and see how you get on. I'm more than happy giving you any pointers if you get stuck. It's pretty simple though. I don't mean that in an arrogant way, but it's quite straight forward. You can transfer some of the concepts to your future projects. I picked up a couple of tricks for my grids from Skeleton without ripping out any of the existing code.

 

I always seem to end up just copying and pasting my last project and removing the content to start something new but I'd like to find something better as a super basic base.

 

There's nothing wrong with that, you'll find most professional desgners/developers have our own prewritten code snippets - copying and pasting common chunks of code is a lot quicker than typing out every time.