HTML5 Zone is brought to you in partnership with:

I'm Dong. I love webdesign and coding. When I was student, I was working as a web designer and a web developer. I now work as an RF engineer in VietNam and run http://webdesign14.com. Dong is a DZone MVB and is not an employee of DZone and has posted 12 posts at DZone. You can read more from them at their website. View Full User Profile

20+ Modern CSS Frameworks

12.29.2011
| 29776 views |
  • submit to reddit

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love. In this post we have an overview of the 20+ most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.

1. Blueprint

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.

CSS Framework


2. Elements

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.

CSS Framework


3. 960 Grid System

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

CSS Framework


4. YUI

YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution.

CSS Framework


5. 52framework

CSS Framework


6. YAML

“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.

CSS Framework


7. BlueTrip

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.

CSS Framework


8. css-boilerplate

A simple CSS framework.

CSS Framework


9. A CSS Framework by Mike Stenhouse

CSS Framework


10. inuit.css

Yup, ‘fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file.

CSS Framework


11. SenCSs

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.

CSS Framework


12. Emastic

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.

CSS Framework



13. jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

CSS Framework


14. Fluid 960 Grid System

CSS Framework


15. Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

CSS Framework


16. Baseline

Baseline is a framework built around the idea of a “real” baseline grid.

CSS Framework


17. Compass

Compass is an open-source CSS Authoring Framework.

CSS Framework


18. FEM

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

CSS Framework


19. Formee

Fresh baked forms for your websites!

CSS Framework


20. Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

CSS Framework


21. Gravity

Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

CSS Framework


22. G5 Framework

G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

CSS Framework

 

Source: http://webdesign14.com/20-top-css-framework/

Published at DZone with permission of Dong Nguyen, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Lisa Coffey replied on Fri, 2014/07/11 - 5:52am

 Modernizr is a small script that detect support for CSS3 and adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. For example, if the browser does not support the multiple backgrounds functionality, a no-multiplebgs class will be added to the <html> element. then it will be pretty easy for you to fall back.i use this tool frequently for my website .

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.