【引自葡萄城控技术团队博客】现在CSS前端框架很多，但真正优秀的框架却寥寥无几。本文比较了五个最佳框架。每个框架都有自己的优缺点，以及具体的应用领域，大家可以根据自己具体的项目需求来选择。此外，许多选项都是模块化的，允许您仅使用所需的组件，甚至可以混合使用来自不同框架的组件。本文按照各框架在GitHub上的热度顺序进行介绍。BootstrapBootstrap是当前可用框架中无可争议的领导者。它的流行度越来越高，你可以选择这个框架而不用担心项目失败，因为一个有广泛使用基础的框架被放弃的可能性较小。创作者：马克·奥托和雅各布·桑顿。发布时间：2011当前版本：3.3.7流行度：GitHub上111,000颗星描述：“Bootstrap是最流行的HTML、CSS和JavaScript框架，用于开发响应式移动Web项目。核心概念/原则：RWD和移动优先。框架大小：154KB预处理器：Less和Sass响应式布局：是模块化：是启动模板/布局：是图标集：GlyphiconsHalflings设置附加/附件：未捆绑，许多第3方插件可用。独特的组件：Jumbotron文档资源：良好的定制：基本GUI定制器。但是你需要手动输入颜色值，因为没有颜色选择器可用。浏览器支持：Firefox，Chrome，Safari，IE8+（IE8需要Respond.js）许可证：MITBootstrap解释说Bootstrap的广泛流行是它的优势.从技术上讲，它不一定比这个列表中的其他框架好，但它提供了比其他四个框架更多的资源（文章和教程，第三-派对插件和扩展、主题构建器等）。总之，Bootstrap无处不在，这是人们不断选择的主要原因。Foundation是第二个著名的框架。像ZURB这样有实力的公司一直在支持Foundation，所以这个框架有很强的基础。Foundation已被用于许多大型网站，包括Facebook、Mozilla、Ebay、Yahoo!和国家地理等创建者：ZURB发布时间：2011当前版本：6.3.1流行度：GitHub上25,400颗星描述：“世界上最先进的响应式前端框架”核心概念/原则：RWD、移动优先、语义。框架大小：197.5KB预处理器：Sass响应式布局：是模块化：是启动模板/布局：是图标集：基本图标字体额外/附加组件：是独特组件：图标栏，清除灯箱，FlexVideo，击键，Joyride，定价表文档资源：很好，还有很多其他资源。定制：基本GUI定制器，类似于Bootstrap定制器。浏览器支持：Chrome、Firefox、Safari、IE9+；iOS、Android、WindowsPhone7+许可证：MITFoundation说明Foundation是一个真正专业的框架，可提供业务支持、培训和咨询。它还提供了许多资源来帮助您更快、更轻松地学习和使用该框架。SemanticUISemanticUI是一个具有语义设计的前端开源框架。它利用自然语言原理，从而使代码更具可读性和可理解性。创建者：JackLukic发布时间：2013当前版本：2.2人气：GitHub上34,762颗星描述：“一个基于自然语言原理的UI组件框架”。核心概念/原则：语义、标签矛盾、响应。框架大小：806KB预处理器：低响应式布局：是模块化：是启动模板/布局：是，以及一些基本的入门模板图标集：FontAwesome额外/附加组件：没有独特的部分：分隔线，旗帜，栏杆，显示，步骤、广告、卡片、Feed、项目、统计、调光器、评级、形状。文档资源：很好，Semantic提供了非常有条理的文档，另外还有一个单独的网站用于入门、自定义和创建主题。定制：没有GUI定制器，只能手动定制。浏览器支持：Firefox、Chrome、Safari、IE10+（仅IE9浏览器前缀）、Android4、Blackberry10许可证：MITSemanticUI描述Semantic是此处讨论的所有框架中最具创新性和功能最全的框架。框架的整体结构，类中命名约定的清晰逻辑，语义也优于其他框架。PurePure是一个用纯CSS编写的轻量级模块化框架，其组件可以根据需要一起使用或单独使用。创建者：Yahoo发布：2013当前版本：0.6.2流行度：GitHub上的16,637星描述：“可用于每个Web项目的小型灵活的CSS模块集。”核心概念/原则：SMACSS，极简主义。框架大小：16KB预处理：无响应式布局：是模块化：是启动模板/布局：是图标集：否。您可以改用FontAwesome。额外/附加组件：无独特组件：无文档资源：非常好定制：基本GUI皮肤生成器浏览器支持：最新版本的Firefox、Chrome、Safari；IE7+；iOS6.x、7.x；安卓4.x许可证：雅虎！Inc.BSDPure描述Pure为您的项目提供了一个干净的开始，仅提供基本框架。对于那些不需要功能齐全的框架但只在工作中包含特定组件的人来说，pures是一个理想的选择。UIkitUIkit是一个干净的组件集合，易于使用和自定义。尽管它不像其他框架那样流行，但它提供了相同的功能和质量。创建者：YOOtheme发布时间：2013当前版本：3.0.0流行度：GitHub上的9,422颗星描述：“用于开发快速而强大的Web界面的轻量级模块化前端框架”。核心概念/原则：RWD，移动优先框架大小：326.9KB（如果包含uikit-icons.min.jsSVG图标相关功能，则为384.4KB）预处理器：Less、Sass响应式布局：是模块转换：是启动模板/布局：是图标集：UIkit带有一个SVG图标系统和类库，其中包括越来越多的轮廓图标集合。额外/附加组件：是独特的组件：文章、Flex、封面、HTML编辑器文件：良好的定制：高级GUI定制器仅在版本2（以前的版本）中可用浏览器支持：Chrome、Firefox、Safari、IE9+许可证：MITUIkit说明UIkit已成功用于许多WordPress主题。它提供了灵活而强大的手动定制机制（以前版本的框架还提供了高级GUI定制器）。什么是最适合你的框架？在选择框架时，可以考虑以下几个方面：选择的框架是否足够流行？更多的人气意味着更多的人参与该项目，这意味着更多的教程和社区文章、更多的示例和网站、更多的第三方扩展以及更好的相关网络产品可以与之集成。受欢迎程度还意味着框架更具前瞻性，因为拥有较大社区的框架不太可能被放弃。该框架是否正在积极开发中？一个好的框架需要不断使用最新的网络技术，尤其是在移动方面。框架是否成熟？如果一个特定的框架没有在实际项目中使用和测试过，那么将它用于你的专业项目可能不是一个明智的选择。该框架是否提供了良好的文档？为了促进学习过程，始终需要良好的文档。框架的特殊性是什么？这里的要点是，更通用的框架比具有高度特异性的框架更容易使用。在大多数情况下，最好选择应用最少样式的框架，因为它更容易定制。添加新的CSS规则比重写现有的CSS规则更方便、更有效。如果您仍然不确定要使用哪个框架，可以使用混合搭配方法。当特定框架不能满足您的需求时，您可以混合使用来自两个或多个项目的组件。最后但同样重要的是，现在主流浏览器的最新版本都很好地支持Flexbox和网格布局，构建复杂布局比以往任何时候都容易。这可能会鼓励更多开发人员放弃前端框架并从头开始编写自己想要的布局。前端开发工具介绍：Wijmo是用TypeScript编写的新一代JavaScript/HTML5控件集。全球率先支持AngularJS，提供FlexGrid表格控件、图表等多种控件，性能卓越，零依赖。它是一套完整的用于构建企业应用程序的控件。
