06 May 2025

CSS framework

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

简介:企业级响应式框架,特点:

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行代码):

三、专业方向框架

8. Materialize

简介:Material Design实现:

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

特点

2. Less

特点:浏览器端可编译
官网lesscss.org

3. Stylus

特点:极简语法
官网stylus-lang.com