20+ of the Best CSS and HTML Frameworks

I have to tell you that I discovered my first CSS framework more than a year ago and I was fascinated at least. Hours of writing the same dull code and then solving the same silly bugs have been lost before it and I was almost mad about it but in the same time happy that I’ve at least found the bloody thing. Out of a personal curiosity I’ve searched all the possible CSS frameworks to see what they are bringing new and how they are helping the community and then selected the best of them for other unfortunate designers or developers out there who don’t have their hands on a CSS grid framework. I was surprised that people have already made mobile CSS/HTML frameworks but you won’t have to, cause you got them here and can use them free.

Blueprint

Blueprint CSS framework

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

What does Blueprint have to offer?

  • A CSS reset that eliminates the discrepancies across browsers.
  • A solid grid that can support the most complex of layouts.
  • Typography based on expert principles that predate the web.
  • Form styles for great looking user interfaces.
  • Print styles for making any webpage ready for paper.
  • Plugins for buttons, tabs and sprites.
  • Tools, editors, and templates for every step in your workflow.

 

960 Grid System

960 Grid System CSS framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

YAML

YAML CSS framework

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

The YAML framework is an open source project by Dirk Jesse and has been continuously enhanced since its first release in October 2005.

  • Focussed on web standards and accessibility
  • Slim framework core with numerous extensions
  • Robust, flexible layout concept (columns & grids)
  • Design patterns for typography, forms, mircoformats, rtl support ect.
  • Complete multilingual documentation

YUI 2

YUI 2 CSS framework

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include:

  • Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
  • Supports easy customization of the width for fixed-width layouts.
  • Flexible in response to user initiated font-size adjustments.
  • Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
  • Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  • Layouts less than 100% are automatically centered.
  • Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.
  • Offers full A-grade browser support.

BlueTrip

BlueTrip CSS framework

A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.

Download the package, include the images and stylesheets in your site structure, and get going!

Features:

  • 24-column grid
  • Sensible typography styles
  • Clean form styles
  • A print stylesheet
  • An empty starter stylesheet
  • Sexy buttons
  • Status message styles

Elements

Elements CSS framework

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.

Some of the awesome features:

  • Easy to use
  • Lightweight
  • Collection of preset classes
  • Lightbox included
  • An awesome mass reset
  • Adds style and usablity to external links with icons
  • Can be easily uploaded to your website hosting server
  • Free of course

52framework

52framework CSS framework

With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.

CSS3 is one of the coolest thing in the web designer world and has been a long time coming. With CSS3 you can save time designing and slicing fancy layouts. CSS3 has features like text/box shadow, rounded corners,and animations. These just a few of the many CSS3 features has to offer you

Brief Feature List:

  • rounded corners
  • text-shadow
  • box-shadow
  • html5 markup
  • grid system
  • css reset
  • and much more

elastiCSS

elastiCSS CSS framework

A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

All frameworks are the consequence of repeated patterns, they help developers get faster, repeatable and predictable results. CSS frameworks are no different. By using them you can predict the results you will obtain, and you don’t have to write over and over the same classes or CSS rules to accomplish certain results.

The people against CSS frameworks argument that because they can accomplish the same results by themselves, frameworks have no benefit. But Modularity is the first benefit, going with the DRY principle of programming.

So do you need a CSS Framework?, We would say you do. The problem here is to decide if currently available frameworks provide the features you need. Or going and develop a framework yourself..

Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code.

This way you don’t have to remember cryptic class names, just express what you want.
Make two, three, four, or auto-columns.
Let Elastic get the width of fixed width columns.
Call for same-height or full-height.

Boilerplate

boilerplate CSS framework

Boilerplate: noun standardized pieces of text for use as clauses in contracts or as part of a computer program.

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

Typogridphy

Typogridphy CSS framework

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

It also uses a typographical method know as ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs. This method in itself isn’t that difficult to accomplish — using pixels. I have created Typogridphy using ems, meaning the layout is zoomable — try holding your Ctrl key and scrolling your mouse wheel.

Emastic

emastic CSS framework

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Why should you use emastic? 
It’s:

  • Lightweight (compressed weight less then 4kb)
  • Personalized width of the page in (em,px,%)
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with “em”s
  • Baseline Grid Typography

Malo

Malo CSS framework

Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.

Why should you use Malo?

Because it’s:

  • Ultra small (compressed is 0,25 kb or 8 lines of CSS! )
  • Personalized width of the page in (%, px, em)
  • Super flexible.
  • Easy to use.
  • How Malo works?

Malo is based on the principle that every column can be divided into two, three, four and five parts.
– 100% = 50% + 50%
– 100% =~ 33,33% + 33,33% + 33,33%
– 100% = 25% + 25% + 25% + 25%
– 100% = 20% + 20% + 20% + 20% + 20%

Also you can use nested columns

100% = 50% + 50% ( and inside 25% + 25% + 25% + 25%)

I think that with this system you can cover 85% of every grid you can imagine.

The Golden Grid

The Golden Grid CSS framework

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.

Main features:

  • 970px main width
  • 6/12 grid system
  • Super lightweight((compressed weight less then 1kb)
  • Easy to learn.

1kb grid

1kb grid CSS framework

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid

When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. The 1KB CSS Grid’s convenient row and column syntax provide all the necessary scaffolding

Though simple, The 1KB CSS Grid packs the punch of a heavyweight. Nested rows? Piece of cake! A fluid grid rather than a fixed one? No problem! Explores some of the finer details of implementing the grid

Tripoli

tripoli CSS framework

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Fluid 960 Grid System

Fluid 960 Grid System CSS framework

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.

Baseline

Baseline CSS framework

Built with typographic standards in mind, 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.

Lovely CSS Framework

Lovely CSS Framework

The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.

Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.

Easy framework

Easy CSS Framework

Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.

Framework includes all 3 layers of front-end: structural, presentational and interactive what makes it the true all-in-one solution for your next front-end project.

Main features include:

– Rock-solid base HTML structure and predefined basic CSS styles for both screen and print.
– Built-in set of interactive functions, no need for a single line of JavaScript.
– Library of HTML content blocks that can be easily used and reused.
– Basic file organization and possibility of expanding the library with your own code.

The Fluid Grid System

The Fluid Grid System CSS Framework

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

Web developers have only recently started to show a real interest in grid systems. Why it has taken so many years for web developers to become interested in something that has been essential to the written medium in general since the 30s, is hard to say.

The Fluid Grid System is great for rapid prototyping as well as final production layouts because designers can quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm. Download (28 KB) the latest version of the Fluid Grid System, the .zip contains all the XHTML/CSS files you need to get started designing.

xCSS

xCSS Framework

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But, most frameworks are bulky and inflexible, aren’t they? Not xCSS! It’s lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

jQuery Masonry

jQuery Masonry Framework
(I know this isn’t a CSS framework, but a jQuery plugin but it is related and bloody useful).

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

FEM CSS Framework

FEM CSS Framework

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts.

It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.

Unobtrusive CSS Framework

Unobtrusive CSS Framework

Yeah, this is a joke. I’m testing your humor and so are they 😀

Less Framework

Less CSS Framework

Less Framework is a cross-device CSS grid system based on using inline media queries.

The idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore all the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.

All four of the layouts included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets, composed around a baseline grid of 24 px.

Sencha Touch 1.0

Sencha Touch 1.0 CSS Framework

Sencha Touch, the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices, has just hit the big 1.0.

Since its initial launch, Sencha Touch has quickly become the gold standard for developing rich mobile web applications with HTML5. And now, we’re making it available free of charge for commercial or use under the GPL.

Jo HTML5 Mobile App Framework

Jo HTML5 Mobile App Framework

jo is a lightweight JavaScript framework designed for HTML5 apps.

jo does:

  • Embrace JavaScript’s object model and loosely typed nature
  • Leverage CSS3 to handle as much of the pretty presentation and animation as possible
  • Provide a consistent and modular event model between objects
  • Wrap DOM and device-specific events into a cohesive gesture system
  • Insulate developers from different persistent storage solutions
  • Play nicely with other libraries like PhoneGap

jo doesn’t:

  • Use a lot of resources
  • Depend on other frameworks
  • Have a lot of browser dependent code
  • Require detailed knowledge of the DOM
  • Force you to deeper into its framework than you want to go
  • Use $ and other arcane looking symbols in place of proper identifiers
This entry was posted in Frameworks and tagged , , , , , , , , , , , , , . Bookmark the permalink.