Bootstrap 3.1 released
github.com
github.com
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.
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 believe that box is meant to be an ad, which the creators of Bootstrap use to support the project.
Perhaps the CarbonAds thing is just flaky
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.
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?
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.
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.
Get normalize.css
If you really need grids, you can get a lighter framework.
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.
[0]:https://github.com/twbs/bootstrap
[1]:https://github.com/twbs/bootstrap/blob/master/Gruntfile.js
[2]:https://github.com/twbs/bootstrap/blob/master/less/bootstrap...
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.
It could certainly be useful, but doesn't appear to me to be anywhere close to feature parity.
If you have a specific feature you'd like implemented, just open an issue.
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.
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.
Good point about 12 columns; I've opened an [issue](https://github.com/OwenVersteeg/min/issues/16).
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.
- 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.
[0]: http://purecss.io/
[1]: https://github.com/jjt/grunt-lodash-autobuild
[2]: http://lodash.com/
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.
p.s. If you wouldn't mind, could you take a second to vote in Min's button design thread: https://github.com/OwenVersteeg/min/issues/6? Thanks!
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.
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!
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.
Finally, thank you very much for your feedback!
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
As a primarily backend developer with mediocre at best front end knowledge (and terrible design sense) it is an absolute joy to work with.
EDIT: Also reading the blog post they moved license to MIT, this makes me a happy bunny as well.
Also, it's so much fun picking out components and putting them together to make it looke awesome.
It adds a very dashboard-esque appearance without any bloat.
I'll see how this port goes, but I've read some good stuff about SASS: http://css-tricks.com/sass-vs-less/
Any other points anyone can make for SASS against LESS?
Also, Compass[1] is awesome when working with sass, but I don't know if there is a less equivalent.
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.
Fortunately, now there is node-sass and it's grunt wrapper, making for vastly faster transpiling process.
http://www.solitr.com/blog/2014/01/css-preprocessor-benchmar...
I believe it's just Thomas McDonald's port made official.
Block grid docs - http://foundation.zurb.com/docs/components/block_grid.html
The way I'm reading the Zurb behavior referenced, that's what it can do for you.
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.
Disclaimer: I helped write Pure
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
(Disclaimer: I wrote Min.)
It's an extra DNS query - but thoughts on overall impact on performance?
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.
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'.
1) The button text is now huge 2) For some reason the forms all screwed up when using a:
<label> Name <input> </label>
Layout
* { 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.
Note in 3.0 release notes: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released...
Code at top of scaffolding.less: https://github.com/twbs/bootstrap/blob/master/less/scaffoldi...
Where can I see them?
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.