20+ Modern CSS Frameworks
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.
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.
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
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.
5. 52framework
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.
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.
A simple CSS framework.
9. A CSS Framework by Mike Stenhouse
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.
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.
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.
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.
15. Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making
mobile first responsive, cross-browser websites with beautiful
typography.
16. Baseline
Baseline is a framework built around the idea of a “real” baseline grid.
17. Compass
Compass is an open-source CSS Authoring Framework.
18. FEM
FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts
19. Formee
Fresh baked forms for your websites!
20. Less Framework 4
Less Framework is a CSS grid system for designing adaptive websites.
It contains 4 layouts and 3 sets of typography presets, all based on a
single grid.
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.
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
