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
davidalvarado
7,544 PointsGrids and Pixel widths for Responsive Design
Is there a generally excepted starting place for screen widths and grid systems that are actually used in production? I have heard several "pro" designers as of late discussing interview questions for front end designers and mentioning that CSS frameworks were a good place to start and learn but eventually you want to get rid of the bloat. I know there are many sites to roll your own grid system, I believe that our responsive design project was rolled with one of those. I've seen 960, 1040, 1140, 1200.. and so on and so forth. Is there a generally excepted maximum width to start at for responsive design? What are your thoughts? What are you using and why? Thanks.
6 Answers
Kenny Saunders
383 PointsCheckout Bootstraps default breakpoints. The idea is to start with mobile (320ish) use a fluid grid and they style the breakpoints as needed.
Paul Graham
1,396 PointsStart at zero. You have no idea how large a screen is. Work your way up from there.
You don't necessarily have to get rid of frameworks, but you should work towards something like Susy that you can compile into semantic code.
James Barnett
39,199 PointsPaul Graham - I might be missing something put can't you use any combo of CSS pre-processor& CSS framework to get semantic code?
Paul Graham
1,396 PointsAbsolutely but the complexity of a large system like Foundation or Bootstrap seems inappropriate to get something as simple as grids. You can always pull the code you need out to use, but to me that seems messy. I just hate to take something huge and start to pare it down rather than take something basic and build it up, especially for something as simple as grids.
That's absolutely personal preference though, any framework will work and I've personally used Bootstrap 3 in this manner before in prototyping.
James Barnett
39,199 PointsI agree using and simplegrid or grids from pure.css means there's nothing to take way
James Barnett
39,199 PointsWell full HD is 1920 and now there is quad HD which is 2560. Take a look at http://screensiz.es/monitor
Jonas K.
10,766 PointsMy minimum is 320px usually. Mobile first.
davidalvarado
7,544 Pointsok... so going from small to large.. my question was more towards the large side.. whats the max that is generally accepted, 960? 1040? 1200?... I guess Im just curious as to what is the "standard" on the top end.. Thanks.
Paul Graham
1,396 PointsThere's no "standard" per se, it just depends on your design. Some designs can work at 2500px and some can't. Probably the best suggestion I have is to check your analytics to see what % of your users are using these large screens. If 10% are over 1800px, you might want to consider addressing this demo.
Responsive design is all about meeting the different needs of your users, so if a large % of your user base is using a large screen size, you can make enhancements for their needs.
Kenny Saunders
383 Points@David do you have analytics installed? What are the largest screen sizes your user base has?