CSS效率---常用CSS框架

任何一门语言，都有优秀的开发者做出的框架，css也不例外，从底层学起掌握一门语言的精髓固然重要，但是时间和效率也重要，使用框架可以缩短产品开发周期，减少浏览器适配问题，尤其是现在计算机、平板和手机屏幕大小不一的自适应问题。今天把近几年流行的css框架罗列一下供参考，我用过其中的两个。

1、 Bootstrap
作为最受欢迎的工具之一，Bootstrap在Web开发人员眼中已成为了业界领先的前端框架。为了使Web开发人员能够构建出不同的用户界面组件，Bootstrap能够将CSS、Javascript和HTML代码组合到一起。

Bootstrap 4是该框架的最新版本，它带有更新的组件，更好的样式表，并且能够让网页和CSS中的图像具有更快的响应能力。此外，Bootstrap 4也支持LESS(Leaner Style Sheets)和SASS(Syntactically Awesome Stylesheets)。

通常，Bootstrap能够以可重用组件的形式，提供包括：导航栏、下拉菜单、分页、以及标签等常见的HTML元素。您可以轻松地将它们合并到既有的网页设计中，而不必从头开始。

2、 Foundation

ZURB于2011年9月设计出了Foundation。与其他CSS框架相比，Foundation不但拥有先进而复杂的界面，而且提供了响应式菜单，以及与各种设备和浏览器的兼容性。您还可以使用CSS框架，来轻松地按需设置各种菜单样式。

得益于超响应式(super-responsive)CSS框架，设计人员可以遵循“自行设计网站(design-the-site-yourself)”的方法，以拥有对项目的更大控制权。

3. Materialize CSS

以Google为基础的Materialize CSS融合了JavaScript、CSS和HTML等各种组件。它不但具有一定的响应能力，而且存在较少的浏览器兼容性问题。如果您希望构建一个优雅的UI，那么Materialize就可以通过大量的自定义CSS，以及多种配色方案，来帮助您完成独特的网站设计。

4.Semantic UI

作为一名全栈开发人员，Jack Lukic使用自然语言原理创建了Semantic UI框架。凭借着jQuery和LESS功能，Semantic UI提供了光滑、平整且精细的外观，以及轻量级的用户体验。它的社区虽然相对较小，但是其成员既热情又忠诚。他们的目标是创建一种共享的UI语言，以赋予开发人员和设计人员同样的权利。目前，Semantic UI社区已经拥有约3000多个主题。

5、 Bulma

作为一个基于Flexbox的开源框架，Bulma在全世界拥有超过20万名开发用户。它可以通过可视化的组件，让开发人员了解其运作的过程。该前端框架通过各种技术，为前端开发人员提供了一种内聚(cohesive)的界面。此外，由于它使用了响应式模板，因此我们可以更好地专注于网站的内容，而不是代码的编写。

6、 UIKit

UIKit是一个模块化的轻量级前端CSS框架。它非常适合于快速开发那些功能强大的Web界面。凭借着CSS、HTML和JS组件的全面集合，它能够让前端框架既容易扩展，又方便被定制使用。UIKit是用于开发iOS应用最广泛的前端框架之一。它定义了诸如：按钮、标签、导航控制器和表格视图等核心组件。

7. PureCSS

由Yahoo开发的PureCSS，提供了一组体积小、且具有快速响应能力的CSS模块。它非常适合开发那些界面美观且功能不同的项目。PureCSS具有快速响应能力的内置设计，以及最小体积的标准化CSS，而且它们都是免费的!

8、Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地构建UI。作为一个utility-based的CSS库，它比那些语义和精益标记(lean markup)更注重实用性和速度。在创建网站时，您只需要确定项目的范围，而无需自行编写CSS。虽然Tailwind并不提供默认的主题，您也找不到任何内置的UI组件，但是您可以使用预设计的部件菜单，来构建目标网站。

9. Ant Design

由阿里巴巴开发的Ant Design是一种Javascript库类型的ReactJS组件库。通过将屏幕区域分为24列网格，它增加了用户对于可见区域的自定义能力。同时，它通过各种填充(filled)和轮廓(outlined)图标，来满足不同的应用程序的要求。

10、 Tachyons

与其他流行的前端框架不同，Tachyons旨在将CSS规则分解为小型的、可管理的、以及可复用的部件。Tachyons可以帮助开发人员创建出具有高度可读性、能够快速加载和响应的网站，而且无需使用大量CSS代码。

11、Primer

得益于全球最大的开发商社区—Github，Primer采用系统级方法，来确保诸如：版式、间距和颜色等样式的一致性。因此，Primer不但框架简单，而且能够给用户来带一致性的体验。

再看看github上的css星标情况：

Github 上 star 最多的 10 大 CSS框架。

Bootstrap

Github star 数量 140K。

GitHub 地址：https://github.com/twbs/bootstrap

Bootstrap 是最受欢迎的 CSS 框架，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

Semantic-UI

Github star 数量 47.8K。

GitHub 地址：https://github.com/Semantic-Org/Semantic-UI

Semantic 是一个开发框架，可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

Materialize

Github star 数量 37.5K。

GitHub 地址：https://github.com/Dogfalo/materialize

Materialize是一款基于Material Design设计的前端框架，支持自适应，现代感十足。

Bulma

Github star 数量 39.6K。

GitHub 地址：https://github.com/jgthms/bulma

Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,其响应式、模块化、开源免费,可以轻松用来实现各种简单或者复杂的内容布局，Bulma 最大的特点是轻量、无依赖、简单、易用，所有样式都基于 class，即使不懂 CSS 也可以轻而易举的做出美观的网页。

更多详细介绍：http://www.sevdot.com/articles/7

Foundation

Github star 数量 28.6K。

GitHub 地址：https://github.com/zurb/foundation-sites

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

Pure

Github star 数量 20.8K。

GitHub 地址：https://github.com/pure-css/pure

雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。

Pure 小得不要不要的，压缩成gzip文件仅为3.7KB*。我们力求每一行代码都精简到极致，以便最大程度压缩CSS大小，更利于移动Web制作。如果您仅使用其中的一部分模块，那CSS真是小到没有朋友了！

Layui

Github star 数量 21.5K。

GitHub 地址：https://github.com/sentsin/layui

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Uikit

Github star 数量 13.5K。

UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 组件，它们使用简单，容易定制和扩展。

它基于 LESS 开发，代码结构清晰简单，易于扩展和维护，并且具有体积小、反应灵敏的响应式组件，你可以根据 UIKit 基本的风格样式，轻松地自定义创建出自己喜欢的主题样式。

Amaze UI

Github star 数量 13.4K。

GitHub 地址：https://github.com/amazeui/amazeui

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

jQuery UI

Github star 数量 10.8K。

GitHub 地址：https://github.com/jquery/jquery-ui

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。

jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQueryUI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

CSS效率---常用CSS框架相关推荐

常用CSS元素div ul dl dt ol的简单解释
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表. <ol> <li>--& ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
css 横线_atom.css正式发布,从此跟CSS框架说拜拜。
atom.css 大家好,我写了一个css库atom.css,蛮好用的,所以忍不住分享给大家.(https://github.com/MatrixAge/atom.css) 起因写HTML几年了,再 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
css 背景效果_前端教程：20个CSS的常用套路附demo的效果实现与源码
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么 ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码）
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...
html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性实例学习要点了解opacity属性:透明度设定了解cursor属性:自定义鼠标样式了解CSS新单位rem和em的区别了解轮廓outline的设置 ...
9 个基于JavaScript 和 CSS 的 Web 图表框架
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图, ...

CSS效率---常用CSS框架

CSS效率---常用CSS框架相关推荐

最新文章

热门文章