微信号:CoderRes

介绍:最新鲜的程序员技术文档及相关资源

12 个可用的小型 CSS 框架

2016-02-04 12:02 Specs

首先,新年马上就要到了,这应该是年前最后一次分享了,所以在这里提前给大家拜个年。祝大家新的一年工作顺利、工资↑↑↑


你可能用不到很多大型 UI 框架中的大部分功能,如BootStrap,特别是当你在开发小型、简单的项目的时候,你需要的只是尽快的启动并能运行它。幸运的是,有很多更小型的 CSS 框架,你可以用来做替代品。


使用一个小型的 CSS 框架对开发者来说是更温和的学习曲线,对于JavaScript功能没有依赖,对用户来说是更快的加载速度。


我这里为大家提供了一个小型、简约的CSS框架列表,它们大部分都在5KB(压缩后)以内,并且包含了构建响应式网页设计的要素。


1. Min


地址:http://mincss.com/



Min,是这个列表中最小的 CSS 框架,具有响应式的 12 列栅格系统、按钮样式、表格样式、兼容Android的图标等等。Min 甚至支持像 IE 5.5 这样古老的浏览器。


2. Milligram


地址:http://milligram.github.io/



Milligram 提供了现代化的UI–它的栅格系统采用 Flexbox,大小和长度才有 rem 单位,并且是移动优先的。但这也是有代价的,它只支持最新的Chrome、Firefox、IE、Safari和Opera等浏览器。


3. Blaze CSS


地址:http://blazecss.com/



Blaze CSS 自身已经是一个轻量级的框架了,但你还是可以精简它的体积,因为它的模块化的构架,它允许你只包含你在项目中需要使用的部分以缩减文件大小。(点击此处获取更多精简该框架的信息。)


4. Kube


地址:https://imperavi.com/kube/



Kube 包含了一个体积小于 6KB 的 CSS 框架,它具有响应式的栅格系统、用于创建表单的类集合、多种表格类、显示重要信息的通知类等等。


5. Pure


地址:http://purecss.io/



Pure 是雅虎的一个开源项目,是一套可以帮你快速构建响应式设计的 CSS 模块,Pure 为所有的 HTML 元素都设置了基本样式,基本模块有:栅格系统、WEB表单、按钮、表格、导航菜单等。


6. Furtive


地址:http://furtive.co/



自称为“CSS微框架”的 Furtive 面向现代网页设计,同 Milligram ,Furtive 也是移动优先、基于FlexBox 的栅格系统、使用 rem 作为长度和大小单位。它的基本内容包括:按钮、表单、甚至还包括默认颜色。


7. Skeleton


地址:http://getskeleton.com/



虽然有一年多时间没更新了,Skeleton 仍然是构建现代化的、响应式WEB设计的一流框架。它配备了一个响应式的栅格系统和默认的HTML元素样式。


8. FOX CSS


地址:http://fox-css.com/



FOX CSS 是一个轻量级、模块化的 CSS 框架,采用移动优先的设计方式,甚至支持 IE9。


9. Basscss


地址:http://www.basscss.com/



Basscss 由 22 个模块组成: CSS reset、栅格系统、颜色类、构建响应式的实用类等等。Basscss 最大的特点是它的文件大小还不到 4KB。


10. Siimple


地址:https://siimple.github.io/



Siimple 是一个简约的构建响应式、干净的 WEB 设计框架。类似于 Skeleton,它具有 12 列的栅格系统,字体、表格、按钮、表单等的基本样式。


11. Lotus


地址:http://goatslacker.github.io/lotus.css/



Lotus 是最小的 CSS 框架之一。它的主要特点有:响应式的栅格系统、字体、按钮、WEB表单等。


12. Picnic CSS


地址:http://www.picnicss.com/



Picnic CSS 是一个使用 SASS 编写的轻量级 UI 框架,使得你更加容易编辑和定制变量:如颜色和长度。它也有一些响应式的、纯CSS的组件,如模态窗口、内容滑块等。


总结


下表是关于列表中几个 CSS 框架主要特点的总结:


Name Size* Docs License GitHub Repo Popularity **
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


英文原文:http://sixrevisions.com/css/small-css-frameworks/

译文:http://webres.wang/12-small-css-frameworks-you-can-use/


未经允许,不得转载


 
程序员资源 更多文章 感谢关注程序员资源公众号 [干货] WEB开发者应该有哪些必备的技能? 程序员应该坚决避免的10种编程坏毛病 GitHub上整理的一些实用工具 据说程序员写完代码是这个样子,99%的人都中枪了
猜您喜欢 微软程序员最好的时代来了 【设计】扁平化设计的技巧 有了这个列表,程序员不愁没练手的小项目了 腾讯信鸽移动推送报告 隐秘而伟大!FACEBOOK 好友图标的设计改版背后的故事