在你的网页设计中使用的12个小CSS框架

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

您可能不需要Bootstrap等大型UI框架附带的大多数特性,特别是当您正在处理只想尽快启动和运行的小型直接项目时。幸运的是,有更小、更简单的CSS框架你可以用它来代替。对于开发人员来说,使用小型CSS框架通常意味着更平缓的学习曲线,不依赖于JavaScript的功能,以及更快的加载时间为了你的用户。

我已经创建了一个优秀的小/极简CSS框架列表供您探索。大多数都是小于5kb(当缩小和gzip),并包含建立响应式网页设计的基本成分。

最小值

最小值min是这个列表中最小的CSS框架,它有一个响应式的12列网格系统,按钮样式,表格样式,android兼容的图标等等。

min甚至支持Internet Explorer 5.5这样的老式浏览器。

毫克

毫克Milligram是为现代用户界面设计的——它的网格系统使用FlexBox,大小和长度使用快速眼动它是移动优先。走在最前沿是有代价的:Milligram官方只支持最新版本的Chrome、Firefox、IE、Safari和Opera。

大火CSS

大火CSS开箱即用,Blaze CSS已经是轻量级的,但你可以减少它的文件大小,甚至更多由于它的模块化架构,允许你只包括你打算在你的项目中使用的部分。

(更多信息请阅读创建自定义Blaze CSS构建的说明。)

Kube

KubeKube为一个小于6 KB的CSS框架提供了有力的支持。它有一个响应式网格系统,一组用于样式化web表单的健壮类,多个表类,用于向用户显示重要消息的通知类等等。

纯Pure,一个由Yahoo!

开发人员,是一套CSS模块,将帮助您快速构建响应式网页设计。Pure为所有HTML元素提供了基本样式(在Normalize.css基础上开发),以及网格布局、web表单、按钮、表格等模块导航菜单

鬼鬼祟祟的

鬼鬼祟祟的Furtive自称为“CSS微框架”,面向现代网页设计。

和Milligram一样,Furtive也是Mobile First,拥有基于FlexBox的响应网格快速眼动长度和尺寸单位。它涵盖了基本的内容:按钮、表单,甚至默认的颜色类。

骨架

骨架虽然还没有更新一年多的时间,骷髅是仍然一个一流的起点/样板,快速建立现代,响应式的网页设计。

它为你的HTML元素提供了直观的网格系统和基本样式。

福克斯CSS

福克斯CSSFOX CSS是一个轻量级、模块化的CSS框架。它采用移动优先的设计方法,支持早至ie9的浏览器,并且具有非侵略性CSS重置(灵感来自KNACSS)。

Basscss

BasscssBasscss由22个CSS模块组成,包括CSS重置,网格系统,颜色类,实用工具类,以帮助您构建自己的响应的设计,以及更多。对于一个小于4 KB的文件来说,Basscss的特性非常丰富。

Siimple

Siimplesimple是一个极简的CSS框架,用于构建响应性强、简洁的网页设计。

它类似于Skeleton:它有一个直观的12列网格系统和排版、表格、按钮、表单等的基本样式。

莲花

莲花Lotus是目前最小的CSS框架之一。它涵盖了基本要素:响应式网格系统、排版、按钮和网页表单。

野餐的CSS

野餐的CSS野餐CSS是一个用Sass编写的轻量级UI框架,使您更容易编辑和自定义变量,如颜色和长度。它还有一些令人印象深刻的纯css UI组件,如模态窗口和内容滑块。

汇总表

下表包含了关于此列表中所列出的CSS框架的有用细节。

的名字 大小* 文档 许可证 GitHub回购 欢迎* *
最小值 1.02 KB 文档 麻省理工学院 回购 685
毫克 4.05 KB 文档 麻省理工学院 回购 3000年
BlazeCSS 5.71 KB 文档 麻省理工学院 回购 7
Kube 5.94 KB 文档 麻省理工学院 回购(过时的) 538
4.0 KB 文档 BSD 回购 13373年
鬼鬼祟祟的 2.37 KB 文档 麻省理工学院 回购 369
骨架 1.57 KB 文档 麻省理工学院 回购 10884年
福克斯CSS 2.46 KB 文档 未知的 回购 87
Basscss 3.49 KB 文档 麻省理工学院 回购 2597年
Siimple 5.56 KB 文档 麻省理工学院 回购 14
莲花 1.80 KB 文档 麻省理工学院 回购 14
野餐的CSS 2.32 KB 文档 麻省理工学院 回购 932

*大小的文件大小最小化和gzip的CSS文件。大小值来自于我对每个CSS框架的生产就绪/分发样式表的独立测试。* *的受欢迎程度是在GitHub上跟踪CSS框架源代码的用户数量。这个值是由的数量来衡量的星星这个项目是在这篇文章发表的时候开始的。数值越高,项目就越受欢迎。

读下

你应该使用的7个CSS工具5 CSS效果库为你的设计增压器大型网站的CSS开发

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!