If you’ve worked on any front-end website projects, you know that many of the mundane tasks — like setting up your master HTML template, resetting browser CSS behaviors, along with positioning and styling HTML elements — can be extremely time-consuming. It gets even more complex when you have to design for a myriad of desktop and mobile devices or validate your code to be standards-compliant. Luckily, there are now design frameworks to make your life a tad easier.
1) Structure (HTML) — Usually a plain HTML file containing structural grids and containers for your content. Some frameworks predefine several HTML elements, and others may also include dummy filler text.
2) Presentation (CSS) — A set of prewritten CSS declarations for browser resets, grid layouts, and default styling of certain elements like typography and forms. Some frameworks take this further by including CSS media-queries for print and mobile.
Here are some factors to consider when choosing an HTML / CSS framework:
1) Learning Curve — While none of these frameworks will require you to learn a new language construct or syntax, you will need to be familiar with the different CSS classes. Some are pretty straightforward to use and remember, but others could involve a learning curve or constant reference to the documentation.
2) Size — One of the downsides of using frameworks is the extra load time they may add to your site. The key in choosing your framework is to weigh the features and functionality you need against the extras. For example, if you don’t need HTML5 and CSS3 support, opt for something more lightweight. Finally, avoid those that rely too much on dependency files.
3) Mobile Support — If you’re targeting an audience that accesses your website or application using mobile devices, it makes sense to choose a framework with support for adaptive and responsive layouts. There are also certain mobile-specific frameworks that you can consider.
Below is a list of some popular HTML / CSS frameworks categorized into different segments to make your choice even easier.
Generic CSS/HTML Frameworks
Not Just a Grid is a flexible and modular css framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.
Semantic is a pretty basic CSS grid framework with columns and gutters. It relies on simple markup without having you to learn complicated CSS classes definitions. There are some great examples on the site and its documentation is well-covered.
StackLayout is a component based CSS layout system that is highly semantic and cross-browser compatible. It’ll allow you to mockup complex design easily thanks to its semantic class names and its component support of unlimited combination of stack containers.
Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.
Mobile / Responsive CSS Frameworks
Mobile Boilerplate provides a baseline for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations.
BluCSS is a generic CSS framework with a strong focus on responsive design. It has 4 distinct stages: desktop screen, laptop, table and mobile. It does have some basic styling combined, but nothing special. Perhaps one of its beast feature is responsible image functionality whereby which images gets resized automatically depending on the browser’s width.
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles: responsive grid down to mobile, fast to start and style agnostic. Skelteon relies a lot on media queries and has support for a bunch of different mobile resolutions.
For more frameworks, please check out our Roundup of Mobile Web Application Frameworks
Magazine-based CSS / HTML Frameworks
Magazine Grid is a CSS-Framework that is bundled with common magazine design elements such as pagination, gutters and grids. Primary aimed at iPad magazine digital publication, this framework makes use of HTML5 elements to structure your page. At only 4kB in filesize, it is superlight to load fast on mobile devices.
Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5. It combines a few frameworks like the Baker Framework (covered above), jQuery, jPlayer and Less Framework. It has support for swipe, doubleTab, native slideshows as well as ability to include sound, YouTube videos, etc.
Baker is an HTML5 ebook framework for publishing interactive books and magazines on iOS devices including iPad and iPhone. You’ll start by using their CSS file to design your site in 768px and when you’re done, the Baker Framework will allow you to package and publish your application. Baker Framework introduces a few great features for your HTML5 magazine including multi-orientation and gestures.
HTML5 & CSS3 Specific Frameworks
Perkins is an impressive framework that combines latest web standards (HTML5 and CSS3) to offer a highly customizable base for your web project. It is loaded with a CSS grid style, lots of basic styles, mixins, helpers and other goodies like transparent textures, @font-face generated icons.
G5 Framework is a feature-rich framework packed with a bunch of external libraries like Modernizr, jQuery, Easy Grid, Tipsy Tool Tips, Orbit Image Slider, etc. It is based on HTML5 and sports a clean code structure. It has some extra items which I are not that necessary, but could prove useful for some – e.g: gZip, predefined robots.txt and. htaccess files, etc.
Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease. The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. Gridless takes the boring parts of making websites and webapps out. It comes packed with everything you’re tired of doing in every new project: CSS normalization, beautiful typography, a well-organized folder structure, IE bugfixes and other nice tricks.
Lightweight HTML/ CSS Frameworks
Cabin CSS is a lightweight and modular CSS framework that allows you to add ‘extensions’ when you need them. For example, you can extend the core framework by calling other CSS files for forms, grids, tables only when needed.