Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Edward Boal
Edward Boal
2,059 Points

Grid systems

Hi there...

For those of us that are relatively new to RWD, the number of grid systems out there can be pretty intimidating! I don't want a fully-fledged CSS framework that contains a whole bunch of stuff I don't need - I just want a really lightweight, tried-and-tested, grid framework that doesn't have a huge learning curve! Trying to choose one is holding me back from getting on with my life!

There are a few grid systems out there coded in CSS and even a couple in SASS (such as Neat. Any recommendations!?!

Thanks

Ed

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Edward Boal Just stumbled across this as I was reading my daily barrage of articles on feedly 15-responsive-lightweight-front-end-frameworks-worth-considering

3 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

If you go to the twitter bootstrap site you can make you own custom build. Click the button"Toggle All", then select grid system under common css. Finally, scroll to the bottom and click the big button that say "Compile and download". If you go that You will only have the grid system. Cheers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

That's the grid I use with none of the extra stuff :)

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Yeah, I love bootstraps grid. Just wish they had a built in col type to distinguish between phone landscape and portrait. I always end up adding it myself.

Edward Boal
Edward Boal
2,059 Points
Edward Boal
Edward Boal
2,059 Points

Sorry for late reply...been a hell of a week!! James - the two grid systems you pointed me to look really interesting and I am going to try them out. But as a follow-on question, many frameworks are based on a max-width of 960px which seems a bit old hat...I feel like I need to settle on the right grid and get on with it...but don't know whether to go with a 1100px or 1200px grid system?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Personal preference I would say. Twitter bootstrap grid has a .container-fluid class which is basically this -

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

So it will adapt to screen size with a little padding either side to stop the content touching the edge. Once you understand grids more you can even make your own. I did a SASS one where I can set a few variables like containerWidth, columnCount etc and have it build a grid based on these settings.