8 ms·

Twitter Bootstrap Now Powering 1% of The Web

140 points by adamseabrook 13y ago

sgdesign 13y ago
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?
- AdrianRossouw 13y ago
  thats kind of what i feel. bootstrap is just a more pleasant baseline than unstyled markup.
- agumonkey 13y ago
  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.
- lmm 13y ago
  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.
_sabe_ 13y ago
"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 13y ago
  They claim to have 1% of the web not 10 or more. Thus checking 10 specific websites is meaning less.
  - jacques_chester 13y ago
    ~1% of a large sample. I think that when N = 100 million you can make fairly strong claims, assuming non-systematic sample bias.
    - orenbarzilai 13y ago
      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.
  - damoncali 13y ago
    I think the comment's point is that good sites are not using it, not that 10 sites is a good sample size.
- klapinat0r 13y ago
  1%, 1 percent, 1 per cent, 1 per hundred. 1% = 1/100 :)
jacques_chester 13y ago
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 13y ago
  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.
  - jacques_chester 13y ago
    That's good to know, thankyou. But I think for now I will stick with what I've got.
  - lifeisstillgood 13y ago
    Is there a Dummies Guide to customising bootstrap (literally or figuratively) I would rather not waste the time experimenting these days
    - darkchasma 13y ago
      Step 1 - Exclude the .less and .js files that you will not be using. Step 2 - Edit or override the variable.less file. Done
wilfra 13y ago
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 13y ago
  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 13y ago
    So you checked the headline with a few people who are not in your target audience?
    - tobylane 13y ago
      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 13y ago
        Just don't mention that you're choosing them based on their lesser intelligence.
        lifeisstillgood 13y ago
        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.
mtarnovan 13y ago
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-index-and-how-has-it-changed-over-time http://www.quora.com/What-percentage-of-the-web-does-Google-...)
- adamseabrook 13y ago
  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.
- rschmitty 13y ago
  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 13y ago
    Do you know a lot of Hacker News is not indexed by google?
northwest 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      They are doing something good for the community with bootstrap. If they get free marketing or anything else out of it they deserve it.
  - erlend_sh 13y ago
    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/ http://blog.getbootstrap.com/2012/09/29/onward/
hackapreneur 13y ago
Impressive. Big fan of bootstrap can't wait for v3 and beyond =)
deleted 13y ago
[deleted]
mstrem 13y ago
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.
- KatieYamamoto 13y ago
  Have you seen http://nerdydata.com http://nerdydata.com? It's some kinda of credit based search engine for source code.
miloshadzic 13y ago
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.
exodust 13y ago
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!"
- bitfed 13y ago
  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.
- nhangen 13y ago
  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.
lechevalierd3on 13y ago
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.
Brajeshwar 13y ago
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%202013-07-28%20at%2011.10.54%20pm.png https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...
- enra 13y ago
  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 13y ago
    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.
jmduke 13y ago
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.
christiangenco 13y ago
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?
- Oculus 13y ago
  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).
- tlongren 13y ago
  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.
- jmathai 13y ago
  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 13y ago
    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.
cheald 13y ago
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 13y ago
  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 13y ago
    We keep meaning to do a writeup on the build process, but so far have been way too busy to get to it. :)
r0s 13y ago
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.
semiprivate 13y ago
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.
erikpukinskis 13y ago
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.
aantix 13y ago
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.
CoryG89 13y ago
Damn, you can sell a bootstrap theme for $10 dollars!? Looks pretty simple to me.

140 points by adamseabrook 13y ago

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?

AdrianRossouw 13y ago
thats kind of what i feel. bootstrap is just a more pleasant baseline than unstyled markup.
agumonkey 13y ago
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.
lmm 13y ago
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.

_sabe_ 13y ago

"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 13y ago
They claim to have 1% of the web not 10 or more. Thus checking 10 specific websites is meaning less.
- jacques_chester 13y ago
  ~1% of a large sample. I think that when N = 100 million you can make fairly strong claims, assuming non-systematic sample bias.
  - orenbarzilai 13y ago
    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.
- damoncali 13y ago
  I think the comment's point is that good sites are not using it, not that 10 sites is a good sample size.
klapinat0r 13y ago
1%, 1 percent, 1 per cent, 1 per hundred. 1% = 1/100 :)

jacques_chester 13y ago

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 13y ago
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.
- jacques_chester 13y ago
  That's good to know, thankyou. But I think for now I will stick with what I've got.
- lifeisstillgood 13y ago
  Is there a Dummies Guide to customising bootstrap (literally or figuratively) I would rather not waste the time experimenting these days
  - darkchasma 13y ago
    Step 1 - Exclude the .less and .js files that you will not be using. Step 2 - Edit or override the variable.less file. Done

wilfra 13y ago

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 13y ago
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 13y ago
  So you checked the headline with a few people who are not in your target audience?
  - tobylane 13y ago
    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 13y ago
      Just don't mention that you're choosing them based on their lesser intelligence.
      - lifeisstillgood 13y ago
        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.

mtarnovan 13y ago

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-index-and-how-has-it-changed-over-time http://www.quora.com/What-percentage-of-the-web-does-Google-...)

adamseabrook 13y ago
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.
rschmitty 13y ago
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 13y ago
  Do you know a lot of Hacker News is not indexed by google?

northwest 13y ago

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 13y ago
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 13y ago
  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 13y ago
    They are doing something good for the community with bootstrap. If they get free marketing or anything else out of it they deserve it.
- erlend_sh 13y ago
  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/ http://blog.getbootstrap.com/2012/09/29/onward/

hackapreneur 13y ago

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

deleted 13y ago

[deleted]

mstrem 13y ago

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.

KatieYamamoto 13y ago
Have you seen http://nerdydata.com http://nerdydata.com? It's some kinda of credit based search engine for source code.

miloshadzic 13y ago

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.

exodust 13y ago

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

bitfed 13y ago
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.
nhangen 13y ago
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.

lechevalierd3on 13y ago

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.

Brajeshwar 13y ago

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%202013-07-28%20at%2011.10.54%20pm.png https://www.dropbox.com/s/3airw24jdn3snsh/Screen%20Shot%2020...

enra 13y ago
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 13y ago
  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.

jmduke 13y ago

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.

christiangenco 13y ago

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?

Oculus 13y ago
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).
tlongren 13y ago
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.
jmathai 13y ago
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 13y ago
  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.

cheald 13y ago

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 13y ago
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 13y ago
  We keep meaning to do a writeup on the build process, but so far have been way too busy to get to it. :)

r0s 13y ago

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.

semiprivate 13y ago

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.

erikpukinskis 13y ago

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.

aantix 13y ago

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.

CoryG89 13y ago

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