20个优秀的前端框架

深碍√TFBOYSˉ_ 2022-01-15 16:53 261阅读 0赞

原文：[http://www.csdn.net/article/2013-02-25/2814245-20-best-front-end-framework][http_www.csdn.net_article_2013-02-25_2814245-20-best-front-end-framework]

**1. **[**Twitter BootStrap** ][Twitter BootStrap]（Apache v2.0；响应式）

时髦、直观并且强大的前端框架，让Web开发变得更加容易。

[![512adc8100dea.jpg][]][512adc8100dea.jpg]

**2. [Foundation ][Foundation]**（MIT；响应式）

最先进的响应式前端框架。

[![512aef04a61d3.jpg][]][512aef04a61d3.jpg]

**3. [960gs][]**（GPL&MIT；响应式）

960gs提供了一个简单的网格系统，适合快速开发。

[![512af4c3dce8b.jpg][] ][512af4c3dce8b.jpg]

**4. [Skeleton][]**（MIT；响应式）

非常漂亮的Web模板，适合响应式、移动友好的开发。

[![512af6d66fcf6_middle.jpg][]][512af6d66fcf6_middle.jpg 1]

**5. [99lime HTML KickStart][]**（Free）

适合网站快速开发的极简HTML构建模块。

[![512af705e0835.jpg][]][512af705e0835.jpg]

**6. [Kube][]**（Free；响应式）

面向专业人员的CSS框架。

[![512af7607d63f.jpg][]][512af7607d63f.jpg]

**7. [Less Framework][]**（MIT；响应式）

自适应的CSS网格系统。

[![512af8a94ecd7_middle.jpg][]][512af8a94ecd7_middle.jpg 1][![512af8c52b61b_middle.jpg][]][512af8c52b61b_middle.jpg 1]

**8. [Flameinwork][]**（Free）

适合懒人开发者的前端微框架。

[![512af84f94d6b.jpg][]][512af84f94d6b.jpg]

**9. [G5 Framework][]**（Free）

(x)HTML5、CSS、PHP前端开发框架。[![512af9539daaa.jpg][]][512af9539daaa.jpg]

**10. [Easy Framework][]**（Free）

Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。

[![512af9c54e300.jpg][]][512af9c54e300.jpg]

**11. [Blueprint][]**（Free）

一个旨在减少开发时间的前端框架。

[![512af9f18bc08.jpg][]][512af9f18bc08.jpg]

**12. [YAML][]**（Creative Commons）

(x)HTML+CSS框架，适合开发现代化浮动布局。

[![512afa3b6bfb6.jpg][]][512afa3b6bfb6.jpg]

**13. [BlueTrip][]**（Free）

一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。

[![512afa56d3b30.jpg][] ][512afa56d3b30.jpg]

**14. [YUI3:Grids CSS][YUI3_Grids CSS]**（BSD）

YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。

[![512c0ccdb3fd1.jpg][]][512c0ccdb3fd1.jpg]

**15. [52framework][]**（Creative Commons）

对HTML5支持非常好，简单易用。

[![512afb416fa97_middle.jpg][]][512afb416fa97_middle.jpg 1]

**16. [elastiCSS][]**（MIT）

一个基于Web接口和印刷布局的简单CSS框架。

[![512afbfa874bd.jpg][]][512afbfa874bd.jpg]

**17. **[Emastic][]（Free）

一个与众不同的CSS框架。

[![512afb6da9ded.jpg][]][512afb6da9ded.jpg]

**18. **[Fluid 960 Gride System][]（GPL/MIT）

Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。

[![512afcc9c3d6e_middle.jpg][]][512afcc9c3d6e_middle.jpg 1]

19. [xCSS][]（MIT）

一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。

[![512afda8d0631_middle.jpg][]][512afda8d0631_middle.jpg 1]

**20. [EM CSS Framework][]**（MIT/GPL）

EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。

[![512afd1e4998c.jpg][]][512afd1e4998c.jpg]

原文链接： [usablica.github.com][]

[http_www.csdn.net_article_2013-02-25_2814245-20-best-front-end-framework]: http://www.csdn.net/article/2013-02-25/2814245-20-best-front-end-framework
[Twitter BootStrap]: http://twitter.github.com/bootstrap/
[512adc8100dea.jpg]: http://cms.csdnimg.cn/article/201302/25/512adc8100dea.jpg
[Foundation]: http://foundation.zurb.com/
[512aef04a61d3.jpg]: http://cms.csdnimg.cn/article/201302/25/512aef04a61d3.jpg
[960gs]: http://960.gs/
[512af4c3dce8b.jpg]: http://cms.csdnimg.cn/article/201302/25/512af4c3dce8b.jpg
[Skeleton]: http://www.getskeleton.com/
[512af6d66fcf6_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512af6d66fcf6_middle.jpg
[512af6d66fcf6_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512af6d66fcf6.jpg
[99lime HTML KickStart]: http://www.99lime.com/
[512af705e0835.jpg]: http://cms.csdnimg.cn/article/201302/25/512af705e0835.jpg
[Kube]: http://imperavi.com/kube/
[512af7607d63f.jpg]: http://cms.csdnimg.cn/article/201302/25/512af7607d63f.jpg
[Less Framework]: http://lessframework.com/
[512af8a94ecd7_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512af8a94ecd7_middle.jpg
[512af8a94ecd7_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512af8a94ecd7.jpg
[512af8c52b61b_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512af8c52b61b_middle.jpg
[512af8c52b61b_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512af8c52b61b.jpg
[Flameinwork]: http://flaminwork.com/
[512af84f94d6b.jpg]: http://cms.csdnimg.cn/article/201302/25/512af84f94d6b.jpg
[G5 Framework]: http://framework.gregbabula.info/
[512af9539daaa.jpg]: http://cms.csdnimg.cn/article/201302/25/512af9539daaa.jpg
[Easy Framework]: http://easyframework.com/
[512af9c54e300.jpg]: http://cms.csdnimg.cn/article/201302/25/512af9c54e300.jpg
[Blueprint]: http://www.blueprintcss.org/
[512af9f18bc08.jpg]: http://cms.csdnimg.cn/article/201302/25/512af9f18bc08.jpg
[YAML]: http://www.yaml.de/
[512afa3b6bfb6.jpg]: http://cms.csdnimg.cn/article/201302/25/512afa3b6bfb6.jpg
[BlueTrip]: http://bluetrip.org/
[512afa56d3b30.jpg]: http://cms.csdnimg.cn/article/201302/25/512afa56d3b30.jpg
[YUI3_Grids CSS]: http://yuilibrary.com/yui/docs/cssgrids/
[512c0ccdb3fd1.jpg]: http://cms.csdnimg.cn/article/201302/26/512c0ccdb3fd1.jpg
[52framework]: http://52framework.com/
[512afb416fa97_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512afb416fa97_middle.jpg
[512afb416fa97_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512afb416fa97.jpg
[elastiCSS]: http://elasticss.com/
[512afbfa874bd.jpg]: http://cms.csdnimg.cn/article/201302/25/512afbfa874bd.jpg
[Emastic]: http://code.google.com/p/emastic/
[512afb6da9ded.jpg]: http://cms.csdnimg.cn/article/201302/25/512afb6da9ded.jpg
[Fluid 960 Gride System]: http://www.designinfluences.com/fluid960gs/
[512afcc9c3d6e_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512afcc9c3d6e_middle.jpg
[512afcc9c3d6e_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512afcc9c3d6e.jpg
[xCSS]: http://xcss.antpaw.org/
[512afda8d0631_middle.jpg]: http://cms.csdnimg.cn/article/201302/25/512afda8d0631_middle.jpg
[512afda8d0631_middle.jpg 1]: http://cms.csdnimg.cn/article/201302/25/512afda8d0631.jpg
[EM CSS Framework]: http://www.frontendmatters.com/projects/fem-css-framework/
[512afd1e4998c.jpg]: http://cms.csdnimg.cn/article/201302/25/512afd1e4998c.jpg
[usablica.github.com]: http://usablica.github.com/front-end-frameworks/compare.html