【译】2017 年 20 个最佳的极简 CSS 框架在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能

无论是在产品设计，还是在研发上，极简主义的应用简直无处不在。如果你和我一样热衷极简主义，那么本文分享的内容，一定是你的“菜”。在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能够为你提供建站必备的组件，帮助你节省时间。Have Fun!

1. Spectre

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-78a62e04637b01ad8de45a4f3f801b04_b.jpg" data-rawwidth="690" data-rawheight="299" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-78a62e04637b01ad8de45a4f3f801b04_r.jpg"&amp;amp;gt;

这是一个轻量级、响应式的现代 CSS 框架，用于快速建站和扩展程序的开发。它通过最佳编码实践和一致性的设计语言，为排版与元素、基于 Flexbox 的响应布局系统、CSS 组件提供了基本样式。

2. Layers

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-30327c440e3dc4015a33f3f059e643b0_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-30327c440e3dc4015a33f3f059e643b0_r.jpg"&amp;amp;gt;

Layers CSS是一个针对实例的 CSS 框架。它具备轻量级、零依赖等特性。

3. Milligram

&amp;amp;lt;img src="https://pic2.zhimg.com/v2-9505c91b2b13774732e65fcb82791ee1_b.jpg" data-rawwidth="690" data-rawheight="311" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic2.zhimg.com/v2-9505c91b2b13774732e65fcb82791ee1_r.jpg"&amp;amp;gt;

Milligram 提供了极简样式设置，便于你快速、简洁的开启建站之旅。虽然它不是一个 UI 框架，但它的设计理念却是以提供优秀的性能、高效的开发效率以及最少的属性重置而构建的。同时，它也是轻量的，在 Gzip 压缩后，它只有 2KB 大小。

4. Cutestrap

&amp;amp;lt;img src="https://pic2.zhimg.com/v2-9c2974fc7902f99cd40f83dc03cc9c0d_b.jpg" data-rawwidth="690" data-rawheight="313" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic2.zhimg.com/v2-9c2974fc7902f99cd40f83dc03cc9c0d_r.jpg"&amp;amp;gt;

如果你在寻找功能丰富的组件，那么 Bootstrap、Foundation 这类框架将会是你的最佳选择。但是，如果你想选择的框架大小是在 normalize.css 与一个完整框架范围之间， Cutestrap 或许是个不错的选择。它在压缩后仅有 8K 大小，可作为 Bootstrap 的轻量级替代方案。

5. Mobi

&amp;amp;lt;img src="https://pic3.zhimg.com/v2-410ab1040fc4e2c302faba85de7f9de6_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic3.zhimg.com/v2-410ab1040fc4e2c302faba85de7f9de6_r.jpg"&amp;amp;gt;

Mobi.css 是一个轻量级、可扩展、移动优先的 CSS 框架。它专注于细节，对于内容丰富的网页能够提供优质的用户体验。虽然，它专注移动端，但桌面客户端的体验也是很棒的。

6. Hack

&amp;amp;lt;img src="https://pic4.zhimg.com/v2-9e78a3b78571e50c736b570d17692e7f_b.jpg" data-rawwidth="690" data-rawheight="435" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic4.zhimg.com/v2-9e78a3b78571e50c736b570d17692e7f_r.jpg"&amp;amp;gt;

Hack 是一个极度简易的 CSS 框架。这有一些示例，你可以了解下。

7. Wing

&amp;amp;lt;img src="https://pic3.zhimg.com/v2-ae9b8614046fe1f540efc0446a9ede12_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic3.zhimg.com/v2-ae9b8614046fe1f540efc0446a9ede12_r.jpg"&amp;amp;gt;

一个基于极简主义设计理念的漂亮的 CSS 框架。

8. Sakura

&amp;amp;lt;img src="https://pic2.zhimg.com/v2-93ff6cc3e3a889de77a73c85777d9061_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic2.zhimg.com/v2-93ff6cc3e3a889de77a73c85777d9061_r.jpg"&amp;amp;gt;

一个易于定制的极简 CSS 框架/主题。

9. Mini

&amp;amp;lt;img src="https://pic4.zhimg.com/v2-b07e7c9647e035b1c0ee5d58e7996fcf_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic4.zhimg.com/v2-b07e7c9647e035b1c0ee5d58e7996fcf_r.jpg"&amp;amp;gt;

Mini 作为一个 Gzip 压缩后不到 7KB 大小的极简框架，它具备响应式、易用性和定制性等特性，旨在为你提供尽可能多的功能。由于它是轻量框架，不仅让你创建的网站和应用程序具备更快的加载速度，而且它所提供的组件可以满足基本的开发要求。

10. Pavilion

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-340fefbdf590b194784a045dc001b404_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-340fefbdf590b194784a045dc001b404_r.jpg"&amp;amp;gt;

Pavilion 是一个简易的 CSS 框架，适合那些不喜欢使用其他框架中附带预定义 UI 组件的开发人员。如果你正在寻找一个简单、轻量、可订制的，并且不会出现代码膨胀的 CSS 框架，Pavilion 将是个不错的选择。

11. Core CSS

&amp;amp;lt;img src="https://pic3.zhimg.com/v2-4d343c63bd7e8095e819f76dd332c88e_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic3.zhimg.com/v2-4d343c63bd7e8095e819f76dd332c88e_r.jpg"&amp;amp;gt;

这是一个构建轻量级响应式网站的前端框架，它没有内置预设元素和动画，只提供了一个超简单的网格体系 – 即它的列是浮动的，行是 self-clearing，而分界点则是按逻辑均匀的分布。你可以按照想要的工作方式，进行定制与使用。

12. Siimple

&amp;amp;lt;img src="https://pic2.zhimg.com/v2-79c8e048b1af8a8e5fe3a28e08aa58b1_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic2.zhimg.com/v2-79c8e048b1af8a8e5fe3a28e08aa58b1_r.jpg"&amp;amp;gt;

Siimple 是一个助你打造扁平化网站风格的轻量、响应式的开源框架。它内置了 SASS / SCSS，为你的网页设计提供了简洁的开始。

13. Scooter

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-4763609bf12ef4ca94c54f7277397718_b.jpg" data-rawwidth="690" data-rawheight="357" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-4763609bf12ef4ca94c54f7277397718_r.jpg"&amp;amp;gt;

专注为 Dropbox 提供基础样式、CSS 组件以及快速静态原型的 SCSS 框架。

14. Workless

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-460b66c369739cf06845b10a98879e40_b.jpg" data-rawwidth="690" data-rawheight="353" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-460b66c369739cf06845b10a98879e40_r.jpg"&amp;amp;gt;

打造更快 Web 应用程序的开源 HTML, CSS 与 JS 框架。

15. Responsive

&amp;amp;lt;img src="https://pic3.zhimg.com/v2-c532af1f8105955cf5b04b42c013c44a_b.jpg" data-rawwidth="690" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic3.zhimg.com/v2-c532af1f8105955cf5b04b42c013c44a_r.jpg"&amp;amp;gt;

一个功能强大、对开发人员友好的，用于构建响应式网站的轻量级前端框架。

16. Kouto swiss

&amp;amp;lt;img src="https://pic2.zhimg.com/v2-d83c83c5a4faa1d4b2cc41a52f8f37e1_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic2.zhimg.com/v2-d83c83c5a4faa1d4b2cc41a52f8f37e1_r.jpg"&amp;amp;gt;

专注于 Stylus 的完整 CSS 框架。它的灵感源自流行的预处理工具库，例如 nib、compass、bourbon.

17. Concise

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-47677a904534a3233833d148f51f6e38_b.jpg" data-rawwidth="690" data-rawheight="369" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-47677a904534a3233833d148f51f6e38_r.jpg"&amp;amp;gt;

Concise 为你的网站设计提供了坚实的基础。它提供了一套仅包含基础样式的简洁框架，并包含了大量开箱即用的功能。同时，你也可以通过使用内核的附加组件进行功能性扩展。

18. Penguin

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-256bceffe846076062beab8382270808_b.jpg" data-rawwidth="690" data-rawheight="272" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-256bceffe846076062beab8382270808_r.jpg"&amp;amp;gt;

Penguin 是一个由 Sass 构建的轻量级、可扩展的前端框架，用于启动任何项目。

19. Base

&amp;amp;lt;img src="https://pic1.zhimg.com/v2-b142a62fc91bbdccf61fa4965b160908_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic1.zhimg.com/v2-b142a62fc91bbdccf61fa4965b160908_r.jpg"&amp;amp;gt;

一个稳固的响应式 HTML 与 CSS 框架。

20. Caramel

&amp;amp;lt;img src="https://pic4.zhimg.com/v2-c42f5dee90c004ff43f7408a6da242eb_b.jpg" data-rawwidth="690" data-rawheight="380" class="origin_image zh-lightbox-thumb" width="690" data-original="https://pic4.zhimg.com/v2-c42f5dee90c004ff43f7408a6da242eb_r.jpg"&amp;amp;gt;

Caramel 是一个简单、现代的完全响应式 Web 框架。你仅需要编写一次代码，即可获得在多平台上相同的效果。

感谢你的阅读。若你有所收获，欢迎点赞与分享。

注：

本文版权归原作者所有，仅用于学习与交流；
如需转载译文，烦请按下方注明出处信息，谢谢！