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

简介:

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表,跟我们分享你的看法吧:)

CSS 框架

1) Toast

Toast 是一款让所有设计都尽可能简单的 CSS 框架,但它又一点也不简单。一个全英文响应式网格很容易就构造一个简单的布局,box-sizing 功能允许用户自由的填充网页和网格边界,而不需要改变其他任何一个地方的设计。


14115205_2yv7.png

2) Yaml

Yaml 是一个模块化的 CSS 框架,可以用来构造灵活,可访问和响应式的页面。YAML 提供一系列完整的匹配构建模块来创建复杂的网页界面。网格,导航,表格,字体排版模块和所有附件都能进行无缝的协同合作。所有的布局模块都能兼容 HTML5 和 CSS 3,还很容易兼容其他最新的 web 开发技术。

特性:

灵活的网格系统

主题支持的灵活形式的工具包

聚焦于 web 标准和可访问性

为所有标准元素进行排版优化

利用匹配构建模块进行快速的原型开发

命名空间避免与第三方 CSS 冲突

为 HTML5 和 CSS3 做好了充分的准备

非常小的框架核心 (5.9 kB)

建立在 Sass 基础上


<a href=http://static.oschina.net/uploads/img/201401/14115206_xt3o.png" >

3) Gumby

Gumby 2 是建立在 Sass 的基础上的,Sass 是一款非常强大的 CSS 预处理器,允许用户自主快速的开发扩展 Gumby — 同时提供很多新的工具来自定义和扩展 Gumby 框架。Gumby 是一个响应式的以及 960 像素宽度的 CSS 网格框架,支持 PC、平板和手机屏幕显示。类似 Twitter 的 Bootstrap,它包括一个Web UI工具包,有好看按钮,表格,导航+标签和一个很小的JavaScript文件Gumby 2 是一个非常棒的响应式 CSS 框架,为了更好的生存,网页应该对移动端更友好。


14115207_RM8p.png

4) Responsive

Responsive GS 是一个流体网格 CSS 框架,用于快速开发响应式的 Web 网站。Responsive GS 提供三种风格:12、16 和 24 列,使用 media queries 支持所有标准设备。


<a href=http://static.oschina.net/uploads/img/201401/14115209_jMCv.png" >

5) Less Framework

Less Framework 是一个 CSS 网格系统,用来设计自适应网页,包括 4 个布局和 3 套字体预设置,所有都是基于单个网格的。


<a href=http://static.oschina.net/uploads/img/201401/14115211_bDaW.png" >

6) Columnal

Columnal CSS 框架是一个众多自定义代码组合成的“混合体”,是一款富有弹性的 CSS 框架,用来进行响应式网页的快速原型开发。灵感来源于 960 Grid System 。


14115212_eFEW.png

7) Foundation

Foundation 5 是目前最快的 CSS 构建框架了,里面包括了丰富的特性,让你更快更好的学习里面的代码。Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。


14115215_51fW.png

8) Susy

Susy 是一个基于 Natalie Downe 的 CSS Systems 的 CSS 框架,通过 Sass 实现,利用 Compass 来简化,可用于静态网站以及各种框架应用。


14115215_2rE7.png

9) Kube

Kube 足够的简单,足够小,具有很强的自适应能力,是个响应式的 CSS 框架。它拥有最新最炫的网格和漂亮的字体排版,没有任何样式绑定,给用户以绝对的自由。


<a href=http://static.oschina.net/uploads/img/201401/14115216_zWAN.png" >

10) Bootstrap

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。


<a href=http://static.oschina.net/uploads/img/201401/14115217_v6iy.png" >

HTML 框架

11) HTML Kick Start

HTML KickStart 拥有极简的 HTML5 ,CSS 和 JS 构建模块,能够快速生成网页。


113328_lg8r_865233.png

12) HTML5 Boilerplate

HTML5 Boilerplate 能帮助用户快速的构建健壮,适应能力强的 web 应用或者页面,只需要一个小小的集成了 100 多个开发者智慧和努力的开发包就可以开发属于你自己的网页。


14115219_0Jln.png

13) Skeleton

Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。


14115220_kmzd.png

14) Montagejs

ontageJS 是一个现代化,功能齐全的 HTML5 框架,用来快速创建一个单页应用。Montagejs 使用通过了时间考验的设计模式和软件的各种原则来开发你的项目,使用户的网页得到很好的高质量的用户体验。同时提供了很好的设计者和开发者更好的协同合作 的方式。Montage 打开web开发的新的世界的机会。


<a href=http://static.oschina.net/uploads/img/201401/14115221_BDjN.png" >

15) Zebra

zebra 是一个 web UI 设计框架,JavaScript 库,遵循简单的 OOP 设计理念,提供基于富 UI 设计的 HTML5 画布,包括 Java 到 Javascript 的转换工具。


14115222_yRuq.png

via designzum.com

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
806 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
664 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1061 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
294 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
626 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
274 24
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
314 2
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
779 7
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
440 5