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