When choosing a new WordPress theme, it is important to consider the framework it is built on. The right framework can make working with your theme an absolute joy. It can also make it much easier to personalize your theme’s design with custom CSS.
In this post, we’ll compare 5 of the most popular CSS frameworks around. We’ll take a look at their features, customization capabilities and limitations. Once you’re through with this post, you’ll be able to select just the right framework for your WordPress theme.
Comparing CSS Frameworks
First, let’s take a look at the main features at a glance:
| Bootstrap | Foundation | Pure | Skeleton | UIKit | |
| Developer(s) | Mark Otto, Jacob Thornton | ZURB | Yahoo | Dave Gamache | YOOtheme |
| Launched in | 2011 | 2011 | 2013 | 2012 | 2013 |
| Github Stars | 82,342 | 20,313 | 11,635 | 8,898 | 5,102 |
| Download Size | 3.2 MB | 81.3 KB | 36.6 KB | 8.11 KB | 765 KB |
| Responsive | Yes | Yes | Yes | Yes | Yes |
| Modular | Yes | Yes | Yes | No | Yes |
| CDN | MaxCDN | Yahoo | ZURB | JSDelivr | JSDelivr |
| Icons | Glyphicons | Foundation Icon Fonts | Font Awesome | None | Font Awesome |
| CSS Preprocessors | LESS, Sass | Sass | None | None | LESS, Sass |
| IE Support | IE8+ | IE9+ | IE7+ | IE9+ | IE9+ |
| License | MIT | MIT | Yahoo BSD | MIT | MIT |
Now, let’s dig into each of these frameworks.
1. Bootstrap
Bootstrap was originally developed by Mark Otto and Jacob Thornton, two Twitter developers, to ensure design consistency across the company.
Twitter eventually released it to the developer community as an open source project in August 2011.
Within weeks, it had gathered thousands of users, particularly in the SaaS startup community. It was one of the first CSS frameworks to use LESS.js, which made it much easier for startups to create polished pages within days.
As Twitter itself noted in its launch release: “Bootstrap is a very simple way to promote quick, clean and highly usable applications”
Bootstrap Features
Bootstrap is a powerful, full-fledged CSS framework with an extensive component list, responsive design, and built-in Javascript functions. Bootstrap gives you everything you need to create production grade web pages from scratch.
Some of its key features are:
- Mobile-first, responsive design.
- Grid-based layout with up to 12 columns.
- Extensive component list, including nav bars, badges, jumbotron, dropdown menus, alerts, progress bars, media objects, etc.
- Over a dozen custom jQuery plugins to create modals, dropdown menus, tabs, tooltips, popovers, and carousels.
- Large developer community (33,102 forks) that actively supports Bootstrap and creates new plugins for it.
Sites that Use Bootstrap
Bootstrap is widely used among large corporations and small startups alike. Some sites using Bootstrap are:
- Lyft.com
- Newsweek.com
- Vogue.com
- Vevo.com
Verdict
Bootstrap is everything a developer could ask for, and then some more.
Sometimes, however, this can backfire badly. Bootstrap’s “everything and the kitchen sink” approach makes it quite unsuitable for small scale projects. If you just want to put together a couple of pages, or like writing your own CSS from scratch, you won’t appreciate Bootstrap’s feature bloat.
If, however, you want to create a large website with consistent UI design, you will save hours using Bootstrap.
2. Foundation by ZURB
The Foundation CSS framework was released by ZURB, a widely respected product, in early 2011. This was around the time that responsive design took off. Foundation, with its mobile-first, RWD driven ethos, was perfectly poised to take advantage of the responsive design boom.
As Mashable notes in its report of Foundation 2.0 release, “Our favorite aspect of Foundation is the ability to hide or show elements based on the media query (screen resolution) of a website.”
While such media queries are the norm today, they were nothing short of revolutionary in 2011. This also helped Foundation become one of the most heavily used CSS frameworks of all time, with over 20,000 stars on Github.
ZURB Features
Foundation is like Bootstrap in that it is a full-featured, powerful framework designed for use in professional websites. It comes loaded with a number of features, such as:
- Developer focused with custom CLI wrappers, Sublime Text shortcuts, Libsassy support, etc.
- Faster animation rendering with GPU acceleration.
- Better mobile experience with fastclick.js support.
- Dedicated framework for developing apps.
- Large number of templates and add-ons, including icon fonts, responsive tables and stencils.
Additionally, ZURB offers consulting and personalized support for business users.
Sites that Use ZURB
Websites that use Foundation include:
- Fonts.com
- UrbanDictionary.com
- Vans.com
- Fandango.com
Verdict
Foundation is blazingly fast, delightfully powerful and incredibly capable. If yours is a business site, this framework is a solid choice over Bootstrap. Not only do you get all the above features, you also get support and consulting from one of the top-rated product design companies around.
The learning curve, however, is steep. If your objective is to get a web page out quickly, Foundation won’t make your any easier. Although there is a strong developer community for the framework, it still doesn’t have the kind of robust support Bootstrap enjoys.
3. Pure.css by Yahoo
Yahoo launched the Pure.css framework in mid-2013. Unlike Foundation or Bootstrap, both of which are based on RWD principles, Pure.css works on SMACSS – Scalable and Modular Architecture for CSS. Moreover, unlike its competitors, Pure.css is designed to be a starting point for a new project, not a complete solution.
Pure.css is modular by default. Instead of the full package, you can easily download only the components you need. The base package, for example, comes in at just 1.1KB. Grids add an extra 0.8KB, while forms and buttons will be an additional 1.5KB and 0.8KB.
This modularity makes Pure.css one of the lightest (yet extensible) frameworks you can use.
Pure CSS Features
Pure.css does not have the extensive component list of Bootstrap, or the robust support fo Foundation. It does, however, have the following features:
- Quick to load. The complete module set clocks in at just 4.0 KB minified and gzipped.
- Mobile-friendly. Besides being responsive, the small file size makes it load blazingly fast on mobile connections.
- Easily customizable. The entire framework is created to get out of your way and help you write your own code.
- Works well with other frameworks, including Bootstrap.
Sites that Use Pure CSS
Some of the sites using Pure.css are:
- LearnPythonTheHardWay.org
- InnovAsianSpace.com
Verdict
Pure.css is a good candidate if you want a barebones framework to build on top of. It is easy to customize and can be extended with select Bootstrap components to increase your productivity. You can also use it by itself for an easy to use, easy to load Twitter Bootstrap alternative.
4. Skeleton UI
Skeleton UI was developed by Dave Gamache as a low-bandwidth CSS boilerplate for creating projects quickly. This framework was first released in 2012 and has a steadily growing user base.
Although Skeleton is usually called a framework, it is largely a boilerplate. There are no extensive components list, nor are there any custom jQuery integrations. You get a simple, no-frills boilerplate that you can later customize.
Skeleton UI Features
Skeleton UI eschews conventions in favor of speed. All its features are geared to make the framework as quick to load as possible. Some of these features are:
- Entire code comes out to just 400 lines, including comments.
- Does not require any compiling or installation.
- Provides easily customizable base styles.
Sites that Use Skeleton UI
Skeleton is mostly used as a base for other frameworks. This makes it hard to find websites that are built entirely on Skeleton alone. However, as an example, you can check out this Skeleton landing page.
Verdict
Skeleton is blazingly fast, but it is also very limited in its feature set. If you are an experienced front-end developer and want something that will get out of the way, this is the framework for you. If you are a beginner and want a (relatively) empty canvas to play around on, you will love Skeleton as well.
Caution: Skeleton went through a period of neglect over the last two years. The developer, Dave Gamache, however, has reportedly started working on an improved version after Skeleton 2.0.
5. UIKit
YooTheme is a developer of Joomla and WordPress themes, plugins and widgets. It released UIKit in mid-2013 as a WordPress-focused responsive design framework. It works on the same RWD principles as Bootstrap and Foundation, but boasts a fraction of their file size.
UIKit has found favor with a number of WordPress developers. Currently, it has been starred over 5,000 times on Github so far.
UIKit Features
UIKit has a number of features meant to speed up development without added code bloat. Some of these features are:
- Large number of responsive components.
- Powerful ‘Customizer’ for most basic styles easily.
- Developer focused – includes a package for Sublime Text and easy to create themes.
- Extensive list of additional components for added functionalities, including dynamic grids, dotnavs, slidenavs, lightbox, and progress bars.
Sites that Use UIKit
Some sites built on top of UIKit are:
- Kreativan.net
- AntonellaTezza.com
- HDWallpapers.net
Verdict
UIKit has the quick-loading ease of use of Pure.css and the extensive modularity of Bootstrap. It also has a rapidly growing developer base, especially among WordPress and Joomla developers. If you want something with a relatively soft learning curve along with customization options, this can be the framework for you.
To Conclude
What framework you choose will ultimately depend on your needs, skill level and personal preferences. A framework like Skeleton UI might be wonderful for a seasoned pro who wants to get his hands dirty with the code, but can leave a beginner overwhelmed. Something like Bootstrap, on the other hand, can help a beginner get started thanks to extensive documentation, but take away control from a professional.
Ultimately, you should strive to pick something that works for your individual requirements, instead of choosing whatever framework is preferred by the community at the moment.