首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

收藏10种轻快的前端WEB开发框架

提高网站的性能,可以从优化图像到建立自己的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前端框架,欢迎留言分享。

关注万码学堂,每天都会进步

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180126G06C3E00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券