Web Developer Tools & Resources
Simply Testable is a free web-based tool that will save you pleanty of time and will take the pain out of routine front-end web testing. It will validate your HTML and give you a detailed overview report of your entire site's successes and failures. Homepage: http://simplytestable.com/
rwdgrid is another responsive grid system based on the popular 960.gs. The naming convention of this grid system is similar to the 960.gs – underscore has been replaced by a hyphen (improving readability).The system has been made for 1200px+ displays, 960px+ displays, 720px+ displays and mobile screens. Homepage: http://rwdgrid.com/ Demo: http://rwdgrid.com/demo/
Frank is a responsive WordPress theme with its main focus on speed – no Javascript frameworks, no unnecessary images, just a simple, no-frills, screaming fast blog. Frank has several different layouts to choose from for your home page. Most layouts let you specify the number of posts to show and from what categories. Templates can [...]
uiji.js is jQuery in reverse, meaning instead of using CSS selectors to find elements, you use the same syntax to create elements. Homepage: http://aakilfernandes.com/uiji.html GitHub: https://github.com/aakilfernandes/uiji
Bi-App-Less and Bi-App-Sass allows you to write your stylesheets once, and have them compiled into 2 different stylesheets one for left-to-right layout, and the other for right-to-left layouts. When using Bi-app-less & Bi-App-Sass, all you have to do is to write your stylesheets once using predefined mixins for those direction related properties, and once you [...]
Ligature Symbols is a free (licensed under the SIL Open Font License) icon webfont with ligature features. Designed by Kazuyuki Motoyama, there are over 250 icons in the set, covering every possible use and also includes 30+ common logos. Homepage: http://kudakurage.com/ligature_symbols/ GitHub: https://github.com/kudakurage/LigatureSymbols
Simple Grid is a basic 12 column (1140px) lightweight responsive grid, not a CSS framework (there are no styles for buttons, tables, typography … etc), that gives you a quick and robust starting point for your design. The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving [...]
Viewport Resizer is a browser-based tool to test any website’s responsiveness by building yourown bookmarklet. All. you have to do is go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. Homepage: http://lab.maltewassermann.com/viewport-resizer/
One% CSS Grid is a percentage based 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. It has two starting options, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view). [...]
Scripted Editor is a fast and lightweight code editor with an initial focus on JavaScript editing. It is a browser based editor and the editor itself is served from a locally running Node.js server instance. The editor is actually the Eclipse Orion editor with a few additional bells and whistles. Anyone familiar with editing in [...]
Deployd is the simplest way to build realtime APIs for web and mobile apps. Ready-made, configurable resources add common functionality to a Deployd backend, which can be further customized with JavaScript Events. Homepage: http://www.deployd.com/ GitHub: https://github.com/deployd/deployd
BootMetro, with a Twitter Bootstrap base, offers simple and flexible HTML, CSS, and Javascript for web apps that would like to use the now popular "Windows 8 MetroUI" style. Homepage: http://aozora.github.com/bootmetro/ GitHub: https://github.com/aozora/bootmetro Demo: http://aozora.github.com/bootmetro/hub.html
Brunch is an assembler for HTML5 applications. It‘s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology. It is a lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity. Homepage: http://brunch.io/
Grid Displayer is a boomarklet that displays the grid of both Twitter Bootstrap (fixed and fluid grid) and Foundation (2.0 and 3.0). It works with Firefox and WebKit browsers. Homepage: http://alefeuvre.github.com/foundation-grid-displayer/ GitHub: https://github.com/alefeuvre/foundation-grid-displayer/
Solidify lets you create clickable prototypes from sketches, wireframe, or mockup. Validate user flows on any device by performing user tests in person, remotely, or on your testers own time to get the feedback you need. Homepage: http://www.solidifyapp.com/
Windy is a jQuery plugin that allows you to rapidly navigate through a pile of items using some CSS 3D transforms and transitions. The continuous navigation effect gives you the impression of a deck of cards or sheets flying away, hence the name. Homepage: http://tympanus.net/codrops/windy-a-plugin-for-swift-content-navigation/ Demo: http://tympanus.net/Development/Windy/
Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions. It currently only has 3D support for webkit and Firefox, all other browsers will fallback gracefully to a simple fade transition when using the 3D effects. Homepage: https://github.com/p-m-p/jquery-box-slider Demo: http://www.philparsons.co.uk/demos/box-slider/
Fbootstrapp is a toolkit designed to kickstart development of Facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical Facebook look and feel. Homepage: http://ckrack.github.com/fbootstrapp/ Demo: http://ckrack.github.com/fbootstrapp/#grid-system Docs: http://ckrack.github.com/fbootstrapp/ GitHub: http://github.com/ckrack/fbootstrapp
Holder.js 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. Homepage: http://imsky.github.com/holder/ Docs: https://github.com/imsky/holder/blob/master/README.md GitHub: https://github.com/imsky/holder
Usergrid is a cloud-based data platform that manages objects and aids in the development of mobile client applications. It provides a core set of commonly used social media application objects, including a rich user model, as well as the ability to create new objects and object collections. Homepage: http://apigee.com/about/products/usergrid/
Tampon is an open-source Buffer app clone. It has been built as a Backbone.js application that communicates with a MongoDB datastore through a REST API written in PHP. Homepage: http://tamponapp.com/ GitHub: https://github.com/julien-c/Tampon/
Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build web applications. Yeoman includes support for linting, testing, minification and much more Homepage: http://yeoman.io/ GitHub: https://github.com/yeoman/yeoman
Bower is a package manager for the web, from Twitter, that lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. Homepage: http://twitter.github.com/bower/ GitHub: https://github.com/twitter/bower
Bonsai is a JavaScript graphics library. Bonsai's main features include: Architecturally separated runner and renderer; iFrame, Worker and Node running contexts; Paths; Assets (Videos, Images, Fonts, SubMovies); Keyframe and time based animations (easing functions too); Path morphing; and much more… Homepage: http://bonsaijs.org/ Demo: http://demos.bonsaijs.org/ Docs: http://docs.bonsaijs.org/ GitHub: https://github.com/uxebu/bonsai
Bootsnipp is an element gallery for web designers and web developers, anybody who is using Twitter Bootstrap will find this website an essential booomark. Homepage: http://bootsnipp.com/
Jarallax is an open-source Javascript library which makes adjusting css based on interaction easy. With Jarallax it's easy to create a parallax scrolling website. Homepage: http://www.jarallax.com/?page=home Demo: http://www.jarallax.com/?page=demo Docs: http://www.jarallax.com/?page=documentation
The Kube Framework is not an overblown responsive CSS framework with multiple layouts and styles, all you have with Kube is a single CSS file. That is were its beauty lies – in its simplicity. The framework also supplies LESS files for the gurus out there who enjoy preprocessing. Homepage: http://kubeframework.com/
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text. Homepage: http://jbrewer.github.com/Responsive-Measure/ GitHub: https://github.com/jbrewer/Responsive-Measure/
Base is a super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers. Homepage: http://matthewhartman.github.com/base/ https://github.com/matthewhartman/base/
floatShare is a jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single-click. It will scroll with your content and can be customized with different start and end points. Homepage: http://www.egrappler.com/jquery-floating-social-share-plugin-floatshare/ Demo: http://www.egrappler.com/floating-social-share-plugin-compact.html