So, what are some useful HTML and CSS frameworks?
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 .
(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
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/).
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
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.
Here are some excellent sources for more HTML and CSS frameworks:
- 10 Essential HTML5 Frameworks
- 15 HTML5 Frameworks for Developers
- 15 More Responsive CSS Frameworks & Boilerplates Worth Considering
- 11 Best CSS Frameworks For Making Your Website Stylish
- 15 CSS Frameworks for Responsive Web Design
- 15 Best CSS Frameworks for Responsive Web Design
- 22 Responsive CSS Frameworks and Boilerplates Explained
- 8 Useful Responsive CSS Frameworks