16个非常有用的前端CSS框架

标签: 网页设计 CSS WEB 前端 网站设计 | 发表时间:2013-04-19 18:34 | 作者:jackchen
出处:http://www.jackchen.cn/blog

16个非常有用的前端CSS框架
互联网发展到今天。网页是设计风格渐渐走向几个特点。一种是创意类而另一种就是框架类。创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理。好的团队都会用一种高效的框架来进行快速开发。这样的工作效率会非常的高。更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用。今天我们要分享给大家的是网页前端的框架。你会发现用这些框架会大大加快你的开发速度和开发的统一性。你一定会爱上他们里面的一个甚至是几个的。

 

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

16个非常有用的前端CSS框架

Gumby

Create rapid and logical page layout and app prototypes with Gumby Framework, a responsive CSS framework based on the 960 grid you already know.

16个非常有用的前端CSS框架

Responsive Grid System

This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.

16个非常有用的前端CSS框架

Less + Framework

Less+ Framework is a cross-device CSS grid system using media queries.

 

 

Responsive Grid System

Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn’t hard, you’ve just never used responsive.gs.

 

The Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?

 

The 1140px CSS Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

 

Skeleton

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. Skeleton is built on three core principles:

 

Foundation

The most advanced responsive front-end framework in the world.

 

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

 

Titan Framework

A CSS framework for responsive web designs.

 

Ingrid

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts.

 

BluCSS

BluCSS is also extremely responsive. It has 4 distinct stages. Desktop screen, laptop, tablet, and mobile. Resize your browser to see it in action.

 

Gridless

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

 

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

 

Gridiculous

Gridiculous is an HTML5 responsive grid boilerplate that can take your site from 1200px all the way down to 320px. Make you site look great on desktop browsers, tablets and handheld devices.

 

 


Via

 

相关 [前端 css 框架] 推荐:

16个非常有用的前端CSS框架

- - Jackchen Design 1984
网页是设计风格渐渐走向几个特点. 一种是创意类而另一种就是框架类. 创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理. 好的团队都会用一种高效的框架来进行快速开发. 更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用.

前端CSS规范整理

- - 标点符
1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解:. 所有的CSS分为两大类:通用类和业务类. 通用的CSS文件,放在如下目录中:. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件,放在如下目录中:.

介绍27款经典的CSS框架

- jessie - 蓝色理想
利用 CSS 框架,可以简化你的工作,提高工作效率. CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块. 下面给你推荐了27款优秀的CSS框架,你可以选用. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器,让 CSS 支持一些简单的编程语法,使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时,其非常简单、易用. 这是一个很棒的 CSS 预处理器,可以让开发者制作插件,要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

最佳PHP,HTML5和CSS框架大荟萃之二 HTML5框架

- - Web前端 - ITeye博客
这篇文章继续我们的框架大荟萃,如果你没有阅读前面的文章,请点击这里查看 PHP框架. 数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计. foundation是第一个支持响应式,语义化, 移动为先的开源框架. 最近Foundation5已经发布,作为当今最快速的发布版本工具,在很多方便比如开发产品和网站都很快.

使用CSS框架的优点和缺点

- SmallColor - RockUX | WEB、前端、JavaScript、PHP
CSS框架是一个软件,它为你的HTML开发提供了许多选项以供使用,可能使得你开发网站或web程序更快速更简单. CSS框架通过包括预定义代码库来达到这个目的. 一个例子是基于网格的框架,它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块. 最终来说有时候有的东西节约你的时间的代价是引发了更多地问题,导致节约的时间没有意义了.

Semantic:来自未来的CSS布局框架

- 小宇 - 雷锋网
CSS网格框架可以让你享受轻松的生活,但这依然无法掩盖它们的不足. 让我们感到幸运的是,先进技术为我们引入了新的方法去布局网页. 在我们前往了解先进技术前,我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷. 这是我从“纯化论者”口中听到过的最大的抱怨,自我在两年前创建1KB CSS Grid框架开始,CSS网格系统就规定标记和描述必须在一起.

11 款最好 CSS 框架 让你的网站独领风骚

- - 互联网的那点事
网页设计和发展领域已经成为竞争激烈的虚拟世界. 想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计. 网页编码一定要合适、精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来. 此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中.

2014 年 15 款最棒的 HTML&CSS 框架

- - 开源中国社区最新新闻
现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架. 阅读下面的框架列表,跟我们分享你的看法吧:). Toast 是一款让所有设计都尽可能简单的 CSS 框架,但它又一点也不简单. 一个全英文响应式网格很容易就构造一个简单的布局,box-sizing 功能允许用户自由的填充网页和网格边界,而不需要改变其他任何一个地方的设计.

可以从CSS框架中借鉴到什么

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
现在很多人会使用 CSS 框架进行快速建站,. 那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置. 使用 CSS 框架大大降低工作成本进行快速建站. 当然对于一些大型的项目,可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题.