HTML and CSS Frameworks - The Blog of Rob Attfield

So, what are some useful HTML and CSS frameworks?

(Image from http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/)

HTML and CSS Frameworks

Here are some useful HTML and CSS Frameworks I highly recommend. Each of them are rich in features, extensive documentation, and good support.

Written by: Rob Attfield

Date Published: 01/16/2013

There are numerous HTML and CSS Frameworks out there that will shrink the time for people to develop their websites. They provide very elegant solutions to web development, and can make your site be viewed well on many devices (such as mobile devices, desktop p.c’s, laptops, iPads, and mini notebooks). These frameworks also work very well with concepts of Responsive Web Design – which is a special set of CSS and HTML features that enable viewing and functional compatibility across many devices (see my previous sentence).

Without ado, here are some HTML and CSS frameworks I have come across. If you know of any more, leave a comment and I will add them here .

960.gs

(Image from http://blog.creattica.com/2009/02/960-grid-system-2/).

This is the first grid system I ever come across, and I highly recommend you add this to your list of HTML and CSS frameworks. This grid system is based on a grid layout of 12, 16, and 24 columns, with “gutters” separating each column. The grid system makes constructing layouts a breeze, and you can customise these features as you please. The official 960.gs site provides excellent resources for tutorials and demonstrations – that will help you come to grips with the framework.

Bootstrap v.2.0 from Twitter

(Image from http://www.webappers.com/2012/02/01/bootstrap-2-0-released-with-lots-of-new-features/).

Twitter Bootstrap is a framework I came across while working through a Ruby on Rails tutorial. This framework provides numerous graphical, H.T.M.L, and C.S.S features that allow for a rapid development of web apps. The framework, which includes cutting-edge techniques for stylish typography, forms, buttons, tables, grids, and navigation, comes in a very small (6kb, gzipped) package.

This package doesn’t enable the responsive features by default; however, you can “turn this feature on” by including the proper meta tag and the additional stylesheet within the <head> of your document. You can see an example code snippet of this below:

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>A Title</a>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
.
.
.

jQuery UI CSS Framework

(Image from http://fuelyourcoding.com/jquery-ui-1-8-released/).

From the innovators of the popular jQuery JavaScript Framework, also comes the jQuery UI CSS Framework. This framework provides the user interface interactions, effects, widgets, and themes to produce a high quality user-interface. The framework was originally created to work with jQuery’s JavaScript framework; however the plugins included make it easy to integrate with your website’s exiting code. With the combination of this framework, and jQuery’s JavaScript framework, you can produce a powerful, elegant, and highly interactive user-interface. This will be a very worthy addition to your collection of HTML and CSS frameworks.

HTML5 Boilerplate

(Image from http://www.ilovecolors.com.ar/web-design-resources-august-2011/).

I discovered the H.T.M.L Boilerplate at the same time I found 960.gs. This is definitely one of my favourite frameworks out there – which holds a place in my collection of HTML and CSS frameworks. It contains a high quality set of features, as below:

Analytics, icons, and more

A lean, mobile-friendly HTML template.
Optimized Google Analytics snippet.
Placeholder touch-device icons.
Extensive documentation.

jQuery and Modernizr

Modernizr feature detection library.
jQuery (via Google’s CDN, with local fallback).

Normalize.css and helpers

Normalize.css v1.0.x (a modern alternative to current C.S.S resets), with
Further base styles, helpers, media queries, and print styles.

High performance

Apache settings to enhance website performance
(other server configs, a node build script, and an ant build script).

Kendo U.I

I haven’t yet tried this framework, but by having a quick look at it, I am liking it already. Kendo U.I is a high quality, feature packed package that enables you to develop highly interactive web applications. It is packed with the latest in HTML5, jQuery, Javascript, and C.S.S components – ready to give your website the wow factor. Their point and click theme builder makes it very easy for you to customise your package – getting only what you need. I highly recommend you add this one to your collection of HTML and CSS frameworks!