码迷,mamicode.com
首页 > 其他好文 > 详细

直接拿来用!最火的前端开源项目(一)

时间:2014-08-30 05:36:59      阅读:445      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   color   os   使用   io   

对于开发者而言,了解当下比较流行的开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。为此,本文整理GitHub上最火的前端开源项目列表,内容涵盖了Hack DesignDesigner SchoolTheExpressiveWeb如何成为优秀的前端开发工程师Web开发教学材等,这里按分类的方式列出前九个。

详细内容如下:

一、Architecture

网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。

bubuko.com,布布扣

(1) BEM:该方法可以让开发人员快速开发出网站,延长网站的寿命;保持代码的重用性
(2) Atomic Design:以原子的观点设计系统架构,从具体到抽象构建系统架构

bubuko.com,布布扣

 

(3) Aura:是一个事件驱动的架构,利用可重用的部件,开发可扩展的应用程序 
(4) Terrific.js:提供一个可扩展的JavaScript架构,帮助你对JQuery/Zepto代码进行模块化。 
(5) 大型JavaScript应用程序架构的模式e
(6) 视频:Nicholas Zakas:可扩展的JavaScript应用程序架构
(7) 图书:学习JavaScript设计模式
(8) 图书:雄辩的JavaScript
(9) 图书:深入单页面的应用程序
(10) jQuery的应用程序架构图
(11) 如何管理大型jQuery的应用程序
(12) 对于CSS的可扩展和模块化架构
(13) 比较不同观察者模式之间的实现过程

 

二、Workflow 

工作流就是一系列相互衔接、自动进行的业务活动或任务。一个工作流包括一组活动及它们的相互顺序关系,还包括流程及活动的启动和终止条件,以及对每个活动的描述。

bubuko.com,布布扣

(1) Vid:JavaScript开发流程+ 幻灯片
(2) Yeoman:为开发者提供一系列健壮的工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。 
(3) Grunt:是一个基于任务的关于JavaScript项目命令行构建工具

(4)前端处理——扁平化构建与自动化

(5) CSSCSS:是一个CSS的冗余分析仪,用于分析冗余
(6) Helium:通过JavaScript工具扫描网站,显示未使用的CSS
(7) Roots
(8) Sparky.js:是一个客户端应用程序框架,可以帮助那些不想订阅特定客户端的MVC框架,却想使用该框架的用户。 bubuko.com,布布扣
(9) Brunch:是一个针对HTML5应用的汇编程序。
(10) Automaton :它是内置在JavaScript中的任务自动化的工具。
(11) Cartero

三、Frameworks

FrameWork即架构,提供了软件开发的框架,使开发更具工程性、简便性和稳定性。

bubuko.com,布布扣

1.JavaScript篇

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能。

(1)Angular: 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。

托管地址: https://github.com/angular/angular.js

学习资源列表:

集成实例

(2)jQuery:是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。

(3)Backbone:是一种帮助开发重量级的javascript  MVC 应用框架 (4) Meteor:是一个新鲜出炉的现代网站开发平台,基础构架是 Node.JS + MongoDB,它把这个基础构架同时延伸到了浏览器端,可以同时在服务器端和客户端无差异地调用,本地和远程数据通过 DDP(Distributed Data Protocol)协议传输。

(5) Reactby Facebook
(6) Flight:是一个事件驱动的Web框架,源于Twitter
(7) Singool.js:是开发单页Web应用程序
(8) Knockout:通过应用模型-视图-视图-模型(MVVM)模式,简化动态JavaScript的用户界面
(9) Sammy.js:是一个很小的JavaScript框架,为开发JavaScript应用程序提供一个基本的架构。
(10) Ember.js:是一个框架,使用该框架创建Web应用程序。
(11) Maria:针对于JavaScript应用程序的MVC框架。The real MVC、The Smalltalk MVC、The Gang of Four MVC。
(12) Terrific Composer:是一个前端开发框架构,专为构建高级前端而设计的
(13) Rivets.js:轻量级且强大的数据绑定+模板解决方案为了创建Web应用程序。
(14) Synapse
(15) 较为全面的JavaScript应用程序框架
(16) JavaScript Data Binding Frameworks

2.CSS篇

CSS称为“风格样式表(Style Sheet)”,它是用来对网页风格进行设计的。

bubuko.com,布布扣(1)一组最佳的框架

(2)Twitter Bootstrap:是一个基于HTML,CSS,JAVASCRIPT的简洁灵活的 网站前端框架及组件包。 (3)Themes (4)Misc :一些混合项内容

 

四、Cross Browser

bubuko.com,布布扣

(1)Normalize.css
(2)HTML5 Cross Browser Polyfills
(3)Viewport Component

五、Cross Device

bubuko.com,布布扣

(1)Reponsive

(2)E-Mail
(3)Mobile (4)Printers 六、Patterns & Snippets

 

(1)Responsive Patterns
(2)CSS3 Code Snippets
(3)Blueprints:是一组基本的网站概念、组件、插件和布局,以最小的风格易于适应和使用
七、DOM Manipulation

DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予Web开发者一个标准的方法,让他们来访问站点中的数据、脚本和表现层对像。

bubuko.com,布布扣

 

 

(1)xui:为编写HTML5移动Web应用程序提供的超级微小的DOM库
(2)Tire:提供一个更轻量级的库替代如jQuery、Prototype和Zepto库
八、Typography

 

(1)Quick guide to webfonts via @font-face
(2)How To Achieve Cross-Browser @font-face Support
(3)Google Fonts
(4)Adobe Edge Web Fonts:获得免费使用Web字体 (5)Typekit:在你的网站上轻松使用商业性的Web字体
(6)Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
(7)Typeset.css
(8)typecast
(9)CSSTypography
(10)SO: @font-face fonts only work on their own domain
(11)FitText
(12)TypeButter
(13)slabText
(14)Baseline.js
(15)jKerny
(16)Lettering.js
(17)Trunk8:是一个智能截断文本jQuery插件
(18)bacon
(19)CSS Typography cheat sheet:提升网站的排版功能

九、Services (免费的、商业化的)

bubuko.com,布布扣

(1)colourco
(2)HTML Entity Character Lookup
(3)SpritePad
(4)Responsinator
(5)TheToolbox
(6)HTML Shell
(7)Form Builder
(8)Zen BG
(9)Prepros
(10)site44
(11)Website Builders

文章来源: github.com

直接拿来用!最火的前端开源项目(一)

标签:des   android   style   blog   http   color   os   使用   io   

原文地址:http://www.cnblogs.com/wawahaha/p/3946022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!