蓁祎家进步中

# css框架

back

# 15个2019年最佳CSS框架

back

  • Bootstrap
    Bootstrap是目前使用最广泛的CSS框架，它是 Twitter 推出的一个用于前端开发的开源工具包，当前最流行的版本是2018年发布的Bootstrap 4。相比Bootstrap 3，Bootstrap 4增加了很多特色和功能，例如新的配色方案，新的修改器以及新的实用程序分类等等。此外，Bootstrap 4是使用SASS构建的，也就是说，Bootstrap现在同时适用于LESS和SASS了。
  • Foundation
    相比其他CSS框架，Foundation显得相对专业，功能更加全面，因此也具备一定的学习难度。作为一个更高级，更复杂的框架，Foundation具有超强的可读性、灵活性和可自定义性。这些特色也让它成为创建响应式网站和应用程序的首选框架之一，很多大型网站，比如Facebook、Ebay、Mozilla、Disney，Adobe等都使用了该框架。
  • Pure
    是Yahoo在2014年创建的一个轻量的响应式CSS框架。它基于Normalize.css构建，开发人员可以使用其栅格设计和菜单创建高度响应式的页面布局。和Bootstrap不同，Pure在默认情况下是响应式的，因此无法禁用响应式选项。此外，如其名所示，Pure是一个纯CSS框架，不包含任何JavaScript组件，体量也非常轻小，整个模块压缩后只有3.8KB。
  • Bulma
    是一个基于Flexbox布局模型的免费开源项目。该CSS框架也是轻量级、响应式的，并且具备移动优先的理念。对开发人员而言，Bulma和Bootstrap以及Foundation可以一起并列为三大最受欢迎的CSS框架，目前全球已经有超过15万名开发人员在使用Bulma。Bulma之所以广受欢迎的原因还有其高度可读的命名规则，这对于新手开发人员来讲，会大大降低学习成本。还有一个比较有意思的点，Bulma在Github上可以说是明星选手般的存在，人气超高。
  • Semantic UI
    是一个用户友好度爆表的响应式前端框架，具备3000多个主题变量和50多个UI组件，可以快速搭建漂亮的网页。Semantic UI还集成了许多第三方资源库，包括React，Angular，Meteor，Ember等等，给开发人员带来了更多便捷。Semantic UI官方一直大力宣传他们的最大亮点——“human-friendly HTML”，也就是说，开发人员可以使用通用语言来直观展示分类和命名，因此几乎没有任何门槛就可以读懂代码。此外，相比Boostrap的很多类似的UI界面或Foundation需要自定义操作的UI界面，Semantic UI 可以默认创建更加美观的界面和布局。
  • UI kit
    是一个轻量级的CSS和网页UI设计框架，它最大的特色是功能全面性不输其他CSS框架，但奉行极简主义的它体量却更轻巧，几乎可以用麻雀虽小，五脏俱全来形容了。UI kit具备超多的SVG图标、字体以及组件，加之其强大的响应式设计，统一的UI样式和灵活的自定义选项等功能，开发人员可以快速创建简洁、模块化的web界面。此外，开发人员来可以在该框架中使用HTML创建更高级的flexbox布局。
  • Materialize CSS
    是Google在2014年开发的响应式前端框架，它是基于Google的Material Design创建的，所以尤其适合网站或Android平台的项目使用。目前来看，两类人使用该框架最多，一种是热爱Google Material Design的开发人员和设计师，所谓爱屋及乌，加之Materialise CSS本身确实也比较优秀，因此很多Material Design爱好者自然而然就用它了。第二种是熟悉Boostrap的开发人员，因为Materialize CSS也是使用了Bootstrap的12列栅格设计模式，因此使用起Materialize CSS来也会比较熟悉，可以快速创建响应式页面布局。如果你是其中之一，不妨试试Materialise CSS。
  • Milligram
    可以说是最轻小的CSS框架之一，压缩后到最小时仅2KB，因此只能提供最小的样式设置。Milligram虽然非常轻小，但功能依旧不差，它具有一整套web开发工具，并且充分利用了CSS3规范中的各种原理来帮助开发人员快速开发。
  • Skeleton
    是一个响应非常快速的CSS框架。和Milligram一样，它的体量也非常轻小，仅包含400行源代码，但它具有的栅格设计、版式、按钮、表单、列表、表格等功能，依旧可以帮助开发人员快速创建项目。如果你正在进行某个比较轻量级的项目，或者不需要一些大型框架的诸多实用程序时，使用Skeleton或许是一个不错的选择
  • Tailwind CSS
    是一个高度可定制的CSS框架，在这一点上，Tailwind CSS几乎完胜了其他所有的CSS框架。那么，Tailwind是如何做到的呢？首先，Tailwind框架是使用PostCSS编写的，并且使用了JavaScript进行配置。这样，开发人员可以完全自主掌握网页UI风格，包括颜色、边框大小、字重，间距、阴影等等。
  • Spectre.css
    是一个轻量级，响应式和现代化的CSS框架，它基于Flexbox布局创建，具备比较优雅的设计外观、版式以及组件。并且Spectre的所有组件也是完全使用CSS创建的，因此不需要使用任何JavaScript语言就可以使用。
  • Base
    是一个响应式CSS框架，它也是非常轻量级的，但功能依旧强大，具备多个独立的模板，方便选取和使用。此外，它也具备移动优先设计理念，并且兼容主流浏览器，包括IE 10+。
  • Picnic
    也是一个轻量级CSS框架，压缩后的大小不到10kb。该框架最大的特点就是具有多个交互式组件，包括栅格、表单、选项卡、工具提示等等，可以帮助开发人员快速创建响应式网站和web应用程序。
  • Mustard UI
    可以说是一款入门级别的CSS框架。如果你是第一次了解CSS框架，可以从它的模块开始学习，零门槛，几乎是即学即用。它的功能有限，但仅作为入门跳板倒也是非常不错的
  • Dead Simple Grid
    是一个非常有用的工具，体量也不大，是一个开源项目，仅包含250个字节的CSS代码和2个分类。严格意义上甚至可以不把它看做一个完整的CSS框架，但它可以为前端开发工程提供非常好用非常强大的栅格系统，这也是必须要推荐它的原因。

# 更多响应式CSS框架推荐

  1. SusySusy是一个基于Sass的轻量级栅格布局框架，可以帮助开发人员简化响应式栅格布局开发流程。使用Susy时，开发人员还可以使用float，flexbox，table等其他CSS技术。
  2. Animate.cssAnimate.css可以帮助开发人员快速添加CSS动画，包括过渡、变换、弹跳、滚动等等。
  3. Paper CSSPaper CSS是一个使用LESS构建的CSS框架。
  4. NES.cssNES.css是一个具有NES样式的CSS框架，它只提供组件，没有布局。
  5. Tent CSSTent CSS是一个简单的CSS框架，具备构建网站的基础结构。
  6. SimplegridSimple Grid是一个轻量级CSS网格，具备12列栅格设计样式，可以快速构建响应式网站。