5 个用于Web设计的最好响应式CSS框架

jopen 10年前

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

5 个用于Web设计的最好响应式CSS框架

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.

5 个用于Web设计的最好响应式CSS框架

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.

5 个用于Web设计的最好响应式CSS框架

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.

5 个用于Web设计的最好响应式CSS框架

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.

5 个用于Web设计的最好响应式CSS框架

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
If you have any idea, suggestion or query, please leave that in the comments section given below.