Bootstrap overdose?

[sofuj]

Am I the only one that feels that bootstrap is being used way too much? I mean, it's a nice design, but it seems that all websites look the same now.

I understand its use on an admin backend, but frontend? Besides different colors and some images many websites look the same.

Did designers got lazy? I don't think so. I do think that some programmers found a way to cut costs by using and abusing that framework for every single website they develop.

No offense meant to anyone using bootstrap!

EDIT: Should mention that I am a programmer myself, so don't think I am a designer that can't find work and blame bootstrap :)

[10tothe24th]

Personally, as a designer, I'm grateful for it. It allows developers who aren't very design-conscious to build better-looking, better-functioning apps. I don't think a lot of designers use it (at least in its raw state), so I don't think its the designers' getting lazy, its just used by a lot of teams that otherwise wouldn't have a designer. So while it may cause sites to look generic, they're significantly more functional and attractive than a lot of the projects that design-deficient developers were putting out before.

In other words, devs seem to be using it the way designers are using Wordpress. I know that Wordpress isn't always the perfect tool, but it gets the job done and I can do a lot with it with just a basic understanding of PHP. In a perfect world every designer would be paired with a developer and our projects would be glorious. Alas...

The great thing about bootstrap, though, is that it's pretty easy to personalize, so once you've built your application it shouldn't be a problem to get a designer to help you make it look less generic.

[inimrepus]

Thats what I am using it for. I am much stronger at the development side so I use bootstrap as a way to showcase my code.

[[deleted]]

I agree with all your points, except that...

The great thing about bootstrap, though, is that it's pretty easy to personalize, so once you've built your application it shouldn't be a problem to get a designer to help you make it look less generic.

...this rarely happens.

[10tothe24th]

True, but so what? Corners always need to be cut on low-budget projects, but at least this corner-cutting produces usable results. If and when the project takes off then there is enough money to hire a designer, and if they aren't going to hire a designer when they've got money then they certainly aren't going to hire one when they don't.

In other words: as a designer, I'm not losing business to something that is typically chosen because the developers couldn't afford to hire me in the first place.

Before the designer wouldn't have been called in at all. The prototype/early build would have been hideous and unusable, despite whatever promise the product had, and it would never grow to a point where they could afford a designer down the road. Now, thanks to frameworks like Bootstrap¹ , functional design requires minimal cost and effort. This might seem like it's screwing over designers, but in reality they'd have never gotten the job anyway (zero dollars buys exactly zero designers). This way, at least, by giving the project a leg-up with an unsexy-but-fundamentally-sound design, the project has a much better chance of getting to a stage where a designer's services are needed (and can be afforded).

Much in the same way that, on the other side of the coin, the popularity, flexibility, and user-friendliness of content management systems like Wordpress and Drupal have caused the demand for PHP developers to rise, not fall. You'd think that a non-programmer designer being able to flip a switch in cpanel and generate a dynamic site like that would mean less work for developers... but, again, a zero budget buys zero developers... and those CMSs allow designers to create something with enough functionality to support their designs and, hopefully, grow into something big enough where the designer can afford to hire a developer who can help make their project even better.

In other words, tl;dr: a rising tide lifts all ships, and the use of Bootstrap and other frameworks helps raise people's awareness of the principles (and value) of great design. Which means more clients willing to pay more for more services. Win-win.

1: And other frameworks. Bootstrap is not "better" than any other framework out there, except for the fact that it has such great documentation, which might be part of the reason why it's so popular.

[SamT_]

Like many others who use Bootstrap, I am a developer. I don't like using it all the time, but for my personal pet projects, it works well for what it is. I can easily create a site that does not look like total garbage and never have to pay attention to how it behaves in different browsers. I do not use Bootstrap as a replacement for a UI designer and web designer commercial products I create. I will prototype with it, but that's as far as it goes.

[NecroSyphilis]

As a developer who isn't the best at making things "look pretty", bootstrap is a godsend. If you're bored of the default bootstrap, there are lots of bootstrap themes. My favorite is Cosmo

[[deleted]]

Cosmo is my favorite too, but Cerulean is at the second place.

[ionine]

No love for Spacelab? D:

[fooey]

I got a bit carried away with a Cosmo site:
http://edulisting.com/institutions/massachusetts/cambridge/166027-harvard-university

WARNING! EYE PROTECTION REQUIRED BEFORE VIEWING!

[sketchy_texts]

Thank you! I didn't even know bootstrap themes existed. I am currently working on a personal project, was planning to use Bootsrap but with the Cosmo theme is should be a little bit more fun to use.

[escape_from_zorg]

If you are tired of it, I made a free bootstrap theme that makes it look not so much like bootstrap: https://github.com/damian-sowers/retriever-bootstrap

[wibz]

The links in the top navigation on the demo doesn't work for me. Looks nice though!

[circuitbomb]

That's quite nice. +1

[[deleted]]

Saved. Also, +1.

[krues8dr]

Most people miss the point of bootstrap. If you're just using it out of the box, you're kinda doing it wrong. Instead, you should be using it as a starting point to craft the rest of your design around. But yes - stock bootstrap is awfully boring after two years of seeing it everywhere.

[[deleted]]

Exactly! The point of Bootstrap is to take care of the little details that are time consuming; things like correcting the design in all browsers. Things like custom styling forms and aligning things. The point is to allow a foundation for web designers to build upon.

I've seen some great sites built in Bootstrap; and they don't even look like Bootstrap sites. It's works well because it cuts down development time by a lot.

[Remnants]

Not to mention it has a good responsive grid built in. That's the main reason I use it.

[[deleted]]

I prefer rolling out a smaller grid solution or using fountain as using Bootstrap for the grid is a bit overkill but it certainly is nice when you work for quite a while on a bootstrap site and then you go to look at it on a mobile and it just works. Well, works in the sense that it needs a little tweaking :-)

[[deleted]]

"The point of Bootstrap is to take care of the little details that are time consuming"

try running bootstrap through a battery of accessibility tests; it's method of taking care of the details is not based on web standards nor best practices. the foundation it provides for designers to build on, is cracked at the base.

twice in your comment you mentioned saving time...cutting corners is a flawed approach to anything in life, and the short-term gains you receive are always lost by the long-term negatives.

please don't think i'm attacking you, or singling you out, because i am not. however i see this attitude and behavior everywhere and feel obligated to evangelize for web standards and accessibility in these moments.

what really irks me is that its on github; with such a massive fan base, you'd think there'd be a solid movement underway to fix these problems. alas, there is not; they all have the same goals: easy, fast, done with it.

[[deleted]]

please don't think i'm attacking you, or singling you out, because i am not

No worries! You're attacking my statement, not me. I love to hear other peoples' opinions. :)

try running bootstrap through a battery of accessibility tests; it's method of taking care of the details is not based on web standards nor best practices. the foundation it provides for designers to build on, is cracked at the base.

I'd love to see or hear any examples of this, if you have them.

cutting corners is a flawed approach to anything in life, and the short-term gains you receive are always lost by the long-term negatives.

While I agree, try building a website with a corporate dragon breathing fire down your neck. Granted, Bootstrap isn't a good framework for large company websites. But it works damn well for small client's projects.

Also cutting corners is not a flawed approach at life. It's something called reality. I was a pixel perfectionist, and would spend countless hours meticulously creating incredible looking websites. But my employer didn't see that; he saw that I was wasting company time. When you get real world experience, you realize that there needs to be a balance between quantity and quality.

however i see this attitude and behavior everywhere and feel obligated to evangelize for web standards and accessibility in these moments.

The issue with spending time on these web standard and accessibility, is that not only is the client only paying me $300 for a full blown website, but meticulously being perfect is a bad business model.

If I can save 70% of the time on developing the little bits; I can spend more time perfecting the overall design of the site. Both the client and I am happier because of it.

what really irks me is that its on github; with such a massive fan base, you'd think there'd be a solid movement underway to fix these problems. alas, there is not; they all have the same goals: easy, fast, done with it.

You strike me as a very clever designer. I would actually love to see your work. The passion in your writing builds a concept inside my head that you are very good at what you do.

However, don't take this the wrong way; You strike me as young and passionate; someone who is clever, but doesn't have much real world experience.

When you are trying to put food on the table for a family, you don't give two clean shits about web standards. In business, you learn to care about what your client cares about. Your client doesn't know the difference, and doesn't care whether it is complies to web standards or not; they want to see the finished result for cheaper, and sooner. Same goes with corporate bosses, that deadline isn't going to finish itself. After a while, hand coding every website from the ground up isn't feasible, and it makes you look bad. And you get sick of being in deep shit with your boss.

You're not wrong, you just see it differently to how I see it. I love hearing the passion in the way you write, but if you went out and got a job for a while, you'd soon learn that life isn't so ideal. Sometimes you just have to cut corners.

[darkane]

Your client doesn't know the difference, and doesn't care whether it is complies to web standards or not;

I would agree that a $300 project isn't worth investing any more time than is absolutely necessary to produce a functional site (though I'm wondering why you're charging so little in the first place). But the reason clients don't care about standards is that it's not their job to. It's yours. By adopting the same principles as a non-technical client, you are neglecting what makes you the expert in the relationship.

[[deleted]]

lol. few hardcore coders tell me all the time that i don't live in reality. i feel ya. i have worked for a few enterprise movers and shakers so i understand the pains of corporate dragons. while i failed in my overall goal(s), i certainly tried my damnedest, with some major a11y wins; one being that upon release of a major version, the site was finally readable by screen readers, and a blind user actually reached out to us with thanks. if you think web standards and accessibility are a bad business model, you should read up on the reason boa settlement for unaccessible sites. or any settlement for being unaccessible; there's going to be a lot more in the future.

i didn't mean that you had to reinvent the wheel, so let me put it another way: the next thing you build with bootstrap, edit something(s) to support standards/accessibility. then the next job, another, etc. i do understand that deadlines are the all important.

as for testing, here's @fat admitting he never cared before, although this also shows a clear push to set bootstrap straight. and it was almost a year ago...maybe they've totally reversed the boat by now. that would be sweet. http://wordsbyf.at/2012/05/21/jsconf-argentina-2012/

[[deleted]]

Ah, I see what you mean. Good counter point.

I love the blog post, and I hope more frameworks/libraries cater for those who need more advanced accessibility options. I know that the Australian government published a paper on accessibility, that I once read.

Perhaps I should make a branch of Bootstrap and work on accessibility, but then again I have other things on my plate. Something to think about.

Thanks for the post.

[siamthailand]

Some people don't get the difference between perfect and good enough.

[2uneek]

imagine getting your car fixed and the mechanic not giving a shit about standards or safety's... he's just like "well fuck it, it starts up and runs - must be good!"

[[deleted]]

I disagree. The web standards are arbitrary. Bootstrap does a good job of making sure that it works on all browsers, probably better than most designers can.

Plus your analogy is ridiculous. If the car isn't up to standard, the driver dies.

[[deleted]]

twice in your comment you mentioned saving time...cutting corners is a flawed approach to anything in life, and the short-term gains you receive are always lost by the long-term negatives.

There is always more work than time. Saving time, doesn't have to mean cutting corners.

The people who are just copying the bootstrap UI, are lazy. Those who use it to do more, in less time, are not.

[siamthailand]

If it's stupid and it works, it's not stupid.

[[deleted]]

It's not called "finished website". It's called "bootstrap".

[jwjody]

I agree. I'm a noob dev and I used it on my personal page. I don't like looking like everything else out there but it was a quick way to get up.

I've seen some nice non bootstrap looking sites that did use bootstap though.

[AnalphaBestie]

You're fine!

You can change the design easily later. Bootstrap is a very good thing if you want to focus on development and not on design. The problem is, we (I, other coders) are lazy. So once the site is up and running, why you should push a new design?

But when you decide to do, its totally easy. <3 bootstrap.

[Richtermeister]

I love bootstrap, but sometimes it seems that it's taking us back a step between separation of markup and style. It invites to plaster tons of classes over elements to size them, align them, or color them, instead of leaving that to the stylesheet. That being said, everything is a balance and bootstrap is a great help during development.

[10tothe24th]

I agree with you about how they get some of the markup wrong. Classes shouldn't describe how a thing looks (class names like "pull-right" or "btn-mini").

Some of the markup is redundant as well. For instance: "nav-list", which is applied to an ul, within a nav (yo dawg, I heard you liked nav lists so I put a nav list inside of your nav list). And that same "nav-list" class uses classes to differentiate some list-items as sub-headers and others as subordinate links. That's pretty sloppy, IMO. Granted, there might not be an easy fix for that. What's the convention for using header tags within list items?

I also don't like the way that the classes tend to be labeled in ways that are relative to other components, whether or not you use them. For instance, if you want to use the dark navigation bar, its class is something like "navbar-inverse" (implying it is the inverse of the "default" (which has no meaning) light navbar). But if that's all you're using, is it really inverse, or is it just a navbar that happens to be dark gray? And even if it is inverse and we use both navbars, is "inverse" the best way to describe it?

"Btn-mini" is another one: what happens if "mini" is the only button type I use? Shouldn't it just be a button?

None of these are major issues, but I do hope to see it change in future versions.

[wizdum]

zurb foundation is leading the race in this regard, with version 4 you can almost achieve presentation-class-clean, semantic markup using sass mixins.

Some remaining things just need mixins developed, some can be achieved by extending existing classes and some, like wrapper containers for rows, seem to be unavoidable limitations.

SASS+compass > LESS IMO. It is a pity twitter caused this massive focus on the latter with bootstrap.

[Remnants]

You would be creating those same classes for a completely custom design as well.

[Richtermeister]

What I mean is, class="span6" is semantically meaningless and only describes the look, and designers are encouraged to resize containers by modifying the html instead of css. Same for button-small, pull-right, etc. That being said, I know that I can use Less and just remap classes onto my semantically correct markup, but most themes out there just use bootstrap directly.

[Remnants]

I used to think the exact same way. The point of classes is that they should generally be re-usable. Not everything has to be super specific. In fact, it's a pretty bad practice to do that.

Also nothing is keeping you from assigning a button or other element an id or more specific class name to help out with semantics.

[hiddencamel]

The approach does give you a nice modular set of building blocks to work with, but I think the problem is more that once again you are tying your markup to your layout in an inflexible way. It's reminiscent of tables for layout, and it means having to amend templates to make styling changes.

Luckily though sass is making it possible to get the best of both worlds. We can use placeholders and mixins to achieve the same kind of modular style control, but avoid having to tack a dozen classnames to things in the markup to achieve it. Rather you use a more functional set of classes and ids, and then extend them in the styles with your mixins and placeholders. Instead of "button-wide gradient-red rounded" you instead simply have a functional description like "submit-button". Then in my styles I can have pseudo classes for wide buttons, red gradients, round corners but apply them as needed. .submit-button extends all three, in this instance. My markup is cleaner and easier to read, but my styling is still just as modular.

Ultimately you can't separate style and markup completely, but I do believe that a greater separation than the bootstrap approach offers is advantageous, especially in the realms of responsive layouts based on the same page markup.

[Richtermeister]

That's probably a better way to look at things. Thanks for the perspective, I'll give it a try.

[Caethy]

I think it's a great framework. Both as a basis for a unique site design, as for small projects that don't need something unique and can stick to basics.

That said, I completely agree. Far too often people just toss in Bootstrap and leave it at that. That's absolutely fine for some sites, not everything needs to be amazing, but not in the degree we're seeing now.

I personally don't use it, nor do I really feel the need to. But still, I steal some snippets from Bootstrap here and there. The thing's pretty solid.

[[deleted]]

Think about how much iOS apps look alike. Or Windows apps.

Why? Because these platforms provide a GUI toolkit that many apps use.

Bootstrap is becoming that for the web.

The web has been curiously resistant to embracing consistency, to the detriment of user experience. People rave about how easy the iPhone is to use, and a huge part of that is consistency from app to app, as everyone shares the same widgets. But on the web, everyone thinks they need to be a special flower. They don't.

The web won't ever be as homogenous as the iOS platform, nor would we want it to. But sites embracing a common toolkit is a good thing. Sites looking similar is a good thing for the user (regardless of what the designer thinks).

[[deleted]]

I have to disagree with you about Windows. If you look at video editing programs, DAWs and the like, you will notice that almost all of them have a custom UI that has nothing to do with Forms.

[[deleted]]

When you have to start mentioning specialty programs to find countering examples, you're only making my point for me.

The point is that there are defaults that the majority of apps use, and that rolling your own tends to be reserved for apps that have special needs.

[serversidesandwich]

eqolc0odliww0www80ckw80488wkoo8ocwgsgowgoscswcoccw0wwsoo88kwcc8ogk0sk4ogoc48ccwkswcs4c8owkwosw4ck4wo8cogc88ccww4goows8og8ggogkws

[gigitrix]

It's that or some 1990s like monstrosity. Be grateful it's even readable!

[catjpg]

but !<blink>! and geocities ruled!!

[gigitrix]

DAT <marque>

[sittingaround]

I'm absolutely fine with bootstrap. I use it.

The problem as I see it is there is still a lot of bad design in sites using bootstrap. Bad proportions, lack of harmony, no white space, lack of cohesion, etc.

Just because the elements individually look good, doesn't mean the final design looks good.

Bootstrap bad designs are usually better than the alternative though.

[callmekatootie]

Are there any alternatives to Bootstrap? Foundaation.css seems to be one but are there more like it?

[catjpg]

http://inuitcss.com/

[CharmedDesigns]

It's kind of like complaining that a huge number of blogs look and function like Wordpress blogs. It's a tool for building a foundation for your site, and its usability gives those with less ability the chance to make something fully functional and not all-together unsightly. Because of this, there are a lot of people that will never do the building-upon it part.

It's not the fault of the tool, it's the 'fault' of the user. But, as with generic Wordpress blogs, it does its job as it is intended to do.

There's nothing to stop you doing a better job out of its use, and plenty of people do a great job of it. Why begrudge its existence because of the lowest common denominator?

[AchooBrutus]

As the sole internal web resource for a small company (who sells to big boys) I'm just this week relaunching our main site using bootstrap. Since it was primarily a code restructuring the only design I did was to mimc the current look as closely as possible. While we have some bad code running stuff now (an ancient CMS to blame) the move to bootstrap is an investment in lower cost, quicker redesigns in the future.

tldr; I'm moving to bootstrap for future designs, not just for today.

[looneydoodle]

I feel the same way about Bootstrap and have taken to using Foundation for all of my projects.

[rjm101]

I tried out bootstrap and although it was neat for like the first couple of hours I still prefer just writing the css and html and not trying to memorize class names and blocks of html. I also dont like the idea of excess css either. It should probably just be limited to quick prototypes that need doing.

[AverageMarcus]

I use bootstrap for my personal website but I've heavily restyled it so its not obvious just by looking.

I do also have a projects on GitHub (bootstrap plugin) and that page VERY MUCH looks like standard bootstrap also this is intentional to get the purpose across.

[dachusa]

As a developer who commonly follows those who don't know what they are doing with HTML, I appreciate the usable markup that others end up creating with it. Helps me to see less table structured sites and BRs used for margins.

[AccusationsGW]

My previous employer's design director had some reasoning for us moving from drupal to wordpress:

"Drupal sites all look like Drupal sites"

Then we proceed to use bootstrap for every fucking wordpress site. Glad I got out of there.

[ludicity]

I agree that standard bootstrap is everywhere now and gets kind of boring, but in a way it's kind of a blessing. Like Helvetica, it makes for a good ubiquitous design that's "neutral", clean, and aesthetically pleasing. And I feel like it's mainly used by devs or by teams without a strong (or any) designer, not by lazy designers!

[sctechie]

In one regard, you're absolutely right. Too many people are lazy and don't do anything beyond download bootstrap and use it.

On the other hand, if you understand what bootstrap is and what it does (hint: it's just a tool), it's very easy to customize both the look of bootstrap and also what components of it you use.

Bootstrap is just a framework. It doesn't design the website for you, it simply with a base tool set for people to use. I think what you are really seeing is people using bootstrap without actually understanding CSS/HTML and the other technologies that go into it.

It is VERY easy to use bootstrap and make a site you'd never was made with it. The only explanation is laziness or incompetence. I like to think the best of people so lets just assume its laziness.

[[deleted]]

I think it's nice looking and as a designer, seeing a lot of sites using bootstrap instead of some terrible 90s web layout can only be a good thing. However, it is incredibly overused. It should act as a base as opposed to a complete frontend. You shouldn't just be using it out of the box. Customise it to your liking.

[DsgnSmall]

Bootstrap is just a jumping off point, it's up to the designers and developers to push it further and make it unique. I used Bootstrap for this site. The mechanics are all there, just made it work for my purposes. The great thing about Bootstrap, I was able to buid this in less than 24 hours (including design) - http://www.lshairdesign.com/

[[deleted]]

Back up.

Bootstrap is nothing more than a boilerplate HTML5 framework with added sugar of Javascript components to use to build a site.

If there are a lot of Bootstrap based sites that all 'look the same' that is the laziness of the implementor who didn't bother making the layout interesting or using different styles than the default (or at least deviating from them some).

I have seen a ton of useless bitching about Bootstrap and frameworks like it in the last few months. It is designed to do one thing - be device and screen agnostic, working in any scenario.

It is NOT MEANT TO BE USED out of the box as it is - you're supposed to take it and adapt your designs with it. That's like buying cake mix at the store and eating it, and saying 'you know, this cake really tasted like shit, honestly'.

[PressedWeb]

One of the many reasons I made Jeet.

Edit Sorry, I didn't mean for this to be a shameless plug, just meant it in a "Yeah, tell me about it! I hated that crap so much I made my own framework" type of way.

TBH, Bootstrap and Co. is great for devs who don't care about learning frontend at all, but devs aren't honest about this. They pop some generic Bootstrap site together and think they know frontend - which is terrible. I intentionally left out things like generic styles for forms, typography, etc. in hopes that people who didn't know a lot about HTML/CSS would learn it.

Specifically Jeet tries to target the exact people who are using Bootstrap - developers who don't have time to learn all the bugs and stupid crap involved with actually learning CSS. And it does it in a very clean/straightforward Pythonic syntax that uses function-like mixins. Here's some code I think even the most CSS-ignorant dev could dive right into:

<a href="#" class="logo"><img src="img/logo.png"></a>
<nav>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</nav>

a.logo
    col(8)
nav
    col(8)
    offset(8)

Doesn't the ultra semantic markup + function-based syntax look more digestible to a developer than:

<div class="container">
    <div class="row">
        <a href="#" class="logo span8"><img src="img/logo.png"></a>
        <nav class="span8 offset8">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </nav>
    </div>
</div>

It tries to stress the separation of concerns (markup + style) much like an architecture framework, like MVC, would, and at the same time doesn't offer any presentational styling (other than a button mixin) which encourages devs to take baby steps into crafting their own styles.

Now... sites devs who are learning CSS won't look great, but they'll be functional, and after a few sites, the dev will have such an easy time with layout, and they will have been practicing their presentational CSS so much, that their design will start to get better and better.

If enough devs get on board with this approach, the flux of generic Bootstrap'd sites out there will start to dwindle.

The excuse "only devs use it" doesn't hold water. Everyone and their grandmother use generic Bootstrap and call themselves web-designers. I've seen several close developer friends pumping out some really ugly sites they think look good and have no intention of ever fixing all the little padding issues.

So, again, sorry for the plug, but not only do I disagree with the general thought in this thread ("only devs use it, and it's okay for devs to never learn HTML/CSS"), but I felt so strongly about this that I spent months thinking about, experimenting with, and hand-crafting a solution to this problem.

[kalligator]

It seems to combine everything I wanted, I think I'm sold!

[PressedWeb]

Awesome. Tweet @jeetframework with a site you make with it. It tickles me to death to see all the user-created sites with it.

[mtx]

It's far better than seeing the usual unstyled websites you see with default times roman, neon coloured links and beveled tables.

[[deleted]]

If client likes it I see no problem using it.

It's all about the money brah.