Web Developer Tools & Resources
BigVideo.js makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). You can also use it to show big background images, which is useful for devices that don’t have autoplay for ambient video. Homepage: http://dfcb.github.com/BigVideo.js/ GitHub: https://github.com/dfcb/BigVideo.js
Toast is a simple and easy-to-use twelve column responsive grid CSS framework. Toast includes two main states – a single column layout for narrow screen and mobile devices, and a 12 column layout up to 960px. Homepage: http://daneden.me/toast/ GitHub: https://github.com/daneden/Toast
Sequence.js is a jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 – no jQuery knowledge required. Homepage: http://sequencejs.com Demo: http://sequencejs.com [...]
gridster.js 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. Homepage: http://gridster.net Docs: http://gridster.net/#documentation GitHub: https://github.com/ducksboard/gridster.js
The Annotator is a JavaScript library that can be added to any webpage to make it annotatable. Annotations can have comments, tags, users and more. Moreover, the Annotator is designed for easy extensibility so its a cinch to add a new features or behaviors. Homepage: http://okfnlabs.org/annotator/ Demo: http://okfnlabs.org/annotator/demo/ Docs: http://github.com/okfn/annotator/wiki/ GitHub: http://github.com/okfn/annotator/
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. Homepage: http://lipka.github.com/piecon/ GitHub: https://github.com/lipka/piecon
Ninja is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way. Homepage: http://tetsubo.org/home/ninja/ Docs: http://tetsubo.org/docs/ninja/
blackCalculator is a jQuery plugin for create a calculator. It supports CSS customization, easy translation, two styles of calculators, cross-browser, and allow and disallow keyboard. Homepage: https://github.com/rcoelros/jquery-blackCalculator Demo: http://blackhauz.com.br/blog/wp-content/examples/black_calculator
Prism is a new lightweight (Only 1.5KB minified & gzipped), extensible syntax highlighter, built with modern web standards in mind. Other highlighters encourage users to use elements that are semantically wrong, like <pre> (on its own) or script>. Prism forces you to use the correct element for marking up code: <code>. On its own for [...]
Sidetap is a lightweight (2k when minifyied and gzipped) and simple framework that allows you to quickly build platform-independent mobile web interfaces. It aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices. Homepage: http://sidetap.it GitHub: https://github.com/harvesthq/sidetap
Meny is a three dimensional and space efficient menu concept. CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement. Homepage: http://lab.hakim.se/meny/ Demo: http://lab.hakim.se/meny/ GitHub: https://github.com/hakimel/meny
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope. Homepage: http://cobalys.github.com/JZoopraxiscope/ Demo: http://cobalys.github.com/JZoopraxiscope/ GitHub: https://github.com/cobalys/JZoopraxiscope
Screenqueri.es is a pixel perfect responsive design testing tool. you can test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window. Homepage: http://screenqueri.es
Responsive Email Design is a guide on how to design and code mobile-friendly email campaigns. Now that mobile email usage exceeds desktop and webmail, providing a great small screen experience is essential. Homepage: http://www.campaignmonitor.com/guides/mobile/
TheCodePlayer features video style walkthroughs showing cool stuff being created from scratch. Learn HTML5, CSS3, Javascript, and more. Homepage: http://thecodeplayer.com
With Strapdown.js creating elegant Markdown documents couldn’t be simpler. It uses the <xmp> tag to wrap your Markdown, so that users don’t have to escape special HTML characters, its also search-engine friendly, cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome), completely themeable and, finally, it styles the syntax with Github-style highlighting. Oh, and [...]
Metro UI CSS is a set of styles to create a site with an interface similar to the Windows 8 Metro UI. The set of styles developed as a self-contained solution, although it can be used as an addition to any other CSS framework. Homepage: metroui.org.ua/ GitHub: https://github.com/olton/Metro-UI-CSS
trunk8 is a text truncation extension to jQuery. When applied to a large block of text, it will cut off just enough text to prevent it from spilling over. Unlike conventional truncation that just limits the character length of text, trunk8 measures the content area for spill-over and intelligently chooses the text that best fits [...]
JustGage is a JavaScript plugin for generating and animating nice & clean gauges. It is based on the Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting. Homepage: http://www.justgage.com/
WP-Flex is a blank and responsive boilerplate for developers submitting themes to the WordPress.org theme repository. Includes lots of best practices for theme building requirements and coding standards as suggested by the WordPress Codex. Homepage: http://grayghostvisuals.com/wpflex/ GitHub: https://github.com/grayghostvisuals/WP-Flex
Experiment With Type lets you design and experiment, all in the browser, with web fonts and real content. You can try the most popular web fonts all in one place, including all weights and compare font combinations and build type systems very quickly. Homepage: http://beta.typecastapp.com/experiment-with-type Demo: http://beta.typecastapp.com/experiment-with-type
Express is a high performance and minimal web development framework for Node.js. The Express philosophy is to provide small, robust tooling for HTTP servers. Making it a great solution for single page applications, web sites, hybrids, or public HTTP APIs.Built on Connect you can use only what you need, and nothing more, applications can be [...]
Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is around 1.6kb minified and gzipped and 3kb minified, has no external dependencies, and has been tested in the following browsers: Internet Explorer 6+, Safari, Firefox and Chrome. It has support for keypress, keydown, and keyup events on specific keys, keyboard combinations, or [...]
Responsive 3D Panel Layout is a guide on how to create a responsive panel layout where the panels are arranged in a grid-like structure and transition the elements with 3D effects. Homepage: http://tympanus.net/codrops/2012/06/27/responsive-3d-panel-layout/ Demo: http://tympanus.net/Development/3DPanelLayout/
CSS3 Snippets for Front-end Developers is a collection of open source UI components coded with modern HTML, CSS, and Sass. Homepage: http://www.webinterfacelab.com/snippets
GitHub-Style Sliding Links is a tutorial for creating GitHub-style sliding links–truncated links that expand to full text when your cursor hovers over them–on your website using CSS. Homepage: http://davidwalsh.name/sliding-links Demo: http://davidwalsh.name/dw-content/sliding-links.php
Old School Cassette Player with HTML5 Audio is a tutorial on how to create an HTML5 audio player–that looks like an old school music cassette–with realistic and nostalgic controls. Homepage: http://tympanus.net/codrops/2012/07/12/old-school-cassette… Demo: http://tympanus.net/Development/CassettePlayer/
Evo Slider is an all in one jQuery slider that lets you create any type of content slider and give you the flexibility to use it in a variety of ways – whether you’re building anything from an image gallery, to a banner rotator and lots of things in-between. Homepage: http://evoslider.com Demo: http://evoslider.com/examples.html Docs: http://evoslider.com/doc.html
fd-slider is an unobtrusive accessible slider script that can also be used as an HTML5 Input Range polyfill solution. Homepage: https://github.com/willbryant/fd-slider Demo: http://www.frequency-decoder.com/demo/fd-slider/ Docs: http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyfill/ GitHub: https://github.com/willbryant/fd-slider
Using CSS Sprites to optimize your website for Retina Displays is, as the title says, a guide for optimizing images on your website for Retina displays ie. high resolution displays. Homepage: http://miekd.com/articles/using-css-sprites-to-optimize…