Pure CSS vs Bootstrap

Twitter Bootstrap has been around a while now, and it has been used to aid developing websites in many examples now, just see the unofficial tumblr: built with bootstrap. It’s not surprising many people have chosen Twitter Bootstrap, it makes styling a website a breeze, and adds a lot of useful functionality. Bootstrap provides CSS and JavaScript to provide a great user experience with minimal effort on the designers part. However as Bootstrap provides a distinct set of styles, it’s not a surprise a number of competitors are springing up.

What is Pure CSS?

So Bootstrap is fairly common and well known. But what is Pure CSS? Quite simply put, it is just that. Pure CSS is a CSS library and nothing more. It is a BYOJS solution (Bring your own JavaScript). This is what made it an attractive prospect to me so I thought I would investigate it further.

Pure CSS is owned by the YUI (Yahoo User Interface) team. It is open source, and at the time of writing, still early in the development process, the current version is 0.2.0. What Pure CSS aims to do is bring a set of CSS classes to aid in the development of grid, and responsive grid websites, provide a number of classes to easily create common user interface elements (menus and forms), and produce a set of styles to create nice looking buttons, tables and more.

The nice thing about pure is it is designed to be lightweight. The just CSS philosophy is different to Bootstrap, and a welcome change. Both approaches have their merits. Bootstrap provides a more complete solution, bringing icons and JavaScript, but in this respect, sometimes websites built with Bootstrap can end up too alike. This is still an option with Pure, but I feel it better focuses on the key elements, and still leaves a lot of major choices to the designer.

Pure has a very nice graphic look to it. It focuses on being clean, flat, and uncomplicated. Combining this with some lightweight fonts creates a very modern look to a website, fitting in with the latest design trends. Clean, narrow, lightweight lines, and plenty of padding produce an elegant design, that is very pleasing to use.

When would I use Pure?

What Pure is good at is providing a responsive grid. This responds nicely with elements dropping below others at smaller screen sizes based on the proportion of the grid each element takes up. The grid is also incredibly easy to use. Pure CSS uses proportions of the screen size rather than number of columns to cover. A class such as  pure-u-1-6 would take up 1/6th of the screen width, and pure-u-2-5 2/5ths of the screen width. Useful indeed as you can create any form of combination of fractions. Every fraction up to 1/24th is covered with a class.

Menus are also a breeze. A simple  <ul> with a class of  pure-menu does the hardwork, and  pure-menu-open will make sure the menu stays open (rather than being a drop down). Useful helper classes are also provided for menu headers, separators, and nested menus. Further to this, it is easy to create a horizontal menu from a vertical one by just adding  pure-menu-horizontal , everything else just adapts. Tables and forms are not left out. They both keep the same form of elegance, with minimal effort in the markup. To see all the examples, check out the Pure CSS website.

Why should I use Pure CSS?

Pure is elegant, simple, and lightweight. It is a dream to work with. The beauty of Pure CSS is it is built to be extensible. You can simply add a few styles in your own CSS and change the look to your website. YUI have even provided a tool, Skin-builder, just for this. It gives you a large number of options to change the padding, and colors in your scheme. You can also set to include or exclude specific elements. This will mean you can benefit from the basic set of styles, without looking like a clone of other websites doing the same.

Bootstrap or Pure CSS?

It’s an easy decision which to use in most cases. I don’t really see the two as being competitors. Bootstrap is a complete solution. It provides icons, styling, and a number of UI elements that require JavaScript (Alerts etc.). If you want to develop a complete solution based on a framework, then Bootstrap is a great option. However I see the need for just a lightweight CSS library for providing nice styling for simple UI elements. Pure CSS does this. It is lightweight so will not add bloat to your application, but gives you a really nice basis to design your site on top of. Quite simply, I see Pure CSS as a library to provide a good basis for a UI, whereas Bootstrap is designed for the complete UX (User Experience).

I would certainly recommend you try out Pure CSS. It is early in development too, so you can recommend any changes to the guys behind the project, they are very helpful and listen. It is also Open Source so you can contribute and help fix any issues you find too! It seems a very exciting project, and could have a great future, so I would urge anyone that is interested to contribute, and join in the discussions, to help provide an excellent UI library built entirely in CSS.

8 thoughts on “Pure CSS vs Bootstrap

  1. I like PureCSS because small and simple. But I want to combine it with jQuery, to make modal dialog, pulldown menu. Where I can sample dialog and pulldown menu built with PureCSS and jQuery?

  2. Hello and thank you for your great review on Pure CSS, i recently came across it and quickly started using it over the other popular methods such as Bootstrap or Foundation and so far it is fantastic. I was searching for just CSS kits and found this, it is way better and so nice and light compared to frameworks that look the same and are bloated, i wanted to stand out as well be super fast loading for my pages, well Pure CSS from Yahoo did it for me 🙂 i can just find all sorts of cool other CSS snippets and build awesome websites without the need of boring boxed style by Strap or Foundation..iam making something really cool for WordPress i will release it soon on GitHub let you know once im done for everyone to use.

  3. The main feature that Pure has over Bootstrap and Foundation is the grid. Pure uses ‘display: inline-block;’ instead of float and uses other clever CSS to eradicate any inaccuracies that ‘inline-block’ is often accused of. The primary advantage of this is internationalisation; change the text direction to right-to-left (dir=”rtl”) and the whole layout reverses. Try this with a float-based layout and any content that is inline, or inline-block will reverse, but the layout will remain the same.

    The Pure grid also incorporates the W3C Flexible Box standard which will probably be the future of CSS layout (great article on cross-browser support: https://css-tricks.com/using-flexbox/).

    My personal experience of Pure is similar to others here; it’s simple and doesn’t get in the way and I like the philosophy behind it; Bootstrap and Foundation are large systems that work well if you want a ready made UI out-of-the-box. Personally, I don’t like some of these framework’s solutions. For instance, Foundation’s responsive table involves an ugly cut-and-shunt of two tables, so semantically it is no longer one table; the header resides in one table and the data resides in another. This is completely against the concept of Semantic HTML where the meaning of the data is conveyed by the machine readable meaning of standardised elements and attributes.

  4. Yes PureCss from yahoo is so much faster and smoother, as well you can make websites that are just as pretty or better then with the other two major frameworks. we use Pure on our WordPress theme for our company Yolo Seo as well and load times are 98 Google page speed for mobile.

Leave a Reply