说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

HTML文档下载 WORD文档下载 PDF文档下载
对于开发者而言,了解当下比较流行的开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。为此,本文整理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项目命令行构建工具

  • Web development is getting complex. Let's go shopping.
  • GruntStart

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

  • 简介
  • 环境设置与Yeoman
  • Grunt  Tasks
  • CSS Famework
(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(写的更少,做的更多)。

  • jQuery Wiki页面“插件/创作”
  • jQuery插件开发样板
  • 关于编写jQuery插件的终极指南
  • 图书:jQuery的基础
(3)Backbone:是一种帮助开发重量级的javascript  MVC 应用框架

  • 图书:开发Backbone.js的应用程序
  • Unsuck your backbone
  • 关于Marionette.js视图的可视化指南
(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 数据库的服务器上架设自己的网志
    • BootstrapWP
    • Roots Theme
    • Bootstrap
    • Bootstrap for Wordpress
    • Bootstrap for WP
    • StrapPress
    • WPBS
  • CSS3 Microsoft Modern Buttons
  • BootMetro: Metro风格的Web框架
  • Cosmo: Windows 8的主题风格 
  • Bootstrap Generator:只需点击 "Generate" 就可以编译 Bootstrap CSS文件
  • Inspiritas
  • Facebook
  • 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
    • Responsive Navigation Patterns
    • Complex Navigation Patterns for Responsive Design
  • Responsinator
  • How to make a Responsive Newspaper-like layout
  • The State Of Responsive Web Design
  • Facing The Challenge: Building A Responsive Web Application
    • This repo contains techniques and concepts to build responsive & hybrid web applications.
  • Tables
    • Responsive Data Tables
    • stacktable.js
    • FooTable
  • Events
    • Breakpoints.js
    • Harvey.js
    • Enquire.js
  • Images
    • Fluid Images
    • How to Use Responsive Images to Make Your Site Shine on Any Platform
    • Adaptive Images
    • Why We Need Responsive Images
    • Riloadr
    • jQuery Picture
    • Picturefill
  • 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
    • thumbs.js
    • Phantom Limb
    • Touché
  • 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
  • Tips And Tricks For Print Style Sheets

六、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字体

      • Edge Web Fonts Website
      (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

      动态组成SQL速句-Delphi资料 多层C/S的客户端调用服务器端的方法-Delphi资料 关于dephi数据库的动态建立-Delphi资料 基 于WEB 的 数 据 库 查 询-Delphi资料 计算数据库某字段的值-Delphi资料 计算字段值-Delphi资料 建立应用软件注册安全机制-Delphi资料 建立自己的数据字典库-Delphi资料 将BLOB字段的BMP图显示出来-Delphi资料 将图像放入数据库中-Delphi资料 解 决sybase 用 户 数 据 库 不 能 进 入 故 障 的 一 种 方 法-Delphi资 解决sybase用户数据库不能进入故障的一种方法-Delphi资料 解决一个DBF表时的"Index not found.."错误-Delphi资料 精简Delphi数据库应用系统 精简Delphi数据库应用系统-定制BDE驱动程序 精简数据库应用系统-Delphi资料 开 发 基 于ORACLE7 数 据 库 的 管 理 信 息 系 统-Delphi资料 开 发AS/400 应 用 系 统: PB5 与Delphi3 的 比 较 利 用Delphi 开 发 响 应 用 户 输 入 的 数 据 库 查 询Web Server 程 利用Delphi开发响应用户输入的数据库查询Web Server程序 利用Tbatch组件完成数据批处理-Delphi资料 如 何 恢 复Sybase SQL Anywhere 的 数 据 库-Delphi资料 如何捕捉KEY VIOLATION等错误-Delphi资料 如何得到SQL返回的计算结果-Delphi资料 如何动态的读取Delphi中的PopupMenu的Caption ? 如何动态设置DBGRID。比如,动态设置DBGRID的COLUMNS。及如何在数值数据格式成千分位 如何返回BDE的状态信息?-Delphi资料 如何控制关键字段的重复输入及报错-Delphi资料 如何设置Microsoft SQL Server 全文索引服务 ?-Delphi资料 如何设置多用户环境的PARADOX数据库-Delphi资料 如何实现在一个Dbgrid中显示多数据库-Delphi资料 各位大虾,帮帮忙!求助如何实现网页访问者的人数 有一个查询问题.快进来.进来有分. 重装Win系统后如何进入Linux系统?? 谁能帮我画这个图??给20分,真的给. 表格中的回车那里去了? 能把这样的VBS脚本改写为VB代码吗? 2000无故奇怪死机! 能把这样的VBS脚本改写为VB代码吗?? 非典时期,你流过几次泪了,我们还需要感动多少次? 先问一下实现性:手机能发送图片,avi和声音吗 2000和xp 共享的问题? 怎么通过netmeeting连上广域网的主机? 能不能将一个文件夹下的图片进行批量上传? 字符串问题: 有关结束进程的问题 谢谢高手 怎样才能学好c语言这门课 帮帮我吧—— 一个简单的问题! 怎样调用Twain设备照相,并将照片放在一个picturebox中 怎样在数据表中查询在某个范围内共有几条记录?(好象很弱的问题) 一个jbuilder的问题[求助] default.asp有IFRAME里面包含list.asp页,list.asp里的链接如何给default.asp传递一个值并刷新它? ★★★如何在界面线程中调用主线程的对象★★★ 如何让jbuilder生成的文件,在没有jbuilder环境的机器上运行? 有人能吧“准女友胸太平”和“一个程序员的艳遇”粘贴后发成贴子吗,我的机子配置差,打不开。估计这种方法可以。谢谢 问有关窗体的参数属性 学计算机的是不是出去闯比较好!但是听到很多大学同学讲,在外面也不容易!很矛盾! ?WSAWaitForMultipleEvents如何退出 在ASP.net怎么用MessageBox啊?? 俺向大家请教一个问题,可以送分! 真无奈,恳求大家帮我! 接下来我应该干什么????!!! 小女子关于数据库连接的一点看法,请指教 请问如何将一个结构体和listview绑定??绑定后listview是不是相当于一个结构体数组 请问各位兄弟:怎样在 本地机打开XML语言的网页 如何在数据窗口的列名的上方家一行标题, 200分寻找fastReport,有的快进。 关于打印的问题 how are you?????????????????/ 一个小问题,请大家帮帮忙! 如何才能实现左边导航条菜单的样子?(www.csdn.net 左边的) JBuilder7.0+weblogic7.0+jsp+编译时为何出错???? 提取文件信息 配置我感兴趣论坛里面的Dreamweaver写成Dreamwaver 在delphi的form中如何根据登陆用户的权限disable/enable Form中的控件 打印问题 请教各位gg很菜很菜的怪怪问题~~~~~~~~~~~*^-^* 关于函数调用 一个有关文件名的问题 为什么出现这种错误?? javascript高手请进!!! 复杂的表格怎样做成报表(vb和access) 日本伊豆大岛因新一轮台风向2300人美媒:斯诺登仍掌握美针对俄中展开情报南京科委存在项目经费挪用现象 市民要武昌一高校今年171人因挂科留级 教成都亚非牙科命案宣判 母亲:希望看到女孩被女老师亲了一口 兴奋得不愿洗脸好声音姚贝娜有望与导师那英同登马年春英国王储查尔斯不急于登基 忧加冕成“外媒:斯诺登握有美国针对他国情报活动韩国军警联合实施独岛防御训练 以抵御奥巴马顾问称监控门对美与盟国关系构成外媒:斯诺登握有美国针对他国情报活动英国王储查尔斯不急于登基 忧加冕成“联合国将向叙利亚民众提供28.6吨紧安倍晋三自曝吸烟史 称未考虑被动吸烟安理会谴责马里特派团遇袭事件 吁迅速默克尔促美签不监控协定 但不中止美欧亚马孙森林4年发现441个新物种加拿大育空地区寻求中国矿业投资《中国好声音》庆功会 210万网友参男女平等程度排名:日本靠后 降至史上长假前基金主动减仓四川泌尿外科疑难病会诊中心成立迷惑女人的五大“谎言”酒香情浓 秋日蟹美七彩池投资让投资人充分了解项目信息游客、景区、旅行社都纠结秋果飘香 采摘正当时不靠谱奶爸正当红成都农博会蓝图初现准备尝鲜海外农产品星巴克中国亚太利润率为欧洲16倍面包车撞罐车2人亡死者家属质疑警车追根本问题上 中国决不能出现颠覆性错误高溢价并购乱象当休矣美债一旦违约 中国恐陷两难三星杯韩国棋手大胜 李世石赛后竟拒绝光大“8·16”赔偿案迟迟未被受理严写生高原 十画家写生联展明日开展[社论]学者“进村”遇阻,乡村重建有城事+读本花数千元未治好病愤而点燃医院大厅国足集训,伤病大面积侵袭
      备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘