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 Josue Sandoval
Josue Sandoval
946 Points

What are some good responsive/adaptive grid systems?

I am currently using the golden grid system but I don't like that it goes from small to big and big to small etc...

For example I am on a 1920 x 1080 resolution and the content is currently smaller and centered in the middle. The less wider that I make the browser it seems to make the middle content bigger and wider and then again smaller.

I would think at my resolution it would show the content at its widest and scale down as I make the browser smaller.

Any other recommendations?

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Personally I think that Frameworks like Zurb foundation & Bootstrap add in too much to start with. You need to learn to walk before you run.

So learning the principles of:

  • fluid grids
  • flexible images
  • media queries
  • good typography

Then maybe add in a pre-processor such as Sass or LESS

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'll leave you with my favorite quote on frameworks

Make sure every bit of code added to your project is there for a reason you can explain, not just because it is part of some standard toolkit or boilerplate.

Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

For the reasons James stated, I would focus on all what he stated first and foremost.

I would say Foundation on the basis that you take advantage of their builder and remove everything but the grid to get started if you want to slowly build yourself to focus on just the fundamentals.

On the other hand for such purpose, merely a grid system such as Suzy or Skeleton would be perhaps better to start with.

I would recommend Foundation because it is mobile-first, it uses SASS which has solidified itself to be the most worthwhile preprocessor CSS with much far better mix-ins (functions) provided than what Bootstrap provides for responsive websites, and it's use of SASS for all the components makes it very easy to cut down what you need or don't need and make massive changes in seconds.

SASS combined with Bourbon or Compass infinitely is better than what can LESS can provide you on Bootstrap

I would recommend Bootstrap only after Bootstrap 3 comes out to be actually Mobile-first.

*At the end of the day, don't commit what Nick (of Treehouse) claims to be one of the Top 10 Sins Web Designers make: be a slave of a css framework. *

Evaluate what are your needs for a particular project, evaluate what tools can help you do such a project most efficiently without reinventing the wheel, and go with what feels right after trial and eror.r **

Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points
Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points

I would recommend twitter Bootstrap for a start, and use the fluid grid system : http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem