小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
使用响应式CSS框架帮助我们减少大量的工作,我们可以不必去编写重复的CSS样式,提升开发效率。并且现在有着大量的开源的CSS框架可供我们使用。下面我列出的这些都是开源免费的。如果您还用有更好的选择欢迎在评论区告诉大家。
1. Bootstrap
大名鼎鼎的Bootstrap相信没有人没用过吧,Bootstrap是最被广泛的使用的CSS框架,它免费开源,至今仍有数百万网站在使用。
主要特性:
- 支持SASS变量和Mixins
- 支持响应式网格系统
- 有很多内置组件供使用
- 基于jQuery的强大插件
2. Tailwind
Tailwind是一个比较新的CSS框架,与其他框架不同,它并不提供内置的组件,而是提供很多基础的工具class,供我们去使用。
举个例子
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
通过在button的class上写Tailwind提供的基础class,可以实现一个精美的按钮。
相比Bootstrap而言,它的灵活性很强,我们可以实现不同的按钮样式,不像Bootstrap,如果不修改默认样式,每个网站的按钮都差不多。令人一眼就看出是用了Bootstrap。
但其长长的class也让人头疼,有点像在直接写style,你喜欢这个框架吗?欢迎在评论区说出你的想法
<ul class="space-y-4">
<li>
<div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
<li>
<div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
<li>
<div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
</ul>
3. Bulma
Bulma经过Gzip后只有21kb,它采用移动端优先的思想构建,每个元素都针对垂直阅读进行了优化,它的网格系统完全由flexbox实现。
Bulma也是使用SASS构建的,我们可以引入我们项目中需要的部分即可。
4. UI Kit
ui kit是一个轻量化的响应式CSS框架,用来快速开发web应用。
ui kit简单易用,提供了网格系统、自定义图标、组件、动画等等,并且与Less和Sass兼容。
5. Semantic UI
Semantic UI和Bootstrap有很多的相似之处,其拥有语义化的HTML结构和class命名方式。同样提供基于jQuery的插件,用来实现动态的功能。
6. Spectre
最轻量的CSS框架,Gzip后只有10kb,提供基础的设计组件,基于flex布局,具有响应式和移动端优先的特点。
相比Bootstrap这个大而全的框架,对于简单的web应用也可以选择这种小巧、轻量的框架。
总结
所有的框架都有不同的优缺点,我们可以根据实际的项目需要选择适合的CSS框架,来帮助我们快速构建Web应用。
我的见识有限,列举的只是冰山一角,如果我错过了一些好用伟大的框架,请随时发表评论,让每个人都知道它。
觉得文章不错,欢迎关注公号(点击关注),每天更新一篇有用的内容。