【JavaScript】直接拿来用!最火的前端开源项目(一)
摘要:对于开发者而言,了解当下比较流行的开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。为此,本文整理GitHub上最火的前端开源项目列表,这里按分类的方式列出前九个。
对于开发者而言,了解当下比较流行的开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。为此,本文整理GitHub上最火的前端开源项目列表,内容涵盖了Hack Design、 Designer School、TheExpressiveWeb、如何成为优秀的前端开发工程师、Web开发教学材等,这里按分类的方式列出前九个。
详细内容如下:
一、Architecture
网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。
(1) BEM:该方法可以让开发人员快速开发出网站,延长网站的寿命;保持代码的重用性
(2) Atomic Design:以原子的观点设计系统架构,从具体到抽象构建系统架构
- 托管地址:https://github.com/bradfrost/patternlab
- Video+ Slides
- Atomic Design: Some Thoughts and One Example
- Atomic Design Makes Me Feel Like a Chemist
(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
工作流就是一系列相互衔接、自动进行的业务活动或任务。一个工作流包括一组活动及它们的相互顺序关系,还包括流程及活动的启动和终止条件,以及对每个活动的描述。
(1) Vid:JavaScript开发流程+ 幻灯片
(2) Yeoman:为开发者提供一系列健壮的工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。
(3) Grunt:是一个基于任务的关于JavaScript项目命令行构建工具
(4)前端处理——扁平化构建与自动化
(5) CSSCSS:是一个CSS的冗余分析仪,用于分析冗余
(6) Helium:通过JavaScript工具扫描网站,显示未使用的CSS
(7) Roots
(8) Sparky.js:是一个客户端应用程序框架,可以帮助那些不想订阅特定客户端的MVC框架,却想使用该框架的用户。
(9) Brunch:是一个针对HTML5应用的汇编程序。
(10) Automaton :它是内置在JavaScript中的任务自动化的工具。
(11) Cartero
三、Frameworks
FrameWork即架构,提供了软件开发的框架,使开发更具工程性、简便性和稳定性。
1.JavaScript篇
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能。
(1)Angular: 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。
托管地址: https://github.com/angular/angular.js
学习资源列表:
- AngularJS学习
- AngularJS截屏
- 通过AngularJS建立Huuuuuge应用程序
- AngularJS中的范围原型/原型继承的细微差别是什么?
- AngularJS from Basics to Dependency Injection
- AngularJS做列表应用程序
- AngularJS vs. Ember:It's not even close
- The Hitchhiker’s Guide to the Directive
- 使用Grunt和Angular JS的前端工作流
集成实例
- angular-requirejs-seed
- 使用Bower编写可重用的Angular JS组件
- Native AngularJS directives for Twitter's Bootstrap
- Automating AngularJS With Yeoman, Grunt & Bower
- 在Heroku上使用Grunt优化Angular模板
- 使用AngularJS和PouchDB构建离线应用程序
(2)jQuery:是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
(3)Backbone:是一种帮助开发重量级的javascript MVC 应用框架
(4) Meteor:是一个新鲜出炉的现代网站开发平台,基础构架是 Node.JS + MongoDB,它把这个基础构架同时延伸到了浏览器端,可以同时在服务器端和客户端无差异地调用,本地和远程数据通过 DDP(Distributed Data Protocol)协议传输。
- Meteor.js的最佳学习资源
(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)”,它是用来对网页风格进行设计的。
(1)一组最佳的框架
(2)Twitter Bootstrap:是一个基于HTML,CSS,JAVASCRIPT的简洁灵活的 网站前端框架及组件包。
- Home Page
- Github
- Download
- Bootstrap Hero List: Bootstrap资源列表
- Widgets
- Color and Date Picker
- WYSIHTML5 RTE for Bootstrap
- Bootstrap Image Gallery
- jQuery UI Bootstrap
- Pines Notify:针对Bootstrap或 jQuery UI的JavaScript消息提醒机制
- fuelUX
- A date range picker for Twitter Bootstrap
- Bootbox.js:是基于Twitter Bootstrap开发的一个小型的JavaScript库,用来创建简单的可编程对话框
- Time Picker
- Date/Time Picker
- ReCaptcha
- Bootstrap Modal:扩展自原生的Bootstrap对话框并提供一些额外的功能
- SelectBoxIt
- File Upload
- BootPag:动态分页的jQuery插件
- Bootstrap Arrows:基于Bootstrap实现各种方向的箭头图标
- X-editable:能够让你在页面上创建可编辑的元素
- Pagination
- Slider
- Application Wizard
(3)Themes
- Bootswatch:免费的Twitter Bootstrap主题
- Jumpstart UI:付费的Twitter Bootstrap主题
- Darkstrap:深色主题
- jQuery Mobile Boostrap:一个基于Twitter Bootstrap的jQuery Mobile主题
- Wrapbootstrap
- Wordpress:是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL 数据库的服务器上架设自己的网志
- CSS3 Microsoft Modern Buttons
- BootMetro: Metro风格的Web框架
- Cosmo: Windows 8的主题风格
- Bootstrap Generator:只需点击 "Generate" 就可以编译 Bootstrap CSS文件
- Inspiritas
- Google+
- Flatstrap
- Pinstrap
(4)Misc :一些混合项内容
- Boilerstrap
- Bootstrap GUI PSD:一个工具包主要是启动Web应用程序和网站
- Font Awesome:为Twitter Bootstrap设计标志性字体
- Typo3 Extension
- Bootstrap CDN
- Bootstrap Tour
- Bootsnipp:为Bootstrap HTML/CSS/JS框架设计元素及代码片段
- Form Builder
- PaintStrap: 使用Adobe kuler / COLOURlovers颜色方案生成一个漂亮的Twitter Bootstrap主题
- TODC:一个针对Twitter Bootstrap的Google风格主题
- Layoutit!
- Responsive Grid System
- Responsive Grid System (2)
- Golden Grid System
- Compass
- Pondasee
- Centurion
- Foundation 3
- ProfoundGrid
- Groundwork
- skelJS
- Ink
- neat
- Kube
- rwdgrid
- Simple Grid
- One% CSS Grid
- Workless
- intuit.css:一个强大的、可扩展的、基于Sass、BEM、OOCSS框架
四、Cross Browser
(1)Normalize.css
(2)HTML5 Cross Browser Polyfills
(3)Viewport Component
五、Cross Device
(1)Reponsive
- Vid: Responsive Design Workflow by Stephen Hay + Slides
- Responsive Patterns
- Responsinator
- How to make a Responsive Newspaper-like layout
- The State Of Responsive Web Design
- Facing The Challenge: Building A Responsive Web Application
- Tables
- Events
- Images
- Text
- FitText:该插件能够对文本大小自动调整
- Out Of Words!
- Responsive Font Sizing:字体能够随着屏幕的大小进行自动调整
- Responsive Measure
(2)E-Mail
(3)Mobile
- Frameworks
- jQuery Mobile:为移动设备的优化触摸屏Web Framework
- jQTouch:支持包括 iPhone、Android 等手机,提供一系列功能为手机浏览器WebKit服务的jquery插件。
- Junior
- Emulators
- Scrolling
- jSwipeKinetic
- jQuery.pep.js
- Overscroll:是一个 jQuery 插件,用来最小化 iPhone 和 iPad 上的页面滚动效果处理。
- Zynga Scroller
- pull-to-refresh.js
- Overthrow
- Antiscroll
- Gestures
- jGestures: jQuery 插件允许你添加手势事件,比如: ‘pinch’、‘rotate’、‘swipe’、‘tap’ 和 ‘orientationchange’
- hammer.js:是一个多点触摸手势库。
- Touchy:是一个高度可配置的jQuery插件。
- TouchSwipe
- TipTap
- jQuery.event.swipe
- toe.js :是一个基于 jQuery小型库,允许在触摸设备上使用的复杂手势
- Jester
- JS Touch Layer
- Touch Events and Abstractions
- DOM Objects Manipulation
- jQuery.event.move
- WKTouch:一个JavaScript插件触摸设备,允许多点触控
- Tap Acceleration
- Energize
- Tappable:是一个简单、独立的库为触屏Web浏览器调用tap事件
- Fastclick:是一个简单、易于使用的库,在移动浏览器上的实际反应与单击事件之间消除300ms的滞后性
- Lightning Touch
- Creating Fast Buttons for Mobile Web Applications
- Layout
- Flickable.js :允许为任何元素做触摸控制
- PageSlide:是一个jQuery插件,可以控制一隐藏页面的显示与关闭
- Swipe :是一个轻量级的移动滑动组件,支持1:1的触摸移动、阻力以及防滑
- Swiper:加速移动触摸滑块与硬件之间的转换
- jQuery Mobile Pagination Plugin
- SwipeSlide
- stackable.js:是一个非常重要的jQuery插件,为小屏幕提供的栈表,这在移动设备上具有重要的作用
- Reacting to Device Sensors
- lenticular.js:是一个jQuery插件为创建图片动画,可响应倾斜或鼠标事件
- This End Up: Using Device Orientation
- iOS
- Safari Image Delivery Best Practices
- Safari Graphics, Media, and Visual Effects Coding How-To's
- Safari CSS Visual Effects Guide
- Safari Web Content Guide
- Getting Started with iOS Web Apps
- The iPad Web Design & Development Toolbox
- Targeting the iPhone 4 Retina Display with CSS3 Media Queries
- How do I lock the orientation to portrait mode in a iPhone Web Application?
- jQuery Retina Display Plugin
- retina.js
- Retina Images
(4)Printers
六、Patterns & Snippets
(1)Responsive Patterns
(2)CSS3 Code Snippets
(3)Blueprints:是一组基本的网站概念、组件、插件和布局,以最小的风格易于适应和使用
七、DOM Manipulation
DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予Web开发者一个标准的方法,让他们来访问站点中的数据、脚本和表现层对像。
(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 (免费的、商业化的)
(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
- Squarespace
- BaseKit
- Doomby
- Edicy
- IM Creator
- Jimdo
- Moonfruit
- uCoz
- Webnode
- Webs
- Weebly
- Wix
- Wordpress.com
- Yola
- 1&1 Homepage
文章来源: github.com
【JavaScript】直接拿来用!最火的前端开源项目(一)的更多相关文章
- 直接拿来用!最火的Android开源项目(一) (转)
对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,CSDN特整理了GitHub上最受欢迎的Android及iOS开源项目,本文详细介绍了20个An ...
- 直接拿来用!最火的iOS开源项目
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是G ...
- 直接拿来用!最火的Android开源项目
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
- 转载__直接拿来用!最火的Android开源项目(一)
http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects 已分类汇总到 https://github.co ...
- 最火的Android开源项目(一)
GitHub在中国 的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项 目很是必要.利用这些项目,有时能够 ...
- 【Android 开源】:最火的Android开源项目 第01期
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
- 直接拿来用!最火的Android开源项目(三部完整版)
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
- 最火的Android开源项目(一)
摘要:对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,CSDN特整理了GitHub上最受欢迎的Android及iOS开源项目,本文详细介绍了20 ...
- GitHub上最火的Android开源项目(一)
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
随机推荐
- 【DWT笔记】基于小波变换的降噪技术
[DWT笔记]基于小波变换的降噪技术 一.前言 在现实生活和工作中,噪声无处不在,在许多领域中,如天文.医学图像和计算机视觉方面收集到的数据常常是含有噪声的.噪声可能来自获取数据的过程,也可能来自环境 ...
- 传统IT大佬们,路在何方?
[文/ 任英杰] 2014年第一季度季报陆续出台,互联网公司无疑仍是璀璨明星,一路凯歌,而与互联网企业的蒸蒸日上形成鲜明对照的是传统IT企业的集体黯然失色.分析一下传统IT大佬们发布的数据,用友营业收 ...
- Tachyon框架的Worker心跳及Master高可用性分析
0 概述 分布式框架中的Master-Slave类型,Slave节点负责工作的具体执行,Master负责任务的分发或者相关元数据的存储等.一般情况下,一个Master节点都会对应多个Slave节点,M ...
- Html.DropDownListFor
@Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() {Text = "Yes, I'll be ...
- 【EasyUI】Combobox的联动和onChange/onSelect事件绑定
[效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...
- Linux下的sort排序命令详解(二)
有时候学习脚本,你会发现sort命令后面跟了一堆类似-k1,2,或者-k1.2 -k3.4的东东,有些匪夷所思.今天,我们就来搞定它—-k选项! 1 准备素材 [root@FDMdevBI opt]# ...
- labview事件结构
等待事件发生,并执行相应条件分支,处理该事件.事件结构 包括一个或多个子程序框图或事件分支,结构处理时间时,仅有一个子程序框图或分支在执行.等待事件通知时,该结构可超时. 连线边框左上角的“超时”接线 ...
- linux极点五笔无法输入词组_ibus设置
菜鸟学linux——用的是ubuntu 不知道是不是按个哪些快捷键,极点五笔突然无法输入词组.那个抓狂啊 没关系,设置一下就ok 第一步:右上角输入法,右键——>首选项——>常规——> ...
- SQL2005/8数据库提示单个用户无法操作的解决方法
原因分析: 是操作数据库的用户被锁定了,思路是通过查找目标用户,将其解锁即可,可是这样太麻烦了. 解决办法执行如下sql: USE master; GO DECLARE @SQL VARCHAR( ...
- C和设计原则
---DO NOT REPEAT YOURSELF--- 建设性的懒惰,是程序员的第一美德.最简单的懒惰就是不要重复自己,简单到一个命名规则,例如C语言中: int osip_list_init (o ...