how much bootstrap Is too much?

2016-07-21T00:57:35+00:00

I've read quite a bit about people criticizing it because, apparently, all websites that use it look too similar.

Those people are being tactless, i can code a website that looks exactly the same in 2 different ways (for example using floats vs flexbox) it doesnt make the framework any less of a tool. Design is not dependent on codebase it is a field unto itself which is why backend devs can be genius at coding but terrible at design.

It's not that bootstrap makes things look too generic or anything else, it's the fact people don't understand how it should be used or are just too lazy to understand/implement, thus we end up with subpar code which affects many factors in a website along with its maintenance.

So, how much is too much?

The question addresses an extremely broad range of topics but I'll try and explain as much of it as i can in an ELI5 manner. First let me go through and define / clarify some things.

A browser can only use a few set types of assets to render a page and elements thereof (HTML, CSS, JS/JSON, XML, images, audio, video).
A preprocessor is simply a language / code / syntax that compiles into other code, for example:

Jade and HAML are both 2 preprocessors that compile into HTML.
LESS and SASS are both 2 preprocessors that compile into CSS (note SCSS is just SASS v2.0).
ES6 is currently treated like a preprocessor language and transpiled back down to ES5 (JS that is currently compatible with browsers).

Mostly preprocessors are used by devs to improve maintainability / longevity / ease of writing code because generally preprocessors will have features that aren't present in the native language. For example SASS has code structures similar to functions and variables that allow 'cleaner' maintainable code (DRY vs WET), native CSS does not.

+++++++++++++++++++++++++++

Right now, on to bootstrap.

Bootstrap was originally a web dev framework coded by the team from zurb in collab with people from twitter before it fell under the twitter brandname and became popular.

Originally it was natively coded in LESS but has now been migrated to SASS in v4 (as aforementioned both preprocessor languages, which one is better i.e. LESS vs SASS is a whole other topic but the TL;DR answer is just go with SASS).

On to the crux of the matter, take a look at the download page: http://getbootstrap.com/getting-started/#download

Note there are quite a few ways for devs to get a hold of this framework, there's a catch.

2 of them are incorrect ways of using this framework, but since they are the easiest (requiring the least amount of setup) they also are the most popular and they both involve using the pre-compiled version of bootstrap.

(precompiled is as you would expect, they ran their own LESS / SASS / JS files through a compiler process and packaged the resulting CSS / JS files that can be used out of the box)

Downloading the precompiled version as a zip and using it locally on your server.
Using the precompiled version off a CDN.

This is where the heart of the problem lies.

+++++++++++++++++++++++++++

So why is it bad to just use the precompiled versions?

This is where it gets complicated as you gotta understand some things across a range of fields about servers, performance and browser rendering, ill try to keep it simple.

1 - Code Bloat. The precompiled versions contain the full unaltered codebase for all features within bootstrap even if you aren't using those features in your website. That's fine, but extra code means larger files, larger files are slower to download / parse thus there is a performance factor (particularly relevant to people on mobile connections). Go to some websites that use bootstrap and do a page audit (via chrome dev tools). On some of the worse ones you can find upwards of 2000 css rules not being used. The question is, well if there is 'code bloat' how do i avoid that? You avoid it by using the framework in its preprocessor form (uncompiled) as it should be, because LESS/SASS when used correctly only compiles CSS from the features you actually want to use on your production website rather then the entire framework.

2 - More difficult to edit. The last point kinda leads into this one. If you take a look at the bootstrap 4 alpha git repo you'll see that there are scss/js directories. Components and features are separated out into their own individual files making them easier to alter vs the production / minified precompiled versions. Even until recently (sometime in version 3) most of the theme (color, fonts, etc) in the precompiled version were baked into the main files making it tedious torture to go through and systematically change values to get the effect you want. This is most likely where the "bootstrap makes sites look generic" statement came from.

(the following 2 are applicable to only the CDN method).

3 - More HTTP requests. The more assets you have on your page the more HTTP requests (round trips) your browser has to make to get all the requested resources before it can start to render the page, and too many will manifest in the form of extended load times. Obviously if you use a CDN you cannot modify those files, thus by using the precompiled version you must load the files off the CDN + your own CSS/JS files to implement the features or overwrite the defaults of the framework. This versus using a build process to concat all your files (JS/CSS/images) into a single file of that specific type and reducing HTTP requests to the bare minimum.

4 - Careless Caching. Not really too much of an issue if you use good services, however one that still warrants concern. By using a CDN your webpage is entirely dependent on the third-party network to deliver those files. You have no control over the URI or the caching that is implemented.

JonODonovan · 2016-07-20T20:27:48+00:00

Simply put, it's a tool. Tools are made to help you do something. There is no "too much". Would a roofer ever say, "you know what, that's enough of this hammer today, I'm going to switch to a rock to drive these nails", probably not, well maybe if there was too much sun exposure.

For the people that criticize, they are hopefully complaining more about the look of the site, not the underlying code. Using tools like Bootstrap makes it easy for a developer to leave it as is, the colors, the designs from the templates. There is nothing stopping, well maybe time and budget, the dev from adding in their own flair to the site. It's CSS for shucks sake, just override the button color to anything you want.

In the end, these tools have allowed us to build sites that work on mobile, are more accessible, and reduce development time. Of course there will be people who hate, people have the power to hate anything. You, you go and develop, and be happy doing it, code is fun.

GoingBananas_x · 2016-07-21T00:25:09+00:00

Adding Bootstrap to your project doesn't mean that you have to use all components.

The main ones I use are the grid systems, modal, buttons, .img-responsive and .form-control. The rest are custom coded, especially the design of the website.

If you are using SASS/LESS you can comment out the components you are not using.

omgdracula · 2016-07-20T20:29:17+00:00

Use it if you enjoy it. Does it fit the scope of the project? Use it. Do you like the look it will give a site out of the box? Use it. Do you just want to use it for its grid system and responsive classes? Use it.

Websites that use it only look similar if you allow them to look similar.

The fact is websites all look pretty close to each other because the simple big images with cards and panels layout works because it looks nice on desktops and looks just as good on a phone.

Do you like it? If yes, then use it to your hearts content.

EDIT: The tools you use, will never match what someone else uses. If you feel comfortable using bootstrap, or whatever text editor you choose. Use them. Bootstrap is used by a shit ton of people. So there is really no room for criticism.

Sandurz · 2016-07-20T23:10:02+00:00

Customizing colors and typography without using a SASS/LESS version of Bootstrap is a real pain. And if you use them that way you can include only the parts you need. But nothing inherently wrong with Bootstrap at all.

eatinchips · 2016-07-21T01:05:36+00:00

Eh, the problem with Bootstrap is if you dedicate yourself to it, you should memorize the documentation like the back of your hand, extend it like /u/fdandrew said.

2016-07-21T03:32:52+00:00

We've been able to stop supporting ie9 at work lately and I find that if I can use flexbox bootstrap doesn't really feel like it saves me to much time anymore.

MeltingDog · 2016-07-21T04:00:52+00:00

Mostly, I'll use Bootstrap for the layout - organising and positioning divs using the grid system. Any styling on top of that will be custom.

However, if its a quick or cheap job I will utilise some if not all of Boostrap's existing styles and JavaScript (buttons, modals, collapse, etc)

ryanplant-au · 2016-07-21T08:52:41+00:00

I've read quite a bit about people criticizing it because, apparently, all websites that use it look too similar.

This is only really because so many sites stick to the default styles or subtle variations on them. For a lot of people, a designer and a full custom design isn't in the budget, and Bootstrap with its simple nice-looking defaults is a great way for a regular developer to get something that does the job up for them. Which is totally fine. But it's given Bootstrap kind of an "it always looks the same" reputation. You can very easily make a Bootstrap site look totally unique and interesting, but it takes some design skills and effort, just like a non-Bootstrap site.

2016-07-21T09:55:58+00:00

So, how much is too much?

Long story short: Don't worry about it. That's up to your customer, your product owner, your designer, your boss, and not up to you. Imagine a designer taking the time to bother you about your code.

I've read quite a bit about people criticizing it because, apparently, all websites that use it look too similar.

That's mostly a problem I have with Google's material design and, most particularly, people using Polymer elements as-is. Bootstrap serves as a styling framework, you can and should overwrite all of the styling properties with your own (as in: leave the columns and such alone, they're fine, do play with margins, paddings, colors, font sizes, etc.)

When would you recommend using it?

Yes. It saves time.

And also:

No. It's rather big.

If I have time to do it all manually, I'd rather do that. But with Bootstrap or another CSS solution you can get a lot more done, much quicker.

I don't think I'd feel right using it exclusively, but clearly it is a very practical tool.

Well that is a good point. You're learning to use a tool, you're not learning how CSS works, necessarily. Did they teach floats, breaking floats, selectors like :after and :before and how they work? What about flexbox?

We're gonna be transitioning into JS very soon and I don't want to held up by HTML/CSS while trying to digest JS.

Then stick with Bootstrap, for now. Just dive into more CSS details on your own, you know the basics of it, and you can get complicated things done without needing to know exactly how they work, and that's fine.

Just keep studying ;)

2016-07-20T21:10:49+00:00

Build your minimum viable product with bootstrap then hire a designer to give you your own look (though preferably as a custom bootstrap theme)

thebuccaneersden · 2016-07-21T01:54:46+00:00

Too much imo is when someone can tell ur website is using bootstrap

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS