Twitter Bootstrap Now Powering 1% of The Web | Hacker News Reader

Twitter Bootstrap Now Powering 1% of The Web

blog.meanpath.com

140 pointsadamseabrook69 comments

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?

Exactly as I use it, too. Prior to bootstrap and others like it, I had a couple standard designs I used, but the flexibility of bootstrap is what drew me in.

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.

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.

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.

Sample screenshot here: http://www.coleyfederal.com/experience/case-studies/vetsea.s...

https://current.trovebox.com/photos/list

Precisely. My side projects aren't projects I can hire a designer for, and my design knowledge is limited to a) knowing what's shit and b) knowing my "design" is included in a).

This 1000 times. I'd also add that the majority of the public doesn't notice Bootstrap, but just sees a decently designed website (i.e. Your not going to lose mainstream consumers by using Bootstrap, might actually gain some compared to self-designing).

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

[2] 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.

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.

That's good to know, thankyou. But I think for now I will stick with what I've got.

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

I would rather not waste the time experimenting these days

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

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

Done

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?)

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.

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.

It's not quite a guide, but you can customize what to include, and make tweaks to fonts, spacing and the like, directly on the bootstrap site:

http://twitter.github.io/bootstrap/2.3.2/customize.html

It's fairly self-explanatory, and the resulting file will contain only the code you actually use, making for smaller file sizes.

Can i recommend Foundation by Zurb, it's like bootstrap but better IMHO. It allows you to download and use the parts you ned and nothing more.

so does bootstrap

Bootstrap comes in two parts and if you only install the stylesheet, there are classes that work just fine without the Javascript.

I clearly know why I chose Bootstrap for some of my sites:

i) In the past I spent a lot of time with designers and now I can design a site from scratch myself (I am not a web developer). Before bootstrap sites designed by me looked very well on Mosaic :-)

ii) If I work with a designer I need to spec a lot of details (bullets, headings, columns, colors) and how the fit together. With bootstrap I know that I can change what I don't like.

iii) I can then talk with a designer to only change what I don't like. So Bootstrap is a foundation base.

An example of this is http://www.nektra.com where I use Python Django and Mezzanine as CMS. I've not implemented yet the last designer version which is better. Another site http://www.securecouponcodes.com is just plain bootstrap and was implemented a little bit after the framework was released. If it not were by bootstrap the second site would be delayed since it was implemented only by me.

Your two examples are very nice for being a non-web developer (by which I take you mean "designer"). For a non-web designer such as myself - in fact I am pathologically bad at it - you give me some hope that with Bootstrap I can knock out some nice looking sites for some moonlighting work I'd like to undertake.

I am neither a designer nor a web developer!

I develop software for the desktop (mainly Windows). Obviously I can develop web applications but my issue was related to design. I really don't want to learn CSS beyond the basics to do trivial fixes.

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.

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

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

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?

thats kind of what i feel.

bootstrap is just a more pleasant baseline than unstyled markup.

I was about to ask if they were in the w3c. As much as I like some of bootstrap aesthetics and structure, I wouldn't want to let the default html css go.

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.

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!"

note: "Mobile first" is a term derived for the design principles, not a prioritization of usability.

Progressive enhancement allows a complex responsive design to emerge organically.

How that is implemented is up to the developer.

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.

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.

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-...)

The good thing about Bootstrap is that it is stamped on pretty much every page of a site. Our sample index was mainly front pages so it was easy to spot. Total size of the web is a very hard number to pin down. Verisign quote 252 million base domains worldwide across all TLD but we have some base domains in our index with over 1m sub domains.

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

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

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.

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.

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.

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.

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/ If they opened all the search results I would surely use this often.

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.

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.

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.

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.

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

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

That "get" will quickly become a "got", as they've finally moved away from github.com/twitter to their own independent github.com/twbs repository, as was the plan for a long time: http://blog.getbootstrap.com/2012/09/29/onward/

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/

2. http://oocss.org/

3. http://smacss.com/

UPDATE: Here is my current organization (WIP) - https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...

Or:

1. Use Bootstrap

2. Customize it

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

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.

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.

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

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

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.

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".

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

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

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

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.

"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."

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

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

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.

I think the comment's point is that good sites are not using it, not that 10 sites is a good sample size.

1%, 1 percent, 1 per cent, 1 per hundred. 1% = 1/100 :)

Reply on news.ycombinator.com