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

Resources that web designers could use – 30+ tools

I have gathered 30+ more tools and resources for you, new ones, of course, that could help you with your work. There are a lot of neat stuff in here, or like I like to say, a little something for everyone. Enjoy the resources, bookmark them and use them wisely.

Camera slideshow

Camera slideshow

Camera slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don’t think I will spend many hours to improve this feature, sorry.

978.gs

978.gs

The 978 grid system uses 12 columns at 54px, with extra roomy 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor. Almost every computer and tablet in the world today is capable of displaying designs built on this grid.

Ajaxplorer

ajaxplorer

A modern browser is all that’s needed to access AjaXplorer : the interface is very similar to OS-native file explorers, and all users can find their way in it. Users can easily share files or folders over the Internet, preview and edit most common file formats directly online, without having to download/upload the files to/from their local computer.

AjaXplorer is another “brick” that you can install on your web server : you may know WordPress, Joomla! or other “web-based” softwares. It’s the same technology (PHP), and AjaXplorer is normally accessed via an URL such as http://yoursite.com/ajaxplorer/.

AjaXplorer comes fully equiped with a complete users management system, securing the whole installation at once. It can also be interfaced with existing authentication mechanisms, to implement a “Single-Sign On” system and make users life easier.

TYPEDJS

TYPEDJS

Harness the power of type annotations and program specifications to make your code robust. It’s easy to get started.

Sequence: The jQuery Slider Plugin with Infinite Style

Sequence: The jQuery Slider Plugin with Infinite Style

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

PageScroller

PageScroller

Page Scroller is a simple and elegant navigation plugin that adds smooth scroll functionality to your web page. The plugin is so simple, you can animate any web site.

Glisse.js

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

Curtain.js

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

To navigate, you can use your keyboard instead the scrollbar or your mousewheel to navigate into the document. But that’s not all, there is more features! For example, you can easily add a fixed element or multiple “steps” element into a pannel.

jQuery tubular

jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.

Tinycon

Tinycon

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don’t support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

turn.js

turn.js

turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Intype

Intype

Get spoiled by well-balanced behavior. Enjoy smart select & edit, snippet insertion and management, auto-paired characters, fast syntax highlighting and code-coloring themes.

Centurion

Centurion

Centurion is an open-source CMS delivered as a flexible PHP5 Content Management Framework.

Flotr2

flotr2

Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements.

UIKit: Modern UI components for the modern web

UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it’s easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.

CodeMirror

CodeMirror

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation.

Auto-detecting Credit Card Type

Auto-detecting Credit Card Type

There was a time when people thought the internet required a completely different payment method than the real world. After a very short period of time, everyone came to realize that credit cards were actually quite well-suited to the web, and so the credit card form was born.

Backstretch

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.

Adipoli jQuery Image Hover Plugin

Adipoli jQuery Image Hover Plugin

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

The jQuery HTML5 Audio / Video Library

The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

Kartograph

Kartograph

A simple and lightweight framework for creating beautiful, interactive vector maps. The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundrets of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

jQuery File Upload

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

audio.js

audio.js is a drop-in javascript library that allows HTML5’s < audio > tag to be used anywhere.

Morris.js

Morris.js

Making good-looking graphs shouldn’t be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

XDate

XDate is a thin wrapper around JavaScript’s native Date object that provides enhanced functionality for parsing, formatting, and manipulating dates. It implements the same methods as the native Date, so it should seem very familiar.

Also, it is non-destructive to the DOM, so it can safely be included in third party libraries without fear of side effects.

TodoMVC

TodoMVC

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC… the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Solutions look and feel the same, have a common simple feature-set and make it easy for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.

cssFx

cssFx

cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!

string.js

string.js, or simply S is a lightweight (< 2k Gzipped) JavaScript library for the browser or for Node.js that provides extra String methods. Originally, it modified the String prototype. But I quickly learned that in JavaScript, this is considered poor practice.

jTable: A JQuery plugin to create AJAX based CRUD tables

jTable: A JQuery plugin to create AJAX based CRUD tables

jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript. It has several features including:
– Automatically creates HTML table and loads records from server using AJAX.
– Creates ‘create new record’ jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
– Creates ‘edit record’ jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
– Allow user to ‘delete a record’ by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the – record from the table in the page.
– Shows animations for create/delete/edit operations on the table.
– Supports server side paging using AJAX.
– Supports server side sorting using AJAX.
– Supports master/child tables.
– Allows user to select rows.
– Exposes some events to enable validation with forms.
– It can be localized easily.
– All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
– It comes with pre-defined color themes.
– It is not depended on any server side technology.
– It is platform independed and works on all common browsers.

Juice UI

Juice UI

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease. Start leveraging the power of the world’s most popular JavaScript UI library while working with familiar code in your ASP.NET projects.

Juice UI allows you to create flexible, interactive web applications quickly. Entice your users with behaviors such as drag & drop, resizing, sorting and selecting. Build first class apps with accordions, autocompletes, datepickers, sliders, and more. Juice UI provides the simplicity needed for prototyping and the robustness needed for enterprise class production applications.

DirtyMarkup

DirtyMarkup

DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”. Now supports HTML5!

Fontomas

Fontomas

This tool helps to combine iconic webfonts for your project. With fontomas you can:
– make a limited symbols subset, with reduced font size
– merge symbols from several fonts to single file
– access large collections of professional-grade open source icons

Now it’s trivial to customise fonts for your needs with 3 simple step. At first, you select needed symbols on source fonts. Then rearrange those on destination font. After that, you can download SVG font and make webpack via fontsquirrel generator or other services.

Chico UI

Chico UI

Chico UI is a free and open source collection of easy-to-use web tools for developers and designers.

KineticJS

KineticJS

You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.