為Web前端開發人員準備的一批新的資源和工具

openkk 12年前發布 | 22K 次閱讀工具

Moqups

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

Lettering.JS

gridster.js

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.

Flex

Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead Jason English to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought he would be a fun challenge.

JZoopraxiscope

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

NVD3

This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

Zoomooz.js

Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.

Holder.js

Holder renders image placeholders entirely on the client side. It works both online and offline, and offers a chainable API to style and create placeholders with ease.

Pondasee: Front-end starter kit combined with the power of SCSS & Compass

Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point. Pondasee made with Compass dan SCSS language. Nested rules, variables, mixins, selector inheritance in Scss/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and maintain.

MaxImage 2.0 – jQuery Cycle plugin as Fullscreen Background Slideshow

Introducing the first fullscreen background slideshow plugin that allows you to use jQuery Cycle plugin as a Fullscreen Slideshow. It supports almost all of jQuery Cycle’s functions, transitions, etc.

forkit.js

An experimental animated ribbon which reveals a curtain of additional content.

Lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.

Create.js

Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

gauge.js

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

jQuery UI Touch Punch

Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

Sidetap

Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.

Custom HTML elements for modern browsers

In order to allow for the recognition and parsing of custom HTML tags, X-Tag utilizes a special CSS event mechanism to listen for the creation/parsing of new custom elements (details here). This event is fired and processed by X-Tag regardless of whether the element is present in the source of the document, added by setting innerHTML, or generated dynamically using document.createElement. When the element is initially created, X-Tag inflates it and calls the onCreate lifecycle function. X-Tag also provides an onInsert lifecycle function that is run each time the element is injected into the DOM.

Photon

Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly.

ResponsiveAeon

This’s the new version from HTML5 NewAeon Framework. Now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript.

Enyo

At the heart of Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.

Each piece of an Enyo application is a Component, and Components are constructed out of other Components.

For example, it’s easy to combine an < input > tag and a < label > tag into a LabeledInput Component, which you can use (and reuse) as one atomic piece. But that’s just the beginning. Larger pieces of functionality — a color picker, a fancy report generator, or an entire painting application — can also be packaged as reusable components.

Use the Enyo encapsulation model to divide and conquer large projects. No particular piece of an application need be especially complex. Because combining Components is central to Enyo’s design, it’s natural to factor complex code into smaller pieces. And because Enyo is modular, all these pieces tend to be reusable — within one project, across your projects, or even by other Enyo developers, if you choose.

The Annotator

The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable. Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.

jQuery.my: jQuery plugin that binds HTML with JS objects. In real-time.

FlexSlider 2

ViniSketch Designer

Powerful visual editors for designing your application’s GUI and dataflow; and code editors to keep your development under control. An advanced multitarget engine for managing your application for each device you’re targeting.

Repo.js

Repo.js is a light-weight jQuery Plugin that lets you easily embed a Github repo onto your site. As a plugin or library author this is a great way to showcase the contents of a repo on a project page.

jqmPhp

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

PaperFold for iOS

PaperFold is a simple iOS control that allows hiding of views on the left and right side of the screen by dragging the middle view. The left view supports only 1 fold. The right view supports variable number of folds.

jVectorMap

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers

Cage app

ollaboration just got a whole lot easier. A simple way for designers and teams to share, manage and approve their creative work.

Flickrshow 7.2

Flickrshow is a very simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, and Internet Explorer 6.

Jam

For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.

Mousetrap

Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.6kb minified and gzipped and 3kb minified.

RefineSlide

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.

EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.

PDF.JS

pdf.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance.

pdf.js is community-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.

Backbone.Notifier

Recline

Building on Backbone, Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).

Brackets

With features like Live Development and Quick Edit, Brackets streamlines development without getting in your way.

Foundation 3

Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.

Laravel

Laravel is a clean and classy framework for PHP web development. Freeing you from spaghetti code, Laravel helps you create wonderful applications using simple, expressive syntax. Development should be a creative experience that you enjoy, not something that is painful.