分享响应式CSS栅格系统
栅格系统 这种东西和许多同类工具/素材一样,“系统”二字让它看起来无比高大上,而实际上大多数的栅格系统 只是一系列纵横交错的细线构成。很简单?看起来确实如此。不过它之所以被冠以“系统”二字,主要还是因为这些线条所涉及的内容管理方式、梳理页面结构的功能。栅格系统 的运用会促使你的网页内容逐步走向规则化,实现一致性的设计。下面的20款CSS栅格 可以更好地运用到网页开发实践中去,赋予你的网站以调理性。
1. ChewingGrid
ChewingGrid 是一款卡片列表风的CSS栅格 ,通常可以用于视频、磁贴、文本等各种类型的网页元素。在使用ChewingGrid的时候无需媒体查询,你需要控制的是列的数量,最大和最小宽度。设定的时候可以直接使用默认的栅格 ,也可以自定义。
2. Motherplate
Mother plate 是一款基于HTML5、CSS3和SCSS的响应式模板,它不包含视觉组件,仅在CSS中帮你控制一切。
3. Lemonade
Lemonade 是一款简单灵活且易于定制的栅格系统,它是为设计师和开发者而设计的,便于他们定制属于自己的新项目。目前这套栅格系统兼容Chrome、Firefox、Safari、Opera和IE9+。其中预制了12栏,当然你可以定制并增加更多。
4. Reverie
Reverie 框架是一款基于ZUBR Foundation 的强大的HTML5 WordPress 框架。ZUBR Foundation 是一个强大的原型工具,以它为基础来制作框架自然不会差,而Reverie 本身确实从中继承了不少强大的'功能。
5. Jeet
Jeet 是一款市面上相对先进、设计直观的栅格系统,你可以将它视作为 的理念继承者。借助强大的预处理功能,你可有使用真正意义上的百分比来设计栅格系统,这也意味着你可以按照客户的描述直观快速地设定栅格,没有严格的12列栅格的限制,你可以更加快速的设计,使用更少的代码来搞定一切。
6. 1KB Grid
1KB Grid的设计灵感来自于1KB CSS栅格系统,这套基于SASS的栅格系统移除了HTML中多余的类,让它更灵活也更加易于定制。当然,1KB Grid 并非严格意义上的1KB大小,新版的1KB Grid已经可以制作流动性更强的栅格。
7. Unsemantic
Unsemantic 是一款流态栅格系统,基于960栅格系统演化而来。它们的工作原理很接近,但是Unsemantic 更加灵活,可以基于百分比来设定。
8. Bourbon Neat
Neat 是一款在Sass和Bourbon的基础上建立的语义栅格系统。它足够简单又功能强大,能在几分钟内配置好运行起来,足以应付任何响应式布局。
9. Herow
Herow 是一款省时省力的栅格系统,内置混入组件易于定制,可以处理各种各样的响应式的问题,并且能够和CSS轻松联动。
-
ASP.NET 2.0 程序的基础知识
成员关系的概念在人类社会中是一个层次比较低的概念,源于希望属于某个群组的意识。我们希望能觉得自己是某个团队的一部分,让别人知道我们是谁,因此Web搭上这个流行趋势,采用这个概念只是时间早晚的问题。如果坐下来想一想曾经登录过多少个站点并在这些站点上保存...
-
javascript操作select元素案例分析
本文实例讲述了javascript操作select元素的.用法。分享给大家供大家参考。具体分析如下:这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...
-
javascript设置创建动态表格的方法
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下方法一:最原始的方法,创建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//开始appendchild()追加各个元素ndChild(a4);ndChild(a3);nd...