Why Twitter’s Bootstrap is Important

https://medium.com/what-i-learned-building/99fdd6e46586

by tdrnd • 13 years ago

76 57 13 years ago

medium.com

addflip• 13 years ago

Just Twitter Bootstrap it's not Twitter's product.

dsego• 13 years ago

It's not even twitter bootstrap anymore, just bootstrap.

jcoder• 13 years ago

I don't see any argument that Bootstrap's HTML is in any way becoming a standard. When you start a project, if you are not using Bootstrap, do you reference the Bootstrap guide when you write your HTML? I don't, and have never seen evidence of it in any code base.

andybak• 13 years ago

No but a developer recently mentioned several reasons why he didn't want to use Bootstrap. and I realised that I didn't care as long as the HTML looked pretty much the same - could trivially be converted into such (by globally replacing classnames etc)

So this article chimed with me.

Charos• 13 years ago

Do you recall why he didn't want to use it? As I see it, it's a useful tool, but I couldn't come up with any reason to specifically avoid it. Are there licensing or IP concerns when using it for a budding business?

zachgersh2• 13 years ago

I think the more pertinent reason why Bootstrap is so important is due to the fact that it elevates the look / feel bar of all websites.

There is no reason that your website should look absolutely shit. Just dropping in of the most boilerplate bootstrap files brings your site up to a new level and that is with 5 minutes of work.

Spend more than five minutes with bootstrap and you can get something spectacular. Bootstrap made creating a better looking website accessible to everyone in addition to speeding up the amount of time it takes to execute a design vision.

ryanisinallofus• 13 years ago

I agreed with this sentiment a year or so ago but Bootstrap sites already look pretty dated. I think something like Foundation is a better idea because the site looks pretty great "after 5 minutes" without looking like a Foundation site.

zachgersh2• 13 years ago

I think the default site while somewhat bland isn't dated just yet. Over used, definitely but dated not yet.

jerrya• 13 years ago

Semi-offtopic, but is "medium" twitter's version of "posterous"?

I just noticed that to leave a comment at a medium site, a person needs to login through twitter. And the only social media support they seem to offer in my 15 second random survey of their front page is via twitter.

Ah, a bit of googling shows medium and twitter share co-founder Ev Williams. http://mashable.com/2013/04/17/medium-acquires-matter/

So is there any formal ownership between twitter and medium?

chimeracoder2• 13 years ago

> So is there any formal ownership between twitter and medium?

No, they're separate entities.

On a related note, I do find the "Goldilocks" progression of Ev's companies amusing - Xanga (big), Twitter (small), and Medium ('just right'?[0]).

[0] Time will tell!

davewiner2• 13 years ago

He didn't start Xanga, he started Blogger.

r0s2• 13 years ago

There must be some reason twitter shut down posterous, I assume it's a competition thing.

R.I.P. to my favorite blog platform.

dbanksdesign2• 13 years ago

I think the bigger reason why Bootstrap is important is that it is getting designers and developers to think about style guides and modular design/code. Every application should have some sort of bootstrap-style style guide/code base of reusable elements & modules to create a consistent look and make development easier.

Bootstrap is not the first to do this and there are others like Foundation by Zurb which shouldn't be overlooked.

at-fates-hands• 13 years ago

This is what I got out of the article as well. Not so much using Bootstrap, just using any kind of modular code is what's important.

I work at a fairly large company and we just redesigned one of the sites and it was based on what I would call a "modified" bootstrap. Just enough to make a lot of the elements proprietary, but extendable to the rest of the companies websites who are all using different styles and designs. The future is really to move all these sites to this kind of modular approach.

It also makes it easy for incoming devs to get up to speed and keeps the code consistent. You don't have to come up with crazy class names and spend hours trying to figure out what the last developer was doing. In general, it just makes everybody's job a lot easier.

dbanksdesign2• 13 years ago

Brad Frost talks about this, calling it 'Atomic Design' in this really good talk: http://vimeo.com/67476280

wyck• 13 years ago

I don't see anything standard about terms like "jumbotron masthead", "pure-g" or even "container".

Most large project have their own markup standards and that's pretty normal, it certainly wasn't invented by bootstrap.

mddw2• 13 years ago

Now bootstrap is important, yesterday it was the 360 grid, tomorrow it'll be another hype bandwagon.

First, Bootstrap did not standardize anything. It's a biased perspective to think so : most websites and most developpers don't even know about bootstrap. And those who know about it do not necessarily agree with it (per exemple I hate their JS coding style.)

Second, the myth about "changing your design without touching HTML". Sure, there're some cases where it's possible, but by experience it won't happen. Never. Sadly (or not), a redesign is always coupled with some HTML changes. Bootstrap does not change anything.

So, I think Bootstrap is far less important than, say, Wordpress was. It's a cool tool, useful for a "design dumb" like me to pull a quick demo without a true designer, but in the end it makes boring websites with boring code. It's also a overhyped tool, which won't survive (along with the whole stupid OOCSS thing.)

toggle• 13 years ago

It's easy to think that Bootstrap has revolutionized HTML, since the startup community often lives in an echo chamber. The sites we visit and the sites we make use Bootstrap, but let's take a moment to check in with reality here. Has there been a sweeping movement to use standardized markup for content? No. Is there really even a reason to? No. Like mddw said, is this (realistically) even possible? No. And finally, does this article have ANY substance or evidence behind it? No.

geon• 13 years ago

Also the fact that since the CSS is the same for every site, design decisions gets pushed to the HTML. Bootstrap is not very semantic.

colemorrison• 13 years ago

Well said. It's a useful tool. But does not standardize HTML.

OGC• 13 years ago

HTML standardizes HTML.

ebiester• 13 years ago

I read it in another way.

It isn't important in and of itself, but that the documentation is more important than the framework itself because as the developer is writing a list for a project, they will write the list in the same way; they will write the dropdown in the same way, rather than spending time copying and pasting and trying to figure out someone else's code and doing it slightly wrong and putting another class into the CSS, so that you have to change every dropdown by hand if requirements change.

That said, I've seen at least one project where people still just made it up as they went along, even though the framework was there. Sometimes, I think people just don't read. :)

mundizzle• 13 years ago

it's not a myth. just look at CSS Zen Garden - http://www.csszengarden.com/

if bootstrap markup becomes the lingua franca for common UI patterns, that's a plus in my opinion. no need to reinvent the wheel for something like a set of tabs.

mddw2• 13 years ago

Which is a (cool but) fake website. I've never seen a redesign keeping HTML code. Even when the code is very good and the separation well done.

pault• 13 years ago

What do you consider stupid about OOCSS? It has some valid techniques for dealing with CSS bloat in large web applications. At a certain size, semantic CSS starts to buckle under its own weight. I was able to reduce a ~20,000 line CSS file to ~5,000 by identifying some common UI patterns and changing the markup to use presentational classes.

pavs2• 13 years ago

One side effect of Bootstrap (from having some experience with it) is that I can almost instantly tell which site is using bootstrap.

I am not sure if its a good thing if more sites starts to look very similar or have similar design elements.

imjared• 13 years ago

I'd implore you to take a look at a gallery of sites built with bootstrap: http://builtwithbootstrap.com.

I think you'll be pleasantly surprised to find that not all sites built with Bootstrap follow the default mold of a thin 100%-width black navigation bar across the top with white background. Sure, there are lots that have that layout, but as developers learn more about Bootstrap, the sites that use it as their underlying framework are definitely diversifying.

pavs2• 13 years ago

Oh I have seen builtwithbootstrap before and its a wonderful gallery and example of what you can do with bootstrap, but I was mainly talking about the lazy one who just stick with the default designs and I seem to be seeing them more lately.

alan_cx• 13 years ago

What one can do is rarely what one does do.

willholloway2• 13 years ago

Take a look at my personal site without checking the source:

http://willholloway.net/

Can you instantly tell if it was built with boostrap?

NoodleIncident• 13 years ago

Yes. The buttons on the bottom give it away.

Critiques:

The site looks bad on a sideways phone due to premature responsive design. I had to flip to vertical to actually see anything.

More importantly, after scrolling to the bottom and clicking the 'up' button, it took about 25 back-button taps to get back here. Don't mess with URLs, please.

r0s2• 13 years ago

Yes, the buttons on the contact area.

Also, the skewed proportions of these elements: http://i.imgur.com/mGnCSp6.jpg on one resolution leads me to think you're relying on a grid framework,(in this case bootstrap) perhaps too much.

willholloway2• 13 years ago

Update:

Thanks for the feedback, I agree that the internal url changes on scrolling is undesirable and removed that. It's popular right now for single page sites, but it does break the back button.

The feedback was good and helped me improve my site a bit. The benefits of Bootstrap here for me was that it and a sub $20 theme from wrapbootsrap.com let me put up a very nice looking site that works very well cross platform in a couple hours and does not look bootstrappy at all. The icon distortion for a rarely used resolution isn't the fault of bootstrap, and could be fixed with a small css change. Those icons are temporary and not worth changing right now.

HN seems to really look for the negative and avoid the benefits lately.

mmanfrin• 13 years ago

Offtopic, but: Does anyone use selection tooltip things like on that site? They absolutely annoy me, as I'm one to compulsively select and deselect text I'm reading.

tracker1• 13 years ago

What's interesting, is the markup and tagging are very different in Bootstrap 3 from version 2. Which kind of breaks the "just get used to writing Bootstrap-style HTML"

I like Bootstrap a lot, but there is a cost to it, a lot of the time you are best off building from the less files in your project, and simply using them as-needed. I was actually surprised that a new version of a site I had in jQueryUI actually had a heavier payload with Bootstrap (including JS modules) than it did before. I still like Bootstrap's look better, but will be far more conscious of the load in the future.

Beyond this, in general, I only write my markup to target the framework when it fits the framework. There's still a lot of custom markup and CSS that goes into things. Beyond this, the look/feel are very consistent to different sites, which sometimes leads to a "oh, bootstrap again" feeling to things.

Bootstrap is a great getting started guide, but will restate the following... look at and understand the source parts in .less, make sure to use the mixins in your own code instead of replicating. And only use the parts you really need.

ganarajpr• 13 years ago

I think Bootstrap IS important. Why? Because it improved the look of the average website. It made creating MVP's easier while not compromising on the look and feel much. Ofcourse, when a lot of sites use Bootstrap, they start to look the same. Blaming that on bootstrap is kind of insane.

If you want to criticize it, create an open source project that has more than 50k stars on github. Then we shall talk. That is a show of its popularity in the world. Also, the second most starred project is not even close.

eaigner• 13 years ago

Bootstrap is just a bad excuse for no design/js skills. Its JS codebase is an abomination, as well as it's overly verbose CSS. It's only good for quick-and-dirty projects and has nothing to do with a well crafted site.

tzaman2• 13 years ago

I actually skipped Bootstrap for one single reason: everyone uses it. That's not a bad thing per-se, but the problem is that developers don't bother changing anything so each Bootstrapped site looks exactly as the next.

That's why I chose ZURB Foundation (now version 4), I love that it's written in sass out of the box (as opposed to Bootstrap's less), comes as gem, and more importantly, it has a settings file, which is kinda the central point of where you define all variables, from dimensions to colors - so apart from HTML it's very few custom css you need to write and still stand out.

untog• 13 years ago

and more importantly, it has a settings file, which is kinda the central point of where you define all variables, from dimensions to colors

So does Bootstrap, though. It's just that people don't change it.

tzaman2• 13 years ago

I wasn't aware of it, thank you for the heads up!

lowboy• 13 years ago

It would be nice if they directed people to modifying and compiling the Less instead of just dropping in bootstrap.css. But just because other devs don't change anything doesn't mean you can't. Bootstrap is a good framework for what it purports to do.

Foundation is pretty good too from the last time I checked it out (v3, iirc), but it lacks the same community in terms of numbers which can be detrimental at times. We picked MooTools over jQ in 2006 for our custom CMS system (we used it to build at least a hundred sites and were invested in it) and it was disheartening to watch the plugins just pass us by over the years.

nissimk• 13 years ago

This is off-topic, but I find bootstrap dropdown menu code to be lacking in several areas:

1) I haven't been able to figure out how to have the same dropdown pop up on multiple triggers without cloning the menu for each trigger.

2) It doesn't automatically drop up or down based on the location of the trigger in the page. For example if the trigger is near the bottom of the page the menu should pop up, otherwise down.

3) It seems like the popup needs to be in the same container div as the trigger so depending on overflow you sometimes end up having to scroll to see the menu.

Am I just not using it right? Are there other jQuery / javascript popup menus that have these features or add them to bootstrap?

jgrahamc• 13 years ago

The ulimate success of Twitter’s Bootstrap was the standardization of HTML syntax.

This is a great example of the "medium.com Style": a grandiose claim with no factual back up. It's getting a little tiresome. I suspect there are some good things written on the site, but if this is the standard then it's no different from 'random guy X's blog' except it all looks the same.

And, also, what does that sentence mean? HTML already is standard.

obviouslygreen2• 13 years ago

The medium.com proliferation on HN has disappointed me as well.

Like at least some other recent articles, I have to assume that most of us already know (or at least have our own opinions, which are only half likely to match up and unlikely to be changed by articles like this). In which case this is not for tech people, but ancillary staff that like to think they're tech people (...VC's? PM's?).

I'm not sure why these keep getting upvoted.

jpdevereaux• 13 years ago

I'm not sure why they get upvoted either, but I get why they're written. The real point of this article is the second-to-last paragraph, where he says (paraphrased) "check out my startup website that I didn't even use Bootstrap to make."

fizx• 13 years ago

This is a great example of the "medium.com Style": a grandiose claim with no factual back up.

This is a great example of the "news.yc style": a contrarian top comment with zero additional content. It's getting a little tiresome. I suspect there are some good comments written on the site, but if this is the standard then it's no different from 'valleywag' except it's a little more distributed.

And, also, what does that comment contribute? We already hate everything.

cmelbye• 13 years ago

His comment points out a valid concern with the article's broad unbacked claims, your comment was very unnecessary.

bryanlarsen2• 13 years ago

What's the standard HTML for a login form? That's something that exists on pretty much every site, and the HTML for it is also very different on every site.

And there's no good reason for the difference; if I have nice CSS for a login form, adapting the HTML to use the CSS or adapting the CSS to match the HTML is just busywork.

The widespread adoption of bootstrap means that a lot of sites now have inputs wrapped with div.control-group and btn classes on their buttons, etc. So I can take the CSS from site A and apply it to site B without changing the HTML.

That's what he means by "standard HTML".

ChikkaChiChi• 13 years ago

Bootstrap is an answer to a 10 year old question posited by CSS Zen Garden: Can we make the web beautiful?

Bootstrap is a great default starting point for a website. Its a great tool for internal development where you may have to write an app but don't want to spend days making it look nice. You can do anything you want with it.

If you complain it makes sites look the same, then ask yourself how many of those sites would have just gotten a template from Template Monster a few years back...

obviouslygreen2• 13 years ago

Bootstrap is an answer to a 10 year old question posited by CSS Zen Garden: Can we make the web beautiful?

If this is the question, then the emphasis needs to be on who "we" is. If it's developers, then yes. If it's an ephemeral "the world" we, then no, I don't think this is the case; people were making beautiful (subjectively, of course) websites before bootstrap, and will continue to do so afterwards. Most of the designers I know don't use it as a basis unless they're coming onto a project that used it to start with.

Note: I accidentally either upvoted or downvoted you while copying the text to quote... if it was a downvote, I apologize.

bobfirestone• 13 years ago

I think there is a disconnect between what many of readers who have commented here think of when they hear standardization and what the author intended. Bootstrap has not introduced a standard in the way that html5 is a standard. It is a standard in the sense of a common vocabulary shared between users. Anyone who has worked with bootstrap for more than a couple of days will instantly recognize that a div with a span6 class is half the width of the page.

One of my biggest frustrations at my job is not having bootstrap and not having that common vocabulary keeping things in order. This makes the design specs vague to work with, difficult to implement and the end result is a ton of one off styling reinventing the wheel instead of reusing a handful of global styles.

nahname• 13 years ago

To me, Twitter Bootstrap was important because it was the first time I added visual elements without having to hack the existing CSS. Most things I needed were already generalized and well documented.

Contrasting this to working on every one of the dozens of web projects I have been on. It was night and day. One was finding a kindred spirit and the other a train wreck. CSS is always the broken window code base of any project. TB was the first experience where it made enough sense that I didn't need to break more windows to get things to work.

boubiyeah• 13 years ago

Please do not use this very average technology in production :-( Keep it for demos, proof of concepts, admin back offices, that's where it shines.

You can tell the authors are more on the designer side when you look at the quality of the JS components...

Why Twitter’s Bootstrap is Important

Related Stories