必须去收藏14个响应式布局的前端开发框架,未来
分类:摄影教程

对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用。

前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。


Bootstrap    

  1. CSS Desk : An online CSS Sandbox

本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。

  • 起步
  • CSS
  • 金沙贵宾会登录官方网站,组件
  • JavaScript插件
  • 定制

金沙贵宾会官网 1

使用这些前端框架,有如下好处:

这是一个支持即时预览的在线CSS编辑工具,无需安装任何形式的插件或是软件,就能在线编辑CSS文件,并且支持样式的即时预览,非常方便,尤其对于新手来说,绝对是一个入门CSS的好工具。

 

  • 关于
  1. Prefix Free
  • 跨浏览器。这一点已被证实。
  • 一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。
  • 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
  • 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

    

金沙贵宾会官网 2

 

CSS

设置全局CSS样式,基本的HTML元素均可以通过class设置样式并得到增强效果,还有先进的栅格系统。

        

  • 概览
    • HTML5文档类型
    • 移动设备优先
    • 响应式图片
    • 排版和链接
    • Normalize
    • Containers
  • 栅格系统
    • 简介
    • 媒体查询
    • 栅格选项
    • 案例:从堆叠到水平排列
    • 案例:移动设备和桌面
    • 案例:手机、平板和桌面
    • Responsive column resets
    • 列偏移
    • 嵌套列
    • 列排序
    • LESS mixin和变量
  • 金沙贵宾会员登录,排版
    • 标题
    • 页面主体
    • 强调
    • 缩略语
    • 地址
    • 引用
    • 列表
  • 代码
  • 表格
    • 基本案例
    • 条纹状表格
    • 带边框的表格
    • 鼠标悬停
    • 紧缩表格
    • 状态class
    • 响应式表格
  • 表单
    • 基本案例
    • 内联表单
    • 水平排列的表单
    • 被支持的控件
    • 静态控件
    • 控件状态
    • 控件尺寸
    • 金沙贵宾会官网,帮助文本
  • 按钮
    • 选项
    • 尺寸
    • Active state
    • 禁用状态
    • 可作按钮使用的HTML标签
  • 图片
  • 工具class
    • 关闭按钮
    • Carets
    • 快速设置浮动
    • Center content blocks
    • 清除浮动
    • 显示或隐藏内容
    • 针对屏幕阅读器的内容
    • 图片替换
  • 响应式工具
    • 可用的class
    • 打印class
    • 测试用例

  

你有常常写 CSS Code 吗?你有觉得给每个游览器添加前缀很麻烦吗?今天推荐一款 Javascript 解决你的问题!

InK

概览

深入了解Bootstrap底层结构的关键部分,包括我们让web开发变得更好、更快、更强壮的最佳实践。

特点:

金沙贵宾会官网 3

HTML5文档类型

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>  <html lang="zh-cn">    ...  </html>

处理 <link> 或者 <style> 元素,在需要的地方自动添加前缀

Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。

移动设备优先

在Bootstrap 2中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是一个单一的文件。


处理新的 <link> 或者 <style> (也就是网页加载完后再添加的新标签,则需要一款插件:Dynamic DOM plugin)

 

缺点:

  • HTML&CSS:布局、导航、排版、图标、表单、提示框、表格 
  • JS:Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为(停靠、折叠、关闭)
  • 其他:Sass Mixins

不支持 @import 文件

 

不支持跨域(cross-origin)链接的样式表

GroundworkCSS Beta

* 不支持 filter

金沙贵宾会官网 4

浏览器支持:

GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome

 

  1. CSS Horus : Responsive CSS Framework
  • HTML&CSS:网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
  • JS:导航、制表符(Tab)、提示框、Cycle2
  • 其他:Sass Mixins

金沙贵宾会官网 5

 

CSSHórus是一个CSS框架,用于快速创建可以跨浏览器的响应式和移动网站。

Ivory

该框架有一个16列的网格和并为复位,排版,表格,列表,表格与按钮提供基本样式。

金沙贵宾会官网 6

  1. SoFresh : Automated Browser Refreshes for CSS Update

这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。

金沙贵宾会官网 7

 

sofresh也利用了书签小程序,你直接拖拽对应的图标,然后就可以激活CSS刷新功能。

  • HTML&CSS:网格、排版、表单、按钮、提示框、页码、面包屑导航(breadcrumb)、列表、表格
  • JS:提示框、制表符(Tab)、切换开关(Toggle switch)、折叠
  1. CSS FilterLab by Adobe

 

金沙贵宾会官网 8

ZURB

CSS FilterLab 是Adobe 创建的一个免费的 CSS 滤镜设置和演示工具:CSS FilterLab,它可以让你给一张图片设置各种不同滤镜效果或者叠加,并且可以通过简单拖动定义不同的值,查看生成的效果以及获取相应的 CSS 代码。

金沙贵宾会官网 9

另外 CSS FilterLab 还有一个动画的功能,让你使用 CSS 滤镜创建基于关键帧的动画,并且还可以保存下来以供将来使用。CSS FilterLab 是一个开源程序,你可以到 GitHub 去下载。

Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

  1. Kube Framework : A Minimal Responsive CSS Framework

 

金沙贵宾会官网 10

  • HTML&CSS:网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航(breadcrumbs)、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
  • JS:下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局(通过转换图片大小来实现)、旅游导航、麦哲伦全局导航(Magellan Sticky Nav)、Orbit图片滑动幻灯片插件等
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SCSS Mixin

Kube Framework 是一个非常简洁的 CSS 框架,整个框架就是一个简单的 CSS 文件,但是已经包含了响应式设计的布局(responsive layouts)。

 

Kube 虽小,但是五脏俱全,它包含了表单,网格,按钮,表格,文字排版以及链接和图片的样式。并且还提供了 LESS 文件,对于习惯使用 LESS 语法格式写 CSS 代码的同学也非常方便。

Grumby

  1. Easings.net : CSS and JavaScript for Easing Functions

金沙贵宾会官网 11

金沙贵宾会官网 12

Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。

jquery.easing plugin,这个插件可以帮助你生成不同类型的动画风格。使用的方式都是不同的easing功能,例如:easeInCirc;easeOutCirc ;easeInOutCirc 等等

 

easing简单说来是动画运行速度。 通过控制它,你可以得到不一样的动画效果,比如,均匀移动,加速移动,减速移动等等。

  • HTML&CSS:网格、表单、按钮、导航、标签、Entypo图标
  • JS:下拉、浮窗、制表符(Tab)、开关与转换(Toggles & Switches)
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SASS和Compass

 

HTML KickStart

金沙贵宾会官网 13

该框架集合了HTML5、CSS和JavaScript,帮助开发人员快速开发Web产品。它覆盖了所有UI组件,同时也包含一些有用的JavaScript插件。

 

  • HTML&CSS:网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单
  • JS:菜单、代码高亮插件、制表符(Tab)、幻灯片播放、表单验证
  • 其他:CSS帮助文档

 

Maxmertkit

金沙贵宾会官网 14

Maxmertkit拥有完整的文档,包含大量实例,并且提供了拖拽生成代码的功能。

 

  • HTML&CSS:网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示
  • JS:按钮、旋转木马、通知、弹出框、滚动条、制表符(Tab)
  • 其他: Sass、Coffee脚本语言

 

Twitter Bootstrap

金沙贵宾会官网 15

大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件,Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

 

  • HTML&CSS:网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏
  • JS:模态窗口(Modals)、提示效果(Tool Tips)、“泡芙”效果(Popovers)、滚动监控(Scrollspy)、旋转木马(Carousel)、输入提示(Typeahead)等等。
  • 其他:定制器(Customizer)、 LESS CSS

 

Skeleton

金沙贵宾会官网 16

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

 

  • HTML&CSS:GRid、排版、按钮、表单、媒体查询(Media Queries)

 

Kube

金沙贵宾会官网 17

Kube是一款最小化的,支持响应式的前端框架,包括一个简洁的CSS文件,用于方便地创建响应式布局,包括了两个JS文件来完成Tab以及页面的按钮操作。

 

  • HTML&CSS:排版、网格、表单、表格、按钮、导航、图标
  • JS:按钮、制表符(Tab)
  • 其他: LESS CSS

 

Helium

金沙贵宾会官网 18

Helium是一个前端响应式Web框架,使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation,事实上,Helium使用了两者不少的代码。但与这两个框架不同的是,Helium设计更加轻量级,而且更容易修改。Helium只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。

 

  • HTML&CSS:网格、按钮、排版、表单
  • JS:下拉、表单验证
  • 其他:Sass、Compass

 

The Markup Framework

金沙贵宾会官网 19

Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

 

  • HTML&CSS:布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单
  • JS:没有JavaScripts,只有单纯的CSS

 

Topcoat

金沙贵宾会官网 20

TopCoat是一套免费的开源UI元素类库,整套类库不使用任何JavaScript,而是使用CSS和HTML来生成。

 

  • HTML&CSS:图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
  • JS:没有JavaScripts,只有单纯的CSS 

 

PureCSS

金沙贵宾会官网 21

Pure是一个相当小的框架,压缩及最小化后仅有5.7KB。它没有使用任何JavaScript,只是HTML和CSS。该CSS框架为响应式布局,采用模块化结构,每个模块的样式可以单独使用。

 

  • HTML&CSS:网格、排版、表单、按键、表格、菜单
  • JS:没有JavaScripts,只有单纯的CSS 
  • 其他:程序皮肤制作工具(Skin Builder)、YU 库。

 

结论

根据你的需要,选择可以与设计相匹配的框架。我们不应该根据框架来构建网站,因为它会很大程度上限制设计者的思维。

如果前端设计/布局不是那么重要,那么我们可以选择使用某一框架。(编译:陈秋歌/责编:夏梦竹)

本内容转自虾米站长,更多关于前端内容,请查看

本文由金沙贵宾会官网发布于摄影教程,转载请注明出处:必须去收藏14个响应式布局的前端开发框架,未来

上一篇:极致风景拍摄技巧 下一篇:没有了
猜你喜欢
热门排行
精彩图文