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.<p>But that's entirely the point of Bootstrap.<p>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.<p>What would people like me be doing without Bootstrap?
I sometimes use stuff because everyone else is using it. And then I wonder why I did that.<p>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?<p>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 <i>nuts</i>.<p>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 <i>obsessed</i> 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.<p>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.<p>[1] <a href="http://confidest.com" rel="nofollow">http://confidest.com</a><p>[2] <a href="http://dribbble.com/karlbright" rel="nofollow">http://dribbble.com/karlbright</a> . 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.
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.<p>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.
That's really impressive, if accurate.<p>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?
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 <i>not</i> to be forced 75% of the way down the dev path before you've even begun.<p>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.<p>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.<p>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?<p>Is there an equivalent cliche in print? "Sticky-note first" is actually a lot clearer and easier to understand.<p>"Mobile first" sounds like a command issued from above, with which we must obey, or perish. Next, the grid system rhetoric.<p>The CREDIT for responsive websites belongs to modern browsers and their consistent rendering of CSS3 and HTML. We don't <i>need</i> 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.<p>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!"
1% of the indexed web, which might be less than 10% of the web at large (see for example here: <a href="http://www.quora.com/What-percentage-of-the-web-does-Google-index-and-how-has-it-changed-over-time" rel="nofollow">http://www.quora.com/What-percentage-of-the-web-does-Google-...</a>)
I don't use Bootstrap/Foundation/etc. because:<p>- 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.)<p>- 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.<p>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.<p>I was amazed how easy it is, and how little 'boilerplate' or scaffolding was needed.<p>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.<p>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 <i>have</i> 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.<p>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.<p>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.<p>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.
<a href="https://meanpath.com/f/" rel="nofollow">https://meanpath.com/f/</a>
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.<p>Second of all, not liking bootstrap is like not liking martini shakers 'cos you don't have any martinis to shake.<p>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.<p>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.<p>It means our resources are allocated in the most intelligent way.
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.<p>However, of late, I've been doing it this way (rather WIP) -<p>* Setup a base starting skeleton code (HTML/CSS).<p>* Include the most important ones such as - normalize, typography and/or a grid.<p>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.<p>So,<p>- BASE (your starting lean code)<p>- A Vendor framework (Bootstrap, Foundation or just a grid framework like Mueller Grid or just a typography framework like Typeplate)<p>- Finally, your UI Codes.<p>Additionally, you an add the following (never goes to production)<p>- DEBUG Styles<p>- Shame or design-time-only styles.<p>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.<p>Note:<p>- A CSS pre-processor such as Sass or Less really help in this workflow.<p>- Following a methodology like BEM[1] or OOCSS[2] can really make life easy.<p>- The SMACSS[3] Book is a good one to look at.<p>1. <a href="http://bem.info/" rel="nofollow">http://bem.info/</a><p>2. <a href="http://oocss.org/" rel="nofollow">http://oocss.org/</a><p>3. <a href="http://smacss.com/" rel="nofollow">http://smacss.com/</a><p>UPDATE: Here is my current organization (WIP) - <a href="https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%202013-07-28%20at%2011.10.54%20pm.png" rel="nofollow">https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...</a>
I recently heard Mark Otto speak at a tech talk at Manilla.com. He's incredibly humble and friendly.<p>He deserves all of the accolades that Bootstrap receives; what an amazing contribution to the web dev community.
That's awesome and I'm a big fan of Bootstrap and use it for nearly every new project.<p>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 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."