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

General Discussion

Bootstrap, sure it's responsive but...

I'm finding that I still need to create a lot of media queries to change the font size image size etc. The only responsive thing that I benefit from with bootstrap is the navigation menu, but aside from what are the advantages?

I enjoy the grid system, but I can get a basic grid system anywhere... Is that the main feature that is so great about bootstrap? I'm half ready to scrap my site that I have now and just create it from scratch/compass.

What do you guys think?

2 Answers

When I first tried responsive web design, I looked toward bootstrap. Yet, just like you I didn't find much of an advantage. They do have a good frame work but they still left a good deal of the bulk work to you to figure out what you want ultimately. For me personally, I found Foundation by zurb to be way more intuitive and useful. I always download the standardize download, it has great JS prebuilt features and the grid system is easy to use. I would highly recommend that to anyone.

you can look it over and download it here: http://foundation.zurb.com/

I think the benefit from Bootstrap comes from the pre-packaged CSS and JS (probably obvious but hear me out). You get a lot of fancy effects (like accordions, modals, ScrollSpy, other fun things) and you don't have to think about the initial styling of every single element. Things like forms look nice right out of the box, and have built in validation. You also have access to some nice looking glyph icons. If you're not a designer, and you want something that looks presentable without a lot of effort, Bootstrap gives you a lot of bang for your buck.

As far as media queries... Bootstrap gives you some breakpoints which is cool- you don't have to think about defining every last breakpoint from scratch. There are also "responsive utilities" that let you decide which elements are shown (or not) at which screen size, although these only work for block (not inline) elements. It's nice b/c instead of writing a query for every element you want to disappear at certain break points, you just use the helper class on that element.

If you notice patterns in how you tend to make elements behave at certain breakpoints, maybe you could write your own helper/utility classes that you could copy/paste into future projects to make the process smoother. IE if you always want the option of making images scale a certain way, you could write a "scale" class that you could use over and over again. If you can do something like that, then maybe those kinds of utilities could/should be written into Bootstrap. But, for very project-specific behavior (IE you doubt you would be able to use the same rules for future projects or for multiple elements), it might be difficult for any framework to predict the kinds of behaviors you'll need to get out of media queries. In other words, since your content is going to be specific to your project, it might be difficult if not impossible for Bootstrap or any other framework to predict the specific media queries you'll need.

Anyway, if you are a designer, and/or you enjoy doing front end work, I agree, you can do just as well using another grid system with fewer bells and whistles. If you have to go through and define your own rules for all of those elements anyway, you're not really getting all of the value out of Bootstrap that someone just using the defaults would.

Cool. So I really wasn't too far off from my initial guess then. Thanks!