CSS framework CSS 框架
CSS 框架与工具大全
一、主流CSS框架
1. Bootstrap
简介:最广泛使用的免费和开源CSS框架,由Mark Otto和Jacob Thornton在2011年创建。具备:
- Sass变量和混合模式
- 响应式网格系统
- 大量预构建组件
官网:getbootstrap.com
2. Semantic UI
简介:主打清新UI设计,创建了共享UI的开发语言
官网:semantic-ui.com
3. Foundation
简介:企业级响应式框架,特点:
- 模块化设计
- Sass支持
- WCAG可访问性标准兼容
官网:foundation.zurb.com
4. Bulma
简介:基于Flexbox的轻量框架(21kB):
- 纯CSS无JS依赖
- 现代化响应式设计
- Sass构建
官网:bulma.io
5. Tailwind CSS
简介:实用类优先的原子化框架:
- 低级别实用类
- 完全可定制设计
- 无预置组件
官网:tailwindcss.com
二、轻量级框架
6. Pure CSS
简介:Yahoo开发的超轻量框架(3.8kB)
官网:purecss.io
7. Skeleton
简介:微型框架(仅400行代码):
- 响应式网格
- 基础样式模板
官网:getskeleton.com
三、专业方向框架
8. Materialize
简介:Material Design实现:
- 交互动画效果
- 谷歌产品级设计规范
官网:materializecss.com
9. UnoCSS
简介:下一代原子化引擎:
- 按需生成CSS
- 超高性能
- 插件系统
官网:unoCSS.com
四、UI组件库
10. Element UI
简介:Vue 2企业级组件库
官网:element.eleme.cn
11. Ant Design
简介:React企业级设计体系
官网:ant.design
12. Vuetify
简介:Vue Material组件库
官网:vuetifyjs.com
CSS动画特效库
1. Animate.css
特点:开箱即用的60+动画效果
官网:animate.style
2. Animista
特点:可视化动画生成器
官网:animista.net
3. Hover.css
特点:悬停特效集合
官网:github.io/Hover
4. Anime.js
特点:轻量级JS动画引擎
官网:animejs.com
CSS预处理器
1. Sass
特点:
- 变量系统
- 嵌套规则
- Mixins
官网:sass-lang.com
2. Less
特点:浏览器端可编译
官网:lesscss.org
3. Stylus
特点:极简语法
官网:stylus-lang.com