35 个最好的响应式CSS框架和网格
1.Semantic UI Framework
Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
ExamplesDownload
2.推ter Bootstrap Framework
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
ExamplesDownload
3.Foundation Framework
Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.
ExamplesDownload
4.UIkit Framework
UIkit gives you a comprehensive collection of HTML, CSS, and JS components. It can be extended with themes and is easy to customize to create your own look.
ExamplesDownload
5.Skeleton CSS Boilerplate
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
ExamplesDownload
6.99lime HTML KickStart
Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production.
ExamplesDownload
7.Kube — Professional CSS-framework
Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.
ExamplesDownload
8.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.
ExamplesDownload
9.Yet Another Multicolumn Layout ‘YAML’
YAML is a modular CSS framework for truly flexible, accessible and responsive websites. The framework is focused on device independent screen design and provides bullet-proof modules for flexible layouts.
ExamplesDownload
10.YUI Framework
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
ExamplesDownload
11.52Framework
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.
ExamplesDownload
12.Boilerplate
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.
Download
13.FEM CSS Framework
FEM is based a lot in the 960 Grid System, but with a twist in the philosophy to make it more flexible and in my opinion more powerful.
The downside is that it’s a bit more complicated to learn, you write more code, and it’s a bit heavier. Is up to you to decide if it’s worth for you.
14.KNACSS Framework
KNACSS is supplied as three different versions : a classic that is most purposes, as well as two versions written in languages preprocessors LESS-CSS and Sass. Each version is designed to be adapted to your needs and desires. I invite you, however do not you take it before going through the Complete Tutorial as well as documented and commented code.
ExamplesDownload
15.Groundwork CSS Framework
Groundwork CSS’s flexible grid system enables you to do rapid development and scales to fit any screen size, from handheld devices to large format televisions.
ExamplesDownload
16.Gumby 2.6
Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.
ExamplesDownload
17.Unsemantic CSS Framework
Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.
ExamplesDownload
18.Tuktuk CSS Framework
Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily.
ExamplesDownload
19. 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.
ExamplesDownload
20. 978 Grid CSS
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.
ExamplesDownload
Other Important CSS Frameworks
21. Base
Super Simple Responsive Framework built to work on mobile devices, tablets, netbooks and desktop computers.
22. Profound Grid
A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
23. Fluid Baseline Grid System
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
24. Columnal CSS grid
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
25. Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
26. Goldilocks
The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.
27. Fluidable
Fluidable is a mobile first, responsive grid system that has fixed gutters and supports variable columns. It is standalone, lightweight & built using LESS.
28. Ink
It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what’s important.
29. Kickoff
The framework is not meant to be too prescriptive – we don’t want to force developers into a certain coding style – and so can be used as a starting point for any type of project.
30. Cascade Framework
Powerful OOCSS front-end framework optimised for performance and flexibility.
31. Cascade Framework Light
An even more lightweight version of Cascade Framework, containing just the bare essentials.
32. Metro UI CSS 2.0
Metro UI CSS a set of styles to create a site with an interface similar to Windows 8. This set of styles was developed as a self-contained solution.
33. Jeet
A light, semantic, responsive, CSS framework built from the best parts.
34. Responsive Boilerplate
Elegant and minimalist, made with only three main classes and 12 columns. Build with mobile first in mind, fits any screen size, pre-packed with some extra css helpers for mobile devices.
35. Susy
The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.
36. Responsive 34Grid System
34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems. 34Grid provides equally distributed columns for each row.