Bootstrap raised the lowest common denominator from a 2 to about 35. You can still put together a horrid UI with bad spacing and mismatched fonts, but you have to go out of your way to get UI quality below 20.
If you have the skills to write 90+ UIs from scratch, you probably get little out of bootstrap, unless you're rapidly prototyping and need a 65% UI in four hours.
It's a great tool that improved both the minimum level of the web and the efficiency with which good UIs can be built.
If you don't need it, that's great, you're a highly skilled specialist. But it is still an extremely valuable tool for large swaths of the web.
Bootstrap has made my life monumentally easier for developing internal apps, yet I still feel like something isn't perfect. When developing mobile pages, I feel that the responsive interface is still not mobile-friendly enough for CRUD apps.
I've played with RatchetUI (Which has Bootstrap members on the team), Semantic-UI, and Foundation, but the more-widespread adoption of Bootstrap keeps dragging me back in.
I guess it can't be all things to all people. I just wish there was a more widely-adopted mobile-first framework.
I think "bland" is what they were going for since this version of Bootstrap is more barebones stylistically and it's up to the developer to make it look the way they want.
I've got to disagree, I think just having to add col size classes to divs to change how it's laid out on mobile/tablets/large monitors has helped tremendously, with 2.x it felt like we just had to hope it all worked out.
Question: If you were developing a large, content-driven site, would you bother with Bootstrap?
Bootstrap seemed a bit like overkill when I had to use it in my old job. The CSS and markup seemed excessive, and the strict JS was kind of a pain to deal with.
I know I can get something that looks half-decent up and running quickly with it, but if I'm not planning to take any visual design from it, is there much of an advantage? Is Bootstrap's grid so great in any way that I really should be using it?
Bootstrap 3 is much nicer to use than previous versions, if that's what you were using in the past. Each element is more of a barebones styling to it, which makes it easier to get what you want out of them (such as buttons). I spent a lot of time in previous versions of bootstrap just stripping out text-shadows, border-radius, gradients, and more just to get it back to a basic component.
The grid in the Boostrap 3 is pretty useful if your requirements are for a responsive layout. It really makes it pretty simple to get things going, but does pollute your html with a lot of cruft as you sometimes need to define each size within a single class attribute.
One other thing I've found is that it makes the site more maintainable, as it's easier for others to understand your CSS and layouts. It's the equivalent to being able to hire a Java programmer that knows the Spring Framework (they're plentiful, and usually know enough to not break things). The same is the case for Bootstrap. By having a common and popular framework, you have more developers that can jump right into your front-end quickly.
Also, it's easy enough to customize[1] to get only what you need. If all you need is the grids, just remove everything else. No need for the js components.
Great point. Instant familiarity for other developers is definitely a big plus when using a well-known framework such as Bootstrap. No matter how well you structure your site and name your classes, there is always an added learning curve when working with a completely custom codebase.
Or just don't use the parts of Bootstrap you don't need, it's fully modular.
Four steps for pairing BS down to your bare essentials:
1. Clone the repo [0].
2. Hide unneeded JS modules: Open ./Gruntfile.js [1], scroll down to `concat` task, delete or comment the JS files you don't need.
3. Hide unneeded CSS: Open ./less/bootstrap.less [2], delete or comment Less includes you don't need.
4. Run the `grunt` task to recompile it.
Voila, lightweight, stripped down Bootstrap with only the parts you care about, in less than 5m. The beauty of frontend build systems.
A side benefit is once you adapt a build system for your frontend, you can add all sorts of additional customizations [3] to it, BS just provides a nice initial setup for that.
True... but often I get a feature request and so rather than adding another file, it's often easier for me to just uncomment something that was previously unneeded.
Especially with a large, content-driven site, sooner or later you can make use of every single one of Bootstrap's features. I wrote code for grids and columns dozens of times myself. Each project had new requirements but somehow the core was always the same. A button here, style the list there, the headings don't work bla bla bla. With Bootstrap you can start right away because everything is already there for you. People underestimate that fact and value "lean and simple" more.
I'm veering toward thinking of bootstrap as more of a naming convention than anything else.
I've been using it recently and it's nice enough, but feels a bit heavyweight for the sorts of things I want to use it for. In future I think I'll probably do my own css, but use bootstrap naming conventions, where appropriate.
If you want to avoid polluting the HTML too much, you could always use the mixins/classes from the LESS or SASS files (https://github.com/twbs/bootstrap-sass for SASS).
Even as a frontend developer who knows CSS pretty well, I like using Bootstrap. It lets me focus on more important things.
For my workplace, the UI team will use a bit from Bootstrap, more if we're under time pressure to finish a project. They rather do stuff from scratch most of the time, but they're coming around on the ability to use mixins & slim down the CSS using the LESS.
I just wish there was a bootstrap-sass conversion that used silent classes everywhere so I could @extend my own classes to match bootstrap without having to bring in all of bootstrap. I've had to write a parser (based on https://npmjs.org/package/css ) to convert any css file to an scss file with all .classes converted to %partials so it produces no output until you @extend a class from one of the partials.
A UI Semantics is probably essential before you start authoring HTML with application semantics, like HTTP Verbs via AJAX. So there's an essential need for things like LESS and SASS to provide managers for states, easy to follow metamixins for liberally namespacing HTML through classes at least.
Bourbon Neat http://neat.bourbon.io has been my grid of choice for the past year or so. It's stupid easy to use, plus I get the lightweight power of Bourbon mixing.
Beyond that, the js portions of Bootstrap are nice, but they're certainly not unique.
My opinion of things like Bootstrap and Foundation is that they're nice, but they serve a purpose that I think isn't appropriate for a lot of uses. I think if you need to put together something fast, they're great.
If you're investing tens or hundreds of thousands of dollars in design, I think it behooves you to build a lot of your components from scratch. I might take a few components from Bootstrap, but I can't really see it being my starting point.
As for an alternative, I think doing it yourself to suit your own needs is the alternative.
Min, the extremely small (995 bytes) CSS framework. It has a Bootstrap to Min converter, has near-feature parity with Bootstrap, and is very easy to use. http://minfwk.com
Forget the grid entirely, no grid system is better than custom-coded responsive layout for the big chunks of the page.
I can't imagine how many hundreds of hours of work Bootstraps components and plugins have saved me though! Carousel, popovers, tabs, accordions, toggles, drop downs, form styles, and more all rolled into one CSS and JS file that are easy to theme! YES PLEASE
Answer: You wouldn't. Bootstrap's extremely bloated, requires jQuery, and has a huge (required) JS file. Choose a small, leaner CSS framework, like Min - only 995 bytes and it is near feature parity with Bootstrap. http://minfwk.com
How do you define 'near feature parity'? From that page, Min doesn't appear to have anything like the dropdowns, button groups, tabs, more than half the navbar options, pagination, progress bars, etc. that Bootstrap has...
It could certainly be useful, but doesn't appear to me to be anywhere close to feature parity.
Min has dropdowns and all of Bootstrap's navbar options. You'll just have to use the navbar plugin (owenversteeg/min-navbar-plugin) Progress bars, pagination, and button groups are all coming for Min 2 or Min 2.5, although demand for them is very low.
If you have a specific feature you'd like implemented, just open an issue.
I use Bootstrap without jQuery all the time, so that is not true. I also make custom builds for just the stuff I need to keep file size down. Anyways, I just looked at Min and was a bit disappointed. The demo page has the look and feel of a framework that might have existed 10 years ago -- it doesn't look polished at all and I would never even attempt to try it out based on that demo. The 2 sites built with the framework also look about 10 years old. I realize it is a lightweight framework, but so is Pure and Topcoat, and their examples look a lot better. Sure they may be a bit bigger than 995 bytes, but with high speed internet and LTE, that is less important than it was in the past. I'd rather have a larger CSS file and a better looking site.
Regarding jQuery, correct me if I'm wrong but isn't it required for dropdowns and responsive navbars?
Regarding Min, I'm wondering what you think looks 2004-ish about it. If it's the buttons, those are in for a change; please cast your vote in the button design thread here: https://github.com/OwenVersteeg/min/issues/6 If it's anything else, just let me know (via an issue or a comment) and I can fix it. I'm always open to feedback.
Also, a substantial portion of people still have slow internet speeds (example: me.) It's common knowledge that if a website is too slow people will just leave, and for lots of websites an extra few percent of users would make a difference.
It is required for dropdowns and the responsive navbar.
Also, I didn't mean to be talking down on your framework. I have personally never made a front end framework or released any sort of open source project, so it is cool that you have done that. All I am really trying to say is there is a tradeoff between file size and what a framework can offer.
You have chosen to go the smallest possible file size route, which is cool, but I would never use it in it's current state. The page advertises support for IE5.5 and it shows. It looks like something that was developed when IE5.5 was around. It is easy to support a single text input in IE5, but try building out a complex form in CSS and see what happens in old IE. Also, nothing looks finely polished. I just see a bunch of colored rectangles filled with text. There are no examples of typography beside the header tags. The padding\margins on buttons and alerts look funny. The forms are completely lacking. There is an issue with the navbar where the entire thing slides up a pixel or two when the dropdowns appear. The icons are just standard unicode characters that really have little use on the web and look dated. Again, I don't mean to knock your framework, I just think it needs a bit of polish and it is unfair to say it offers most of what bootstrap does. I'd also highly recommend you put normalize in there.
I'll defiantly keep an eye out for version 2! Good luck!
Hmm. I'll add a better main/examples page for v2, and some parts are going to be spruced up. The icons have to be unicode due to size restrictions, unfortunately. I don't see an issue with the padding/margins for the buttons and alerts, and I can't reproduce the navbar issue. Could you take a screenshot and describe what you think it should look like?
For the forms and the alerts, I'm not sure what I should add. A border-radius? A shadow? Maybe I should open a voting issue similar to the button thread.
Regarding normalize.css, I'm not sure why I would add it - Min already covers most of what it does and I'm not sure what benefit I'd get from it, seeing as adding it'd double the size of Min.
1. As stephen_g said, Min is nowhere near feature parity with Bootstrap.
2. IIRC, Bootstrap doesn't need jQuery, or its own js if all you want is a css framework.
3. You can make a custom build of Bootstrap to cut out the cruft that you don't need.
I like minimal frameworks (YUI's Pure is one of my favs), but 12-column layouts are generally superior than 10-column layouts, unless you desperately need 5 equal columns for your site.
I see that you wrote Min - I'd strongly consider changing your grids to 12 col. More divisors, and it's somewhat of an industry standard. Also, no normalize.css?
Lastly, you'll probably have a better adoption rate for your framework if you tone down the attitude and false claims. There's just no need for it.
1. Min has dropdowns and all of Bootstrap's navbar options. Progress bars, pagination, and button groups are all coming for Min 2 or Min 2.5, although demand for them is very low.
2. Nope, Bootstrap requires jQuery. This is the exact error message I get trying to run an official Bootstrap example page without jQuery:
"Error: Bootstrap requires jQuery"
3. Sure, but will you? That's a common argument against Min, but I rarely find anyone willing to modify their download of Bootstrap for two reasons: 1) No CDN and 2) They usually need to add something later and don't know why it doesn't work. Min also provides a "custom build" option which is in fact encouraged - but people ignore it for the two reasons above.
Regarding normalize.css - I don't really see why I'd need it. Min already does many things it does and they work fine; in fact, Min works in Internet Explorer 5.5 and up.
1. So you've matched a number of good features that Bootstrap has, but you seem to be missing:
- Responsive grid control based on browser size (.col-md, -sm, -xsm, -lg)
- Nestable grids (apparently)
- Fluid container
- Offsetting columns
- Column ordering
- Subheading/secondary heading text
- Lead body copy
- Text alignment classes
- Blockquote styling
- List styling (no discs, inline)
- Description elements (dl/dt/dd)
- Code/pre formatting
- Various table styles
- Responsive tables
And that's just going halfway down Bootstrap's css documentation page without touching any of the 20 or so css components or the the 12 or so js modules that Bootstrap provides. You personally might not need even 90% of them, but you cannot make the claim that Min has anywhere near the features of Bootstrap. It's disingenuous. I wouldn't make the claim for YUI's Pure[0], and it's a similarly-scoped framework. In fact, that's one of the selling points to a minimal framework - it isn't "bloated".
2. That's because that example page requires jQuery, just like many other sites require jQuery. I've used Bootstrap several times as just a CSS framework, and it works well. You obviously can't use any js modules, as all of them depend on jQ, but none of the pure-css modules do.
3. I have built custom versions of Bootstrap, so yes I would do it. I'd wager most people wouldn't, but I don't know if I see that as a fault of Bootstrap's. I applaud you encouraging modularity, and I wish that more people would go that route with Bootstrap.
Normalize is intended to give consistent results across browsers. If you've accounted for all of the discrepancies between browsers, then that's great! I'd wager that there are some cases that you haven't caught.
I understand where you're coming from wrt. monolithic frameworks, and I do wish more people would take the time to slim down their libraries. Hell, I wrote a grunt plugin[1] that looks at a site's outputted js and determines a minimal build of Lo-Dash[2], and it's only 10kB gzipped.
When I said that Min was near feature parity with Bootstrap, I was referring to the percent of use cases covered (which, in my mind, is the more important metric.) Min covers the vast majority of use cases that I've seen Bootstrap used for. Min also doesn't include CSS classes for offsetting or text alignment, as this is fairly trivial. That said, Min will soon be exactly at feature parity of Bootstrap (soon is relative; it will be by the release of Min v2.0)
Regarding jQuery, it's needed for the responsive navbar and navbar dropdowns, two fairly common use cases. It's also included in most Bootstrap sites, even if it's not used for anything else. (This is based on a quick survey of Bootstrap Expo.)
Unfortunately, from my informal survey of websites using Min, most seem to use the entire framework. That said, this makes some sense since they only save a maximum of ~700 bytes by picking and choosing, but for other projects (like Bootstrap) it makes less sense.
I'll take a closer look at normalize.css later this weekend. Thanks for the advice about a 12-column grid.
I've been using Bootstrap 3 for about three months, and to this kernel hacker new to PHP and web development (for internal apps), it's great. I can do UI that isn't a total train-wreck; what I come up with ain't perfect, but it gets the message across.
This. But why limit it to internal apps? I do b2b solutions and the services I write using Bootstrap has higher UX quality than what people there are used to. Sometimes I just change the background image and keep the default Bootstrap look.
Also, it's so much fun picking out components and putting them together to make it looke awesome.
Have a look (if you haven't already seen it) at the SB-Admin theme (v1 and v2), v1 in particular is just a very thing wrapper over stock bootstrap (so much so you can just swap out the core js and css as they get released).
It adds a very dashboard-esque appearance without any bloat.
I used to be a proponent of Compass, but I started using Bourbon[0] and Neat[1] and enjoy them more. They don't require a project definition, nor do they provide a utility to compile Sass, they're just a mixin library. And that suits me.
SASS is backed by Ruby, so you can take advantage of all of Ruby's power, including reading from the filesystem.
For instance, combined with Compass, you can read image sizes and automatically pull in width and height for a class. Or you can more easily make sprite images via a mixin that knows the size of the image and how many rows/columns you have.
I've been using bootstrap-sass since it was targeting bootstrap 2.3. They've done a great job of keeping up with bootstrap development, so it's great to see them officially supported. It wouldn't shock me at all if Bootstrap eventually moved over to SASS officially in the future.
+1 for libsass. I started using Gulp instead of Grunt for a project, and gulp-sass uses libsass. My compilation times are now sometimes sub-millisecond (albeit with only 500 lines of scss spread across 4-5 files).
At the expense of not Googling it on my own, can someone provide a quick rundown of why this is a big deal? What's the difference between Sass and LESS?
Preference really. But most of the front-enders I work with seem to prefer Sass for some reason and thus have been pretty dedicated to Foundation in the past. With this official port being introduced it makes bootstrap a more viable option to those who spend most of their time using Sass.
In addition to what has been said by others, the Rails asset pipeline supports Sass out of the box. Now Rails developers can use Bootstrap without bringing in third-party LESS support into Rails.
It's good to see how things are done after all of the bells and whistles have been stripped away. None of these are beautiful, but they help illustrate different concepts.
Love the Sass port. My one complaint with Bootstrap is that its grid system uses float instead of inline-block. Is it easy to use a different grid system with Bootstrap without breaking its other components?
Personally, I don't like Bootstrap. It's difficult to modify, requires jQuery and its own massive JS file, and is huge.
Compare that to Min, the extremely small (995 bytes) CSS framework. It has a Bootstrap to Min converter, has near-feature parity with Bootstrap, and is very easy to use. http://minfwk.com
>It's difficult to modify
The CSS is easy to change IMO. Because you can just override it.
>requires jQuery and its own massive JS file, and is huge.
Fair point on jQuery but you can use the customiser to get rid of most of the JS you won't use
For public facing web site/blogs, everyone using the same CDN might make your page load faster because there's a good chance a visitor to your site already loaded it from a CDN. So initially I was all for using NetDNA's CDN (they maintain all versions, both css and js).
However, over time I revised my opinion. During development, it's usually nicer to have all your static files associated with the project in your project directory. There might also be a situation where you're developing offline (or crappy hotel wifi) and a failed GET just messes up your whole rhythm.
Additionally, a lot of my work is internal projects. If I'm throwing together a quick web application, or even just a static site, I use bootstrap's grid, table classes, and icon packs to make that project look nicer. But I felt that for a secure application that can only be reached while on our VPN, it didn't make sense to refer the browser to a piece of javascript running out on the internet. Even if no malicious tracking code is injected into the js, I don't need to give this third party server details like 'REFERRER=https://passwordvault.corp.example.com/?q=jsmith'.
I'm against it for stuff that is not watched like a hawk. For example Google's CDN version of jQuery is fine but I'm not going to use any other random CDN Bootstrap decided to use because I don't trust it.
When RC1 came out, the CDN version had a random dev build (90% broken) but on the page they linked to it as RC1.
I compared the downloaded version .vs CDN and the files were different.
So be careful, if company hosting CDN is not well known or has a good reputation you might screw your self.
I was really hoping they would be able to come up with a simple way to turn on/off hovering in the distribution (without having to rebuild). Hovering provides unwanted "sticky" active states on touch-based devices. Given BS3 is suppose to be mobile-first I am surprised they let this go.
Fairly painless upgrade as well. We are using TWBS 3.0 on an internal admin system. I just dropped the new bootstrap-sass gem into rails and it was done. There are a few things that needed to be changed:
1) The button text is now huge
2) For some reason the forms all screwed up when using a:
We'll see how it goes—if enough folks complain, we can revisit :). I wanted the content to be in the absolute forefront with this update. That meant not affixing the top navbar and downplaying the side nav. I think it's super helpful, but again, I'm open to reversing things again if it'd be better for more folks.
I like the links on the right, but I think the main navbar should be affixed. Having to scroll all the way up to get back to it is a pain, especially on the longer pages.
That's not really an argument, and that isn't standard navigation to begin with. It's for in-page links and the links highlight as you scroll. I would argue that it's perfectly intuitive.
I like bootstrap but padding and margins are way too big, I always reduce them via .less they provide. Not everyone has retina display. Or it looks very big still in 1680x1050
...and they still haven't moved to "sanity" by adding/supporting:
* { box-sizing: border-box; }
the line that I start all my CSS with nowadays.
Quote from their docs:
> Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }, a rule which makes it so padding does not affect the final computed width of an element.
I phrased it badly when I said "minified". The HTML is available, but it's not nicely formatted - all the whitespace is gone etc. I understand this saves a few bytes but it makes life harder for anyone that tries to edit it.
It seems so strange to me that no-one else is complaining that I wonder if a nicely formatted version is available and I'm being stupid.
EDIT: This seems to have changed! Either I did something really stupid before or they have updated the HTML for the examples.
The examples seem fine now. But I swear it was different last week - I can't have hallucinated adding indentation to an example file for a demo website last week! I really don't understand what happened as no-one else seems to be complaining...
If you have the skills to write 90+ UIs from scratch, you probably get little out of bootstrap, unless you're rapidly prototyping and need a 65% UI in four hours.
It's a great tool that improved both the minimum level of the web and the efficiency with which good UIs can be built.
If you don't need it, that's great, you're a highly skilled specialist. But it is still an extremely valuable tool for large swaths of the web.