
Twitter Bootstrap Now Powering 1% of The Web - adamseabrook
http://blog.meanpath.com/twitter-bootstrap-now-powering-1-percent-of-the-web/
======
christiangenco
There are several comments here about why using Bootstrap is bad, primarily
because it limits the workflow and freedom of the designer, and includes too
much stuff you don't need.

But that's entirely the point of Bootstrap.

It's not something that's supposed to be used by designers. It's perfectly
tailored for someone like me: a back/middleware developer who sucks at design,
but has enough sense to know that when I try to design something it looks like
poop. It's for projects I can't afford to bring on a dedicated designer for. I
can just include a single CSS file, follow a basic HTML structure, and have
something that looks good enough on every browser and mobile device. It's not
going to win any design awards, but again, that's entirely the point: without
a lot of thought on the front end, I have a design that doesn't get in the way
of what I'm actually building.

What would people like me be doing without Bootstrap?

~~~
jmathai
I'd argue that it's a great tool for companies that have paid designers on
staff too. What it provides us is a consistent and predicable framework to lay
out pages. Anyone can contribute because it's becoming a well known/understood
tool to work with.

I doubt that more than 1% of websites need such unique designs that Bootstrap
is too limiting.

~~~
saryant
A company I used to work for did exactly that. Our in-house graphic designer
took Bootstrap and customized the living snot out of it. We (the devs) could
work from the standard Bootstrap docs but the end product looked nothing like
stock Bootstrap.

Not only does it give both devs and designers a point of reference for
communication, it makes it much easier to ramp up new devs since they don't
need to learn the idioms of our style sheets.

~~~
christiangenco
Ooo, that's a really good idea. Presumably all the middle-ware people would
already be familiar with the Bootstrap way of doing things that they could
just jump right on.

I'd love to see an example of what the graphic designer was able to do with
Bootstrapped HTML. Kind of like a 2013 CSS Zen Garden.

~~~
saryant
Sample screenshot here: [http://www.coleyfederal.com/experience/case-
studies/vetsea.s...](http://www.coleyfederal.com/experience/case-
studies/vetsea.shtml)

------
jacques_chester
I sometimes use stuff because everyone else is using it. And then I wonder why
I did that.

I recently removed bootstrap from a website I have that is composed entirely
of static HTML documents [1]. It's a teaser / marketing site for my current
project. The sample sites looked nice and I figured that since I and CSS are
of basically nodding acquaintance -- why not?

I discovered that Bootstrap was just too featuresome for my requirements and I
could not, for the life of me, get it to look correct. Everything was slightly
out of place. It drove me _nuts_.

This led to a quest to find a simple stylesheet with a document-focused
layout. Such a thing is not easily found; all and sundry are bloody _obsessed_
with displaying their infinite genius through monstrously bloated code for
designs that swoosh and swoop and resize and spin and have this and that and
the captain's hat.

In the end I repurposed a stylesheet I'd commissioned as part of a wordpress
theme from a good designer I know and trust[2]. A simple columnar layout.
Done, dusted.

[1] [http://confidest.com](http://confidest.com)

[2] [http://dribbble.com/karlbright](http://dribbble.com/karlbright) . Insofar
as the stylesheet you find above is bad, that's because I've been hacking on
it for a few weeks since forking the original.

~~~
helipad
If you compile Bootstrap from its LESS files you can pick and choose which
parts you include.

Also means you can override a lot of the default mixins fairly simply.

~~~
lifeisstillgood
Is there a Dummies Guide to customising bootstrap (literally or figuratively)

I would rather not waste the time experimenting these days

~~~
darkchasma
Step 1 - Exclude the .less and .js files that you will not be using.

Step 2 - Edit or override the variable.less file.

Done

~~~
lifeisstillgood
I suspect the answer is read the source, but

A) how do I know what bits I will not be using B) how do the JS and LeSS files
interact (can I leave out the JS as easily as the less?)

~~~
darkchasma
It's done intelligently, so you don't use tables, then you leave out
tables.less. If you don't want tabs, then you leave out tabs.js.

~~~
1qaz2wsx3edc
Also the chrome dev tools has an "Audits" tab which will reveal unused CSS
rules. It's not perfect, but it gives you a good idea.

------
cheald
Mashable's current design is based on Bootstrap. You wouldn't know it to look
at it, though - we used bootstrap-sass, ripped out the pieces we didn't need,
replaced others as the design called for it, while still getting the benefits
of the scaffolding.

When you treat Bootstrap as a foundation rather than the entire presentational
layer for an application, it's really quite good. Unfortunately, many people
throw Bootstrap into an application and call it done, resulting in a very
homogeneous look-and-feel across a tremendous number of websites.

~~~
markdotto
Super interesting—I did not realize that :). If you guys ever want to pass
along feedback on how that went and what you did, please do! <3

~~~
cheald
We keep meaning to do a writeup on the build process, but so far have been way
too busy to get to it. :)

------
sgdesign
That's really impressive, if accurate.

If so many people are using Bootstrap as a default style, it makes me wonder
if maybe the default way browser style HTML element shouldn't be closer to
what Bootstrap does?

~~~
lmm
It should be. Unfortunately the web has been taken over by designers who want
to be able to control every pixel, and browser makers are too eager to please
them to change any defaults. So we get monstrosities like html5, which just
adds more and more things to html without any attempt to rationalize and
remove the bits that turned out to be a mistake.

------
exodust
If Bootstrap is taking over the web one project at a time, yours is next.
Unless... you take a stand and fight for the right to develop with the freedom
_not_ to be forced 75% of the way down the dev path before you've even begun.

At the professional web dev level, there's never been a better time to make
your own stuff from scratch in HTML and CSS. Working with designers, with UX,
with the product team - you can make interesting things happen on all screens.

Building from scratch, a good responsive HTML page or website template is NOT
"reinventing the wheel" as many bootstrappers claim. That is nonsense. The
genius of HTML and modern CSS, and their consistent operation across devices,
means it isn't much work at all to create the site you want, without using
framework training wheels.

The "mobile first" mantra has blown out of proportion and is now another
annoying catch-phrase. It's confusing too, does it mean mobile phone first or
are we talking about tablets. Or just touch screens? Does that incldue touch
screen laptops?

Is there an equivalent cliche in print? "Sticky-note first" is actually a lot
clearer and easier to understand.

"Mobile first" sounds like a command issued from above, with which we must
obey, or perish. Next, the grid system rhetoric.

The CREDIT for responsive websites belongs to modern browsers and their
consistent rendering of CSS3 and HTML. We don't _need_ bootstrap to achieve
responsive, mobile-friendly layouts. Grid layouts can be useful, but your
whole page doesn't NEED to be divided into columns and rows and spans or else
crumble in a pathetic heap.

Finally, the worst thing you can tell a designer is "hey, you can make it look
however you like, but it must conform to the 12 column grid because that's
[the way of the future; the technical limitation; how 1% of the web is doing
it". Bravo, developers telling designers to keep their layout energy in their
pants and conform to the grid. "Nope, those thumbs can't be flush with a zero
left and right margin, it will break the grid, duh!"

~~~
nhangen
I disagree. Re-scaffolding is a pain in the arse, and if I'm not using
something like Bootstrap, I'm using textexpander to re-use snippets, which in
effect, is the same thing.

Even if you don't like boostrap, I'd recommend building your own skeleton
framework that you can re-purpose without having to spend those first 10-20
hours re-building from scratch every time you start a new project.

~~~
OutThisLife
I'm pretty sure that most professional developers have their own set of
snippets and a base framework.

Bootstrap and others like it just get in the way if you already have something
built.

------
mtarnovan
1% of the indexed web, which might be less than 10% of the web at large (see
for example here: [http://www.quora.com/What-percentage-of-the-web-does-
Google-...](http://www.quora.com/What-percentage-of-the-web-does-Google-index-
and-how-has-it-changed-over-time))

~~~
rschmitty
Are there many sites not indexed by google a person would care about?

I think no one would miss a thing if we dropped all pages past 5 from the
index :P

~~~
clicks
Do you know a lot of Hacker News is not indexed by google?

------
jmduke
I don't use Bootstrap/Foundation/etc. because:

\- It doesn't really fit with my workflow. I find that when I use a framework
I end up designing the copy, content, and functionality of my templates to fit
within a given confine, which ticks me off. I prefer starting with the content
that the page has to display and building the CSS up from there (it helps that
I have more front-end experience than the average webdev.)

\- I don't like the look of them, for the most part. Yes, you can customize
them, but you can still tell who started with a Bootstrap template. No, most
customers won't care (or even know what Bootstrap is), but I care, dammit,
because I've seen a few dozen too many MVPs that never evolved their design
past the "hey, lets change the nav bar to red" stage.

That being said, this is still incredibly inspiring. These frameworks are
resulting in more people producing and publishing valuable work, which is
awesome. I can't wait to see what the future holds for these projects.

------
lechevalierd3on
Bootstrap is great to give decent UI to dev who don't like CSS or don't have a
good sense of design. But having so many website looking too a like it quite
boring. IMO bootstrap is a great tool for internal tools but should not be
used for user/client facing UI.

------
r0s
For a recent project I decided to drop all frameworks and learn responsive
design from the ground up.

I was amazed how easy it is, and how little 'boilerplate' or scaffolding was
needed.

Obviously there are tradeoffs, I'm sure my rounded corners don't work on old
versions of IE. Benefits are one less layer of complexity, and that's
powerful. I feel the same way about CSS preprocessors.

Now... I'm not going to evangelize against it, and I'm sure I'll need to use
bootstrap again. But it's great to know I don't need a framework, a grid, or
any of that extra.

------
erikpukinskis
I like Bootstrap for the same reason I like Ember. I can just throw some
fairly complex HTML, interaction etc in there and it works well. Then, as I
need to customize things, add more complex styles and interactions, I can do
that. But I don't _have_ to. It means I can hack together a prototype that
gives the impression of the complete app within a single day, and start doing
usability testing day two.

I just opened up the app I've been working on for the last 6 weeks, which uses
Bootstrap, but really a lot of it is customized. So I wondered whether I could
just pull out Bootstrap.

And looking through it, there's really not much of Bootstrap left. But then
I'm poking around and there's a dialog box with an attached suffix. And that's
not something I really want to fiddle with right now, so having one that Just
Works is great.

Of course I could poke around on the web and maybe find some purpose-built
HTML that does that task. But with Bootstrap I know that there's a wide range
of stuff that works across browsers, and I can just throw it in.

------
mstrem
Off topic, I did not know about meanpath and I was looking for a (website)
source code search engine for sometime.
[https://meanpath.com/f/](https://meanpath.com/f/) If they opened all the
search results I would surely use this often.

------
miloshadzic
Powered by is definitely an overstatement but bootstrap and foundation are
great default styles. I'm primarily a developer and they let me work on the
code without going into how things look too early.

------
semiprivate
Ok ok, first of all "The Web" and "our source code search engine" are
completely different things and ya'll fell for some rather obvious
trolling/crappy marketing talk.

Second of all, not liking bootstrap is like not liking martini shakers 'cos
you don't have any martinis to shake.

Just because you don't have a use for a tool doesn't make the tool useless and
clearly lots of people have martinis to shake.

This trolling and bickering is very non-hacker/non-productive and ya'll need
to settle.

------
northwest
It is encouraging to see that the world (both developers and "consumers")
"invests" in open source projects.

It means our resources are allocated in the most intelligent way.

~~~
adamseabrook
I know it is not quantifiable but the effectively free marketing and goodwill
that Twitter get from open sourcing Bootstrap must be worth many millions.

~~~
northwest
That may very well be, but personally, I have no objection to this at all,
b/c:

\- supporting Twitter does not do any damage (unless you'd argue it's subject
to the mass surveillance problem and should therefor be avoided)

\- you're not being locked in, you can drop it at any time without any
consequences

~~~
orenbarzilai
They are doing something good for the community with bootstrap. If they get
free marketing or anything else out of it they deserve it.

------
Brajeshwar
Bootstrap, Foundation and every other general purpose frameworks are good.
Pretty good for non-designers, actually. However, if you're a designer these
framework are more of a harsh load of excess baggage that drags down the
design. I have used Bootstrap for quite a few designs and so also with
foundation and many other multitude of frameworks. I even did tried my hands
on starting off my own grid framework.

However, of late, I've been doing it this way (rather WIP) -

* Setup a base starting skeleton code (HTML/CSS).

* Include the most important ones such as - normalize, typography and/or a grid.

Start with that and then depending on the size and complexity of the project,
add frameworks under "vendor", where bootstrap or foundation or any other
framework goes. One thing to be aware is to extract the "configs" and
"globals" from the framework you want to use and take it to your "base"
starting point.

So,

\- BASE (your starting lean code)

\- A Vendor framework (Bootstrap, Foundation or just a grid framework like
Mueller Grid or just a typography framework like Typeplate)

\- Finally, your UI Codes.

Additionally, you an add the following (never goes to production)

\- DEBUG Styles

\- Shame or design-time-only styles.

This helps in staying lean with your codes to start a project and at the same
time, ready to add in the heavy-weights if need be. The remainder is of course
the User Interface that you need to design.

Note:

\- A CSS pre-processor such as Sass or Less really help in this workflow.

\- Following a methodology like BEM[1] or OOCSS[2] can really make life easy.

\- The SMACSS[3] Book is a good one to look at.

1\. [http://bem.info/](http://bem.info/)

2\. [http://oocss.org/](http://oocss.org/)

3\. [http://smacss.com/](http://smacss.com/)

UPDATE: Here is my current organization (WIP) -
[https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...](https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%202013-07-28%20at%2011.10.54%20pm.png)

~~~
enra
Or:

1\. Use Bootstrap

2\. Customize it

Has worked for me on [https://kippt.com](https://kippt.com) &
[https://sendtoinc.com](https://sendtoinc.com) without dragging down the
design

~~~
Brajeshwar
Ah! I missed a point. The way I do, helps me pick and choose only the modules
that I need to use from the vendor frameworks.

For instance, for a simpler website which would be OK with just a grid but not
all the other modules of Foundation, I can just pick up the grid. btw,
Foundation's new medium grid, "grid-5.scss" is nice one.

------
aantix
I recently heard Mark Otto speak at a tech talk at Manilla.com. He's
incredibly humble and friendly.

He deserves all of the accolades that Bootstrap receives; what an amazing
contribution to the web dev community.

------
hackapreneur
Impressive. Big fan of bootstrap can't wait for v3 and beyond =)

------
CoryG89
Damn, you can sell a bootstrap theme for $10 dollars!? Looks pretty simple to
me.

------
wilfra
That's awesome and I'm a big fan of Bootstrap and use it for nearly every new
project.

However I think 'powered' is taking things a bit far. Maybe 'styling' 1% of
the web or 'powering the front-end' of 1% of the web. Wordpress uses the term
'powered' and that's fine because they actually do power a huge number of
sites. That doesn't apply to most large sites running Bootstrap. Take Coinbase
for example. They're still basically just running stock Bootstrap - but the
site is 'powered' by a beefy custom backend.

~~~
adamseabrook
I did have "styled by" as the original headline. Bounced it off a few people
who were not that sure what I meant so changed it to "powered by".

~~~
AndyKelley
So you checked the headline with a few people who are not in your target
audience?

~~~
tobylane
You check understanding with the low domain-intelligence end of your target
audience. That could cause confusion whether someone is the target or not.

~~~
skyebook
Just don't mention that you're choosing them based on their lesser
intelligence.

~~~
lifeisstillgood
Low domain-intelligence - probably bet put as low domain-knowledge - in other
words does this make sense to people who don't know the jargon and fashions of
web developers.

------
_sabe_
"I recently pulled a random selection of 10 websites from the sites I visit
every day and found clear Twitter Bootstrap signatures on 0 of them."

~~~
orenbarzilai
They claim to have 1% of the web not 10 or more. Thus checking 10 specific
websites is meaning less.

~~~
jacques_chester
~1% of a large sample. I think that when N = 100 million you can make fairly
strong claims, assuming non-systematic sample bias.

~~~
orenbarzilai
True. but 10 specific websites sample is still too small.

Regardless I think that the type of the website also matters to statistics. I
guess that none of the top 100 in alexa uses bootstrap but I guess that more
than 20% of the startups sites from the past year are using bootstrap.

