fncj fncj
关注数: 16 粉丝数: 100 发帖数: 2,292 关注贴吧数: 9
【干货分享】常用网页设计的12个轻量CSS框架 网页设计的12个轻量CSS框架 By Jacob Gube 你或许不需要用到Bootstrap这种大型UI框架的大部分功能,尤其当你想开发简单直接的项目,并期望越快跑起来越好。幸运的是,有小而快的CSS框架供你选择。 使用一个小的CSS框架一般意味着更平缓的学习曲线,不依赖JavaScript功能,和更快的加载时间 。 我制作了一个优秀的小型/最小化的CSS框架让你是探索。它们大部分小于 5 KB(最小化和gzipped后)并包含用于开发响应式页面的核心工功能。 minmin,列表中最小的CSS框架,包含响应式 12 列的栅格系统,按钮样式,表格样式,兼容安卓系统的图标等。min支持古老的浏览器比如 IE 5.5 MilligramMiligram为的是现代UIs - 使用了FlexBox作为栅格系统,用rem作为长度和大小的单位,并且移动优先。在这个极端上的代价是:Miligram只支持最新的Chrome,Firefox,IE,Safari和Opera。 Blaze CSSBlaze css在轻量化上面已经非常出众,但是你还可以更进一步的优化。由于模块化的设计是的用户可以只引入需要的模块。(参考 instructions for creating a custom Blaze CSS build 了解更多) KubeKube在小于6KB的CSS框架中出了一记重拳。他拥有一个响应式栅格系统,一套健壮的网页表单类,通知类用于展示重要信息,等等。 PurePure,Yahoo!开发者发起的开源项目,是一套帮助开发响应式页面的CSS模块。Pure帮助你快速建立响应式设计。对所有元素有几本的样式(在Normalize.css上建立起来),以及对应于栅格布局,网页表单,按钮和表格的模块,以及 导航菜单. Furtive自称“CSS微框架”,Furtive专门针对现代web设计。像Miligram,Furtive移动优先,有一个响应式的基于FlexBox的网格,是用rem单位作为长度的大小。并对表单,按钮,基础颜色等有涵盖。 Skeleton虽然超过一年都没有被更新, Skeleton任然是构建现代响应式设计的一流框架。包含一个直观的栅格系统和基本类型。 FOX CSSFOX CSS是一个轻量化,模块化的CSS框架。使用了移动优先的设计原则,支持最早到 IE 9,以及一个non-aggressive的 CSS reset (受 KNACSS 启发). BasscssBasscss有超过22个css模块组成,包括CSS reset,栅格系统,颜色类,工具类,帮助你构建响应式设计,更难得的是,Basscss功能出奇的丰富,毕竟它不到 4 KB。 SiimpleSiimple是一个最小化的CSS框架,用于构建响应式的感觉的网站设计。于Skeleton类似:它有一个直观的12列网格系统和对布局、表格、按钮和表单等的基本样式。 LotusLotUs是最小的css框架之一。它覆盖的重点有:响应式网格系统,排版,按钮和表单。 Picnic CSSPicnic CSS是一个轻量化的全段Sass框架,让你可以轻易的定制参数如颜色和长度。它还有一些让人惊叹的纯CSS组件如 Modal 弹窗和内容滑动器。 Summary Table 下面列表包含了上述CSS框架一些具体的参数。 名字 *大小 文档 版权 GitHub仓库 **热门度 min 1.02 KB Docs MIT Repo 685** Milligram 4.05 KB Docs MIT Repo 3,000** BlazeCSS 5.71 KB Docs MIT Repo 7** Kube 5.94 KB Docs MIT Repo (outdated) 538** Pure 4.0 KB Docs BSD Repo 13,373** Furtive 2.37 KB Docs MIT Repo 369** Skeleton 1.57 KB Docs MIT Repo 10,884** FOX CSS 2.46 KB Docs Unknown Repo 87** Basscss 3.49 KB Docs MIT Repo 2,597** Siimple 5.56 KB Docs MIT Repo 14** Lotus 1.80 KB Docs MIT Repo 14** Picnic CSS 2.32 KB Docs MIT Repo 932 *大小 是指 minified 和 gzipped 后的大小,这个值是从我的独立测试环境中计算出来的。 **热门度试着github上星的个数,指的是用户关注代码变化的数量。星 个数越高越好.** 原创文章,转载请注明:转载自http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.whohelpme.com%2Fb%2Fdetail%2F135.html&urlrefer=3eb9fa96d97a18485f29530a473cb427
1 下一页