5 个用于Web设计的最好响应式CSS框架
推ter Bootstrap:
Bootstrap, developed by Mark Otto and Jacob Thornton, is an intuitive, popular, and a modern front-end framework for faster web development of responsive websites and web applications. It uses LESS CSS, is compiled through Node, and managed via GitHub. It has HTML and CSS based design templates as well as optional JavaScript extensions.
Bootstrap comes with numerous components that are essential to develop responsive sites including 12-grid responsive layout, a web-based bootstrap customizer, 13 custom jQuery plugins, typography, form controls and more. It works well not only in the latest desktop browsers (including IE7), but also with modern mobile devices. Best of all, it is open source and well documented.
Foundation:
Foundation, developed by ZURB, is the most popular and advanced responsive front-end framework. It is built with a powerful CSS preprocessor Sass, which help you quickly prototype and build sites or apps in less time, which works on any kind of device, any screen size and resolution.
Foundation is created with a mobile first approach, means you can start by developing websites for mobile devices first. In addition, it offers several useful add-ons that include Stencils, HTML Templates, Icon Fonts, SVG Social Icons, Responsive Tables, Off-Canvas Layouts. You can also use its customizer, if you want to keep certain elements in your design.
Skeleton:
Skeleton, created by Dave Gamache, is a beautiful boilerplate that helps web developers to create mobile friendly, responsive websites & applications. It’s a small set of CSS files, which lets you quickly develop websites that look beautiful on any type of device, either it’s a laptop screen or tablet or an iPhone.
This simple and clean framework is developed on three core principles: responsive grid down to mobile, style agnostic and fast to start. It has some notable features that include a well-structured responsive grid layout, standard media queries, awesome typography, cross browser compatibility, light weighted UI elements and much more.
UIkit:
UIkit, developed in LESS, is an open source, lightweight and modular front-end framework that helps you develop responsive, fast and robust web interfaces. It’s a complete package of small HTML, CSS, and JS components that are extendable, simple to use and easy to customize. It helps developers to write easy to maintain, well-structured and extendable code.
UIkit offers more than 30 modular components that can be combined with each other. Its grid system is based on a mobile-first approach and can adapt up to 10 grid columns. Furthermore, it features a WYSIWYG customizer that lets you adjust backgrounds, colors, sizes, buttons, badges and much more without any coding. The customizer also offers three themes to choose from: Default or Basic, Gradient and Almost Flat.
Gumby:
Gumby is an open source and amazingly responsive 960 grid CSS framework, which is built with powerful CSS preprocessor Sass. It lets you quickly customize and build responsive websites and applications with more flexibility than ever. Its key features include self-optimized fluid-fixed layout, hybrid grid PSD templates, JS libraries, different types of grids with different column variations, rapid prototyping and more.
Using Gumby, it’s very easy to design your website without any hassle as it offers a wide range of templates to choose from. It features a UI kit, which makes it easy to select design styles as per your needs. Moreover, you can enhance its functionality through its advanced customizer, which lets you adjust colors, shapes, and sizes through variables.
Comparative Overview
| Frameworks | Bootstrap | Foundation | Skeleton | UIkit | Gumby |
|---|---|---|---|---|---|
| Main Features | Responsive Layout, navigation typography, forms, buttons, media queries, .less files, js libraries | Responsive Layout, typography, source ordering, buttons, navigation, forms, media queries, js libraries | Responsive grid down to mobile, style agnostic, fast to start, has 960 grid as its base | Responsive Layout, Use small HTML, CSS and JS components, lightweight, easy to customize, mobile-first approach | Responsive, hybrid grid PSD templates, media queries, vertical alignment, typography, navigation, forms, buttons, js libraries, Simple, Flexible and Robust |
| User Base | Large | Medium | Medium | Medium | Medium |
| Latest Version | 3.0 | 4.0 | 1.2 | 1.1.0 | 2.4.0 |
| Last Released | August 19, 2013 | July 18, 2013 | June 20, 2012 | August 21, 2013 | March, 2013 |
| Browser Support | Chrome, Safari, Mozilla, Opera, IE8+ | Chrome, Firefox, Safari, IE9+ | Chrome, Firefox, Safari, IE7+ | IE9+, Chrome, Safari, Mozilla, Opera | IE8, Chrome, Safari, Mozilla, Opera |
| Website URL | getbootstrap.com | foundation.zurb.com | getskeleton.com | getuikit.com | gumbyframework.com |
| GitHub URL | github.com/twbs/ bootstrap | github.com/zurb/ foundation | github.com/dhg/ Skeleton | github.com/ uikit/uikit | github.com/Gumby Framework/gumby |
| Developer | 推ter | Zurb | Dave Gamache | Multiple | Multiple |
| License | Apache v2.0 | MIT | MIT | MIT | MIT |
| Archived File Size | 1.48 MB | 212 KB | 23.1 KB | 302 KB | 672 KB |
| CSS Reset | normalize.css | normalize.css | Inspired by Eric Meyer’s reset | normalize.css | normalize.css |
| LESS | Y | N | N | Y | N |
| SASS/SCSS | N | Y | N | N | Y |