提高网站的性能,可以从优化图像到建立自己的CDN,也可以考虑优化前端代码,使用更轻更小更快的WEB开放框架,而不是重量级的Bootstrap,尽管它很优秀。
我们来总结一下你可以尝试的最小的一些WEB框架,而不是臃肿的Bootstrap。 你会惊讶这些框架是多么伟大,他们会让网站瞬间降低体重,真是轻到没朋友,快到没兄弟,还保留高颜值。
01Topcoat
Topcoat,这是一个速度极快的框架。 构建此框架的开发人员专门测试其所有模块,同时针对其他框架运行基准测试。对于任何网站来说都很棒,而且它非常容易定制。
当然整个框架是移动响应,CSS使用BEM命名,所以很容易编辑和混合到自己的样式表中。
演示网址:http://topcoat.io/topcoat/
2Milligram
另一个极简主义的前端框架是目前在1.3版本中的Milligram。 这是一个极简主义的UI库。
您可以使用任何主要的软件包管理器(如Yarn,Bower或npm)进行安装。 它在Normalize的基础上工作,它与整个Milligram CSS库的缩小版本打包在一起。
这不包含组件或动态功能,就像您在Bootstrap中找到的那样。 所以它主要面向那些想要构建快速布局而不需要更高级特性的开发人员。
官网:http://milligram.io
3Pure.css
Pure.css做的最好的是整个框架是模块化的风格。 您可以自定义您的样式表,以包含表格设计,自定义菜单,按钮,表单或一切的组合。
或者如果你只是想使用其中一小部分,就像网格布局,你可以单独下载。 事实上,Pure.css的网格部分总计大约0.8KB,比Bootstrap或Foundation要小很多。
官网:https://purecss.io/
4Mincss
看名字就知道这个框架的追求了。
Min.css被广告为Bootstrap的缩微替代品。 事实上,它自称是最小的前端框架,缩小时总共只有990个字节(小于1KB)!990byte!!!
它适用于所有主流浏览器,甚至支持IE 6+等老式浏览器。
如果你真的想要一个闪电般的加载时间,那么可以来看看Mincss。相信你不会失望!
官网:http://mincss.com/
05Petal
Petal是一个相当小的前端框架,具有较小的UI库的独特设计。 它支持一些组件,但是大多数Petal是为了成为所有Sass库的LESS CSS替代品。
在写这篇文章的时候,它仍然处于积极的发展状态,目前的版本稳定在v0.8.3。 Shakr的团队已经在这个框架中投入了大量的时间,而且不可能很快消失。
所有的组件都是可选的,所以你可以通过删除你不需要的组件来简化你的网站。
官网:https://shakrmedia.github.io/petal/
06Picnic
Picnic CSS的宣传是轻量级和美观的前端框架。
颜色感觉像一个简单版本的Bootstrap,使用平面设计语言,符合广泛的审美。
示例页面有全部Picnic默认元素样式的完整列表。
还有一个超级干净的文档页面,提供有关Picnic CSS入门的说明。
官网:https://picnicss.com/
07Kube
Kube给人留下了深刻的印象,因为它是一个非常好的框架,但它并不是这个列表中最小的。然而它确实出于某个原因被列在这里:它足够小。 整个库编译为大约30KB(包括所有JS组件)。 这比Bootstrap还要小10倍左右。
但是这绝不可能与Mincss竞争,因为Kube包装了很多东西。 如果这就是你想要的,那么这个框架是伟大的!
看看在线文档的例子和代码片段。 Kube感觉像一个真正的专业框架,这绝对是你可以在生产网站上运行的东西。
官网:https://imperavi.com/kube/
08Chota
如果你想要比Kube小10倍的东西,请看Chota CSS框架。
总共不到3KB(这是它的宣传点),这是一个纯CSS的框架,完全不必担心下拉菜单,选项卡或其他动态小部件。
Chota也是少数几个不能在预处理器上运行的框架之一。
只需插入和运行Chota代码,就可以适用于任何布局。
官网:https://jenil.github.io/chota/
09Furtive
作为一个自称的“微观框架”,Furtive在压缩后大约只有2.4KB。
它是为数不多的移动优先的框架之一,超小文件大小与强大的页面类和结构列表结合起来的典范。
它也是推进现代浏览器技术的最先进的框架之一。 它专门用于flexbox和SVG之类的东西,所以你可以减少你的总代码,并减少你的总加载时间。
官网:http://furtive.co/
10Siimple
Siimple采用扁平化设计风格,以一个非常简单的代码库为基础。
这个框架将简约主义提升到一个新的水平,对设计和开发都采取了一种干净的方法。 颜色,排版,网格,他们都遵循一个简约的方法,仍然感觉独特。 超干净的代码库也一样。
看看Siimple文档, 这是一个非常酷的框架,用于快速原型设计或者无需从头开始构建自定义布局。
如果你觉着这篇文章对你有帮助,欢迎将这篇文章分享出去给更多的朋友。
如果你工作中还有用到的更轻巧的WEB前端框架,欢迎留言分享。
关注万码学堂,每天都会进步
领取专属 10元无门槛券
私享最新 技术干货