Despite the recent decry that the web should consist of more than "blue buttons," I am an unapologetic lover of Twitter Bootstrap. I love Bootstrap, and I don't care who knows it.
Telerik Kendo UI framework loves Bootstrap, too. We recently released a fully responsive Kendo UI Web, and put extra care into creating seamless Bootstrap integration--not just colors, but font size, border radius, hover states and move. We know that Bootstrap is a very mature and top-notch framework, and your Kendo UI widgets will work seamlessly alongside Bootstrap.
Bootstrap does have a few drawbacks. Namely, the fact that it's comprehensive nature causes it to be of significant size if you take the whole library; ~97KB Gzipped and Minified. The concern is that you don't need all of that. For instance, if you run an audit even on the Bootstrap CSS Components page, which appears to contain every element in Bootstrap's arsenal, you will see that only 49 percent of Bootstrap is even being used.
You can, of course, create customized builds of Bootstrap. Ideally, this is something you would do before going to production. Also, it's important to note that you probably have images this size all over your site. If you remove just one of those images, you can include all of Bootstrap without increasing your footprint.
However, there are other options. Bootstrap is not the only CSS framework. If you find yourself needing a much less opinionated and very-small-mostly-layout framework, then Yahoo!'s Pure CSS might just be the thing for you. I took some time to dig into Pure this past week. I'm coming at it from a Bootstrap point of view since we have already established my "Say Anything" stance on the matter.
Pure was released several months back as a compact and minimal responsive CSS framework from Yahoo!. The entire framework Gzipped and Minified is only 19KB. That's 1/5 the size of Bootstrap if you take the whole thing. It's also quite modular, so you can just take the pieces that you need. For instance, if you take it's Base and Grid modules, you come in at just 2.1KB.
Just like Bootstrap, Pure begins its Base with the open source Normalize project. However, Pure stops here as well. The entire Base module of Pure is just Normalize. While Bootstrap goes on to add some typographical styles on top of that, Pure does not and expects that you will do that yourself if you feel so inclined.
The Pure grid system is composed of an outer <div> with either a pure-g or pure-g-r (for responsive grids) class. The first is a standard grid and the second is a responsive grid. Grid columns are defined using a fraction based system. Pure provides both 5th and 24th based systems for grids. In other words, if you wanted a grid with four columns, you would specify that each column gets one fourth.
This means that you will find yourself reducing in order to get the right layout. In other words, if you were to reduce the above grid to two columns, you can't use pure-u-2-4, because that reduces to pure-u-1-2. That may seem like a small simple thing, but it will bite you if you aren't paying attention. You will know you have done it wrong because your columns will look completely off.
The Pure Grid system comes in two flavors: Standard (pure-g) And Responsive (pure-g-r). Standard grids have columns that never stack. They will always be the same size no matter how far down you resize the browser. Responsive grids will stack columns when you get below 768px.
You may have noticed that the grids have no padding or margin. Bootstrap does this via it's use of containers. Pure expects you to implement this yourself. If we wanted to make our grids have spacing like Bootstrap's, we would need to copy in the Bootstrap breakpoints and create a new class setting its margin to auto and specifying a max-width for each media query.
You may also notice that the columns have no padding or margin between them. Pure offers you two ways to address this problem. The first way is to create an l-box class that has padding and wrap all of your column content in that class. The second is to do what Bootstrap does, which is to apply the padding to the columns themselves. Each of these solutions has their drawbacks. Solution 1 requires you to add markup to every single unit where you want padding. The second requires you to set the box-sizing CSS property which breaks in IE 7. Bootstrap 3 has dropped support for IE 7 in favor of the box-sizing ability, amongst other niceties that arrise when you drop a legacy IE version.
The Pure Forms module provides some very basic CSS for laying out forms, as well as some styling for essential form elements. Pure supports both stacked and aligned (known as horizonal in Bootstrap) form layouts. It also allows you to add classes for sizing your inputs if they are outside of the grid by using pure-input-* classes using the same fraction system as grid units. If you use a grid with your form, you only need to specify a pure-input-1 class to have the input have a 100% width to it's container.
I found the Pure forms to be very specific in the way that they target their CSS selectors. When using Kendo UI Widgets in the form, I had to revert back to using the straight up grid system with a little bit of my own CSS sprinkled in.
Or course, it wouldn't be a CSS framework without blue buttons. Pure provides basic button states and of course a "Primary" Blue button. However, it stops short of providing you with any other colors or states, but rather gives you instructions on how to style your buttons with different colors for errors, warnings, info ect.
Pure provides some very basic table styles, mostly concentrating on table headers and alternating row styles. They are by no means fancy, but they do provide a very nice minimalistic look for your tables. HTML Tables don't look particularly appealing out of the box, so it's nice that Pure provides the smallest of tweaks to make them a bit easier to look at.
While Bootstrap uses the nth-child selector to do zebra striping on the tables, Pure asks you to include a pure-table-odd class on each, well odd row. This again is Pure aiming to stay cross browser compatible as the nth-child selector is not supported in IE 8.
The only two real "components" in Pure are the Menu and the Paginator. The Menu is a very simple and roughly un-styled component that displays either vertically or horizontally. The site shows the addition of a DropDown list to the menu, but this is techically part of the YUI library, not Pure itself.
Like Bootstrap, Pure has a set of optional widgets that you can use. You might have heard of it; it's called "YUI". Pure also features a skin builder (based on the YUI skin builder) allowing you to visually customize the look and feel of it's extremely basic components. Additionally they encourage you to extend the library yourself, or use with with Bootstrap or your favorite UI library.
Pure is an extremely minimalistic framework. Aside from it's grid system, I don't find much to get very excited about. Stacked up against Bootstrap's grid system, it's not nearly as flexible, and the fraction based layout is awkward.
Kendo UI Widgets work great inside of Pure's responsive grids, and just about all of the Kendo UI Themes work great with Pure. If you are comfortable writing CSS and want an essential jumping off point, you might find Pure to be a very good option. I'm still hopelessly devoted to Bootstrap, even if it has been gaining some weight recently. Beauty is in the eye of the beholder.
Burke Holland is a web developer living in Nashville, TN and was the Director of Developer Relations at Progress. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke worked for Progress as a Developer Advocate focusing on Kendo UI.