6 ms·

Question: If you were developing a large, content-driven site, would you bother with Bootstrap? Bootstrap seemed a bit like overkill when I had to use it in my

Question: If you were developing a large, content-driven site, would you bother with Bootstrap? Bootstrap seemed a bit like overkill when I had to use it in my old job. The CSS and markup seemed excessive, and the strict JS was kind of a pain to deal with. I know I can get something that looks half-decent up and running quickly with it, but if I'm not planning to take any visual design from it, is there much of an advantage? Is Bootstrap's grid so great in any way that I really should be using it?

jwcooper 13y ago
Bootstrap 3 is much nicer to use than previous versions, if that's what you were using in the past. Each element is more of a barebones styling to it, which makes it easier to get what you want out of them (such as buttons). I spent a lot of time in previous versions of bootstrap just stripping out text-shadows, border-radius, gradients, and more just to get it back to a basic component. The grid in the Boostrap 3 is pretty useful if your requirements are for a responsive layout. It really makes it pretty simple to get things going, but does pollute your html with a lot of cruft as you sometimes need to define each size within a single class attribute. One other thing I've found is that it makes the site more maintainable, as it's easier for others to understand your CSS and layouts. It's the equivalent to being able to hire a Java programmer that knows the Spring Framework (they're plentiful, and usually know enough to not break things). The same is the case for Bootstrap. By having a common and popular framework, you have more developers that can jump right into your front-end quickly. Also, it's easy enough to customize[1] to get only what you need. If all you need is the grids, just remove everything else. No need for the js components. [1] http://getbootstrap.com/customize/ http://getbootstrap.com/customize/
- neovive 13y ago
  Great point. Instant familiarity for other developers is definitely a big plus when using a well-known framework such as Bootstrap. No matter how well you structure your site and name your classes, there is always an added learning curve when working with a completely custom codebase.
applecore 13y ago
What's a good alternative?
- freshyill 13y ago
  Bourbon Neat http://neat.bourbon.io http://neat.bourbon.io has been my grid of choice for the past year or so. It's stupid easy to use, plus I get the lightweight power of Bourbon mixing. Beyond that, the js portions of Bootstrap are nice, but they're certainly not unique. My opinion of things like Bootstrap and Foundation is that they're nice, but they serve a purpose that I think isn't appropriate for a lot of uses. I think if you need to put together something fast, they're great. If you're investing tens or hundreds of thousands of dollars in design, I think it behooves you to build a lot of your components from scratch. I might take a few components from Bootstrap, but I can't really see it being my starting point. As for an alternative, I think doing it yourself to suit your own needs is the alternative.
- dmmalam 13y ago
  http://purecss.io/ http://purecss.io/
- owenversteeg 13y ago
  Min, the extremely small (995 bytes) CSS framework. It has a Bootstrap to Min converter, has near-feature parity with Bootstrap, and is very easy to use. http://minfwk.com http://minfwk.com
baby 13y ago
Answer: Don't bother for large websites. Get normalize.css If you really need grids, you can get a lighter framework.
- freshyill 13y ago
  This is the answer I've been hoping to hear.
  - SkyMarshal 13y ago
    Or just don't use the parts of Bootstrap you don't need, it's fully modular. Four steps for pairing BS down to your bare essentials: 1. Clone the repo [0]. 2. Hide unneeded JS modules: Open ./Gruntfile.js [1], scroll down to `concat` task, delete or comment the JS files you don't need. 3. Hide unneeded CSS: Open ./less/bootstrap.less [2], delete or comment Less includes you don't need. 4. Run the `grunt` task to recompile it. Voila, lightweight, stripped down Bootstrap with only the parts you care about, in less than 5m. The beauty of frontend build systems. A side benefit is once you adapt a build system for your frontend, you can add all sorts of additional customizations [3] to it, BS just provides a nice initial setup for that. [0]:https://github.com/twbs/bootstrap https://github.com/twbs/bootstrap [1]:https://github.com/twbs/bootstrap/blob/master/Gruntfile.js https://github.com/twbs/bootstrap/blob/master/Gruntfile.js [2]:https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less https://github.com/twbs/bootstrap/blob/master/less/bootstrap... [3]:http://gruntjs.com/plugins http://gruntjs.com/plugins
    - LoonyPandora 13y ago
      Or even simpler, use the customizer [0] to download the bits you want. A few checkboxes and you're done. [0] http://getbootstrap.com/customize/ http://getbootstrap.com/customize/
      - SkyMarshal 13y ago
        That works too, though you don't get the reusable build system, just the compiled output of it.
EyeballKid 13y ago
I'm veering toward thinking of bootstrap as more of a naming convention than anything else. I've been using it recently and it's nice enough, but feels a bit heavyweight for the sorts of things I want to use it for. In future I think I'll probably do my own css, but use bootstrap naming conventions, where appropriate.
Bahamut 13y ago
If you want to avoid polluting the HTML too much, you could always use the mixins/classes from the LESS or SASS files (https://github.com/twbs/bootstrap-sass https://github.com/twbs/bootstrap-sass for SASS). Even as a frontend developer who knows CSS pretty well, I like using Bootstrap. It lets me focus on more important things. For my workplace, the UI team will use a bit from Bootstrap, more if we're under time pressure to finish a project. They rather do stuff from scratch most of the time, but they're coming around on the ability to use mixins & slim down the CSS using the LESS.
- ahahah 13y ago
  A UI Semantics is probably essential before you start authoring HTML with application semantics, like HTTP Verbs via AJAX. So there's an essential need for things like LESS and SASS to provide managers for states, easy to follow metamixins for liberally namespacing HTML through classes at least. https://github.com/OscarGodson/HTML6 https://github.com/OscarGodson/HTML6 anyone?
- Flenser 13y ago
  I just wish there was a bootstrap-sass conversion that used silent classes everywhere so I could @extend my own classes to match bootstrap without having to bring in all of bootstrap. I've had to write a parser (based on https://npmjs.org/package/css https://npmjs.org/package/css ) to convert any css file to an scss file with all .classes converted to %partials so it produces no output until you @extend a class from one of the partials.
owenversteeg 13y ago
Answer: You wouldn't. Bootstrap's extremely bloated, requires jQuery, and has a huge (required) JS file. Choose a small, leaner CSS framework, like Min - only 995 bytes and it is near feature parity with Bootstrap. http://minfwk.com http://minfwk.com
- stephen_g 13y ago
  How do you define 'near feature parity'? From that page, Min doesn't appear to have anything like the dropdowns, button groups, tabs, more than half the navbar options, pagination, progress bars, etc. that Bootstrap has... It could certainly be useful, but doesn't appear to me to be anywhere close to feature parity.
  - owenversteeg 13y ago
    Min has dropdowns and all of Bootstrap's navbar options. You'll just have to use the navbar plugin (owenversteeg/min-navbar-plugin) Progress bars, pagination, and button groups are all coming for Min 2 or Min 2.5, although demand for them is very low. If you have a specific feature you'd like implemented, just open an issue.
- deleted 13y ago
  [deleted]
- lowboy 13y ago
  I disagree with your post. 1. As stephen_g said, Min is nowhere near feature parity with Bootstrap. 2. IIRC, Bootstrap doesn't need jQuery, or its own js if all you want is a css framework. 3. You can make a custom build of Bootstrap to cut out the cruft that you don't need. I like minimal frameworks (YUI's Pure is one of my favs), but 12-column layouts are generally superior than 10-column layouts, unless you desperately need 5 equal columns for your site. I see that you wrote Min - I'd strongly consider changing your grids to 12 col. More divisors, and it's somewhat of an industry standard. Also, no normalize.css? Lastly, you'll probably have a better adoption rate for your framework if you tone down the attitude and false claims. There's just no need for it.
webjunkie 13y ago
Especially with a large, content-driven site, sooner or later you can make use of every single one of Bootstrap's features. I wrote code for grids and columns dozens of times myself. Each project had new requirements but somehow the core was always the same. A button here, style the list there, the headings don't work bla bla bla. With Bootstrap you can start right away because everything is already there for you. People underestimate that fact and value "lean and simple" more.
err4nt 13y ago
Forget the grid entirely, no grid system is better than custom-coded responsive layout for the big chunks of the page. I can't imagine how many hundreds of hours of work Bootstraps components and plugins have saved me though! Carousel, popovers, tabs, accordions, toggles, drop downs, form styles, and more all rolled into one CSS and JS file that are easy to theme! YES PLEASE

jwcooper 13y ago

Bootstrap 3 is much nicer to use than previous versions, if that's what you were using in the past. Each element is more of a barebones styling to it, which makes it easier to get what you want out of them (such as buttons). I spent a lot of time in previous versions of bootstrap just stripping out text-shadows, border-radius, gradients, and more just to get it back to a basic component. The grid in the Boostrap 3 is pretty useful if your requirements are for a responsive layout. It really makes it pretty simple to get things going, but does pollute your html with a lot of cruft as you sometimes need to define each size within a single class attribute. One other thing I've found is that it makes the site more maintainable, as it's easier for others to understand your CSS and layouts. It's the equivalent to being able to hire a Java programmer that knows the Spring Framework (they're plentiful, and usually know enough to not break things). The same is the case for Bootstrap. By having a common and popular framework, you have more developers that can jump right into your front-end quickly. Also, it's easy enough to customize[1] to get only what you need. If all you need is the grids, just remove everything else. No need for the js components. [1] http://getbootstrap.com/customize/ http://getbootstrap.com/customize/

neovive 13y ago
Great point. Instant familiarity for other developers is definitely a big plus when using a well-known framework such as Bootstrap. No matter how well you structure your site and name your classes, there is always an added learning curve when working with a completely custom codebase.

applecore 13y ago

What's a good alternative?

freshyill 13y ago
Bourbon Neat http://neat.bourbon.io http://neat.bourbon.io has been my grid of choice for the past year or so. It's stupid easy to use, plus I get the lightweight power of Bourbon mixing. Beyond that, the js portions of Bootstrap are nice, but they're certainly not unique. My opinion of things like Bootstrap and Foundation is that they're nice, but they serve a purpose that I think isn't appropriate for a lot of uses. I think if you need to put together something fast, they're great. If you're investing tens or hundreds of thousands of dollars in design, I think it behooves you to build a lot of your components from scratch. I might take a few components from Bootstrap, but I can't really see it being my starting point. As for an alternative, I think doing it yourself to suit your own needs is the alternative.
dmmalam 13y ago
http://purecss.io/ http://purecss.io/
owenversteeg 13y ago
Min, the extremely small (995 bytes) CSS framework. It has a Bootstrap to Min converter, has near-feature parity with Bootstrap, and is very easy to use. http://minfwk.com http://minfwk.com

baby 13y ago

Answer: Don't bother for large websites. Get normalize.css If you really need grids, you can get a lighter framework.

freshyill 13y ago
This is the answer I've been hoping to hear.
- SkyMarshal 13y ago
  Or just don't use the parts of Bootstrap you don't need, it's fully modular. Four steps for pairing BS down to your bare essentials: 1. Clone the repo [0]. 2. Hide unneeded JS modules: Open ./Gruntfile.js [1], scroll down to `concat` task, delete or comment the JS files you don't need. 3. Hide unneeded CSS: Open ./less/bootstrap.less [2], delete or comment Less includes you don't need. 4. Run the `grunt` task to recompile it. Voila, lightweight, stripped down Bootstrap with only the parts you care about, in less than 5m. The beauty of frontend build systems. A side benefit is once you adapt a build system for your frontend, you can add all sorts of additional customizations [3] to it, BS just provides a nice initial setup for that. [0]:https://github.com/twbs/bootstrap https://github.com/twbs/bootstrap [1]:https://github.com/twbs/bootstrap/blob/master/Gruntfile.js https://github.com/twbs/bootstrap/blob/master/Gruntfile.js [2]:https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less https://github.com/twbs/bootstrap/blob/master/less/bootstrap... [3]:http://gruntjs.com/plugins http://gruntjs.com/plugins
  - LoonyPandora 13y ago
    Or even simpler, use the customizer [0] to download the bits you want. A few checkboxes and you're done. [0] http://getbootstrap.com/customize/ http://getbootstrap.com/customize/
    - SkyMarshal 13y ago
      That works too, though you don't get the reusable build system, just the compiled output of it.

EyeballKid 13y ago

I'm veering toward thinking of bootstrap as more of a naming convention than anything else. I've been using it recently and it's nice enough, but feels a bit heavyweight for the sorts of things I want to use it for. In future I think I'll probably do my own css, but use bootstrap naming conventions, where appropriate.

Bahamut 13y ago

If you want to avoid polluting the HTML too much, you could always use the mixins/classes from the LESS or SASS files (https://github.com/twbs/bootstrap-sass https://github.com/twbs/bootstrap-sass for SASS). Even as a frontend developer who knows CSS pretty well, I like using Bootstrap. It lets me focus on more important things. For my workplace, the UI team will use a bit from Bootstrap, more if we're under time pressure to finish a project. They rather do stuff from scratch most of the time, but they're coming around on the ability to use mixins & slim down the CSS using the LESS.

ahahah 13y ago
A UI Semantics is probably essential before you start authoring HTML with application semantics, like HTTP Verbs via AJAX. So there's an essential need for things like LESS and SASS to provide managers for states, easy to follow metamixins for liberally namespacing HTML through classes at least. https://github.com/OscarGodson/HTML6 https://github.com/OscarGodson/HTML6 anyone?
Flenser 13y ago
I just wish there was a bootstrap-sass conversion that used silent classes everywhere so I could @extend my own classes to match bootstrap without having to bring in all of bootstrap. I've had to write a parser (based on https://npmjs.org/package/css https://npmjs.org/package/css ) to convert any css file to an scss file with all .classes converted to %partials so it produces no output until you @extend a class from one of the partials.

owenversteeg 13y ago

Answer: You wouldn't. Bootstrap's extremely bloated, requires jQuery, and has a huge (required) JS file. Choose a small, leaner CSS framework, like Min - only 995 bytes and it is near feature parity with Bootstrap. http://minfwk.com http://minfwk.com

stephen_g 13y ago
How do you define 'near feature parity'? From that page, Min doesn't appear to have anything like the dropdowns, button groups, tabs, more than half the navbar options, pagination, progress bars, etc. that Bootstrap has... It could certainly be useful, but doesn't appear to me to be anywhere close to feature parity.
- owenversteeg 13y ago
  Min has dropdowns and all of Bootstrap's navbar options. You'll just have to use the navbar plugin (owenversteeg/min-navbar-plugin) Progress bars, pagination, and button groups are all coming for Min 2 or Min 2.5, although demand for them is very low. If you have a specific feature you'd like implemented, just open an issue.
deleted 13y ago
[deleted]
lowboy 13y ago
I disagree with your post. 1. As stephen_g said, Min is nowhere near feature parity with Bootstrap. 2. IIRC, Bootstrap doesn't need jQuery, or its own js if all you want is a css framework. 3. You can make a custom build of Bootstrap to cut out the cruft that you don't need. I like minimal frameworks (YUI's Pure is one of my favs), but 12-column layouts are generally superior than 10-column layouts, unless you desperately need 5 equal columns for your site. I see that you wrote Min - I'd strongly consider changing your grids to 12 col. More divisors, and it's somewhat of an industry standard. Also, no normalize.css? Lastly, you'll probably have a better adoption rate for your framework if you tone down the attitude and false claims. There's just no need for it.

webjunkie 13y ago

Especially with a large, content-driven site, sooner or later you can make use of every single one of Bootstrap's features. I wrote code for grids and columns dozens of times myself. Each project had new requirements but somehow the core was always the same. A button here, style the list there, the headings don't work bla bla bla. With Bootstrap you can start right away because everything is already there for you. People underestimate that fact and value "lean and simple" more.

err4nt 13y ago

Forget the grid entirely, no grid system is better than custom-coded responsive layout for the big chunks of the page. I can't imagine how many hundreds of hours of work Bootstraps components and plugins have saved me though! Carousel, popovers, tabs, accordions, toggles, drop downs, form styles, and more all rolled into one CSS and JS file that are easy to theme! YES PLEASE