Web Developer Tools & Resources
CSS Ratiocinator is a tool that will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the last pixel. It addresses the problem of old CSS whose styles [...]
MobileChief is a powerful and extendable mobile site builder wrapped up in a WordPress plugin. Unlike other WordPress Mobile Plugins, MobileChief doesn't take your existing WordPress site and convert it to a Mobile Optimized Site, rather it lets you create new content in new mobile sites with an intuitive drag and drop interface. Homepage: http://pluginchief.com/ [...]
Breeze is a JavaScript library that helps you manage data in rich client applications. If you store data in a relational database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you. Homepage: http://www.breezejs.com/ Docs: http://learn.breezejs.com/
Parsley.js is a lightweight (12k minified) forms validation JavaScript library with a difference. Instead of validating the forms with JS it uses data attributes to achieve the same effect. It works with both jQuery and Zepto and it is very easy to configure, allowing you to override almost every Parsley default behavior to fit your [...]
Kandan is a free open source chat app that supports: Searchable Message History; File Uploads; Multiple Chat Room Management; Shared Room Audio; Easy deploy to with CloudFoundry, Heroku, dotCloud, etc.; Collaborative team chat; Unlimited channels. Homepage: http://kandan.me/ GitHub: https://github.com/cloudfuji/kandan
Selectik is a cross-browser and completely customizable alternative to the standard select form element all neatly wrapped up in an easy-to-use jQuery plugin. Here are some of its features: TAB key control Original select key control Mouse wheel control Search by first letter Custom/default scroll Smart positioning Auto/custom width Homepage: http://brankub.github.com/selectik/ GitHub: https://github.com/Brankub/selectik
This tutorial demonstrates how to create a smoother reveal mobile menu using CSS3 rather than animating it with JavaScript. Once you click the menu icon, the click event will assign the class of active to the drawer container which alters the translate value to bring the drop-down menu nice and smoothly into view. Modernizr will [...]
Responsive Boilerplate is a minimalistic and lightweight (2kb) CSS3 grid micro-framework. It’s very easy to use and understand, having been built with only a single container and its 12 columns. It also comes pre-packed with some extra CSS helpers for mobile devices. Included in the download package are thae PSD Template, an HTML5 starting point [...]
Originally created in 2011, Bootbox.js is a small JavaScript library that allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. The library exposes three methods designed to mimic Bootstraps native JavaScript equivalents: bootbox.alert(message, callback) [...]
Utilizing jQuery UI, the feature-rich jQuery Custom Scrollbar plugin allows you to, via CSS, customize scrollbars exactly as you need them. It works on all major browsers (incl. IE 10, 9, 8 & 7) and on iOS and Android. It features vertical/horizontal scrolling, mouse-wheel support, scroll easing, adjustable scrollbar height/width and more. Homepage: http://manos.malihu.gr/jquery-custom-content-scroller/ Demo: [...]
Ink is an UI kit for quick development of web interfaces. Built using a combination of HTML, CSS and JavaScript it offers modern solutions for building layouts, display common interface elements and implement interactive features. It is very simple to use and expand on. Included Components: Navigation, Icons, Forms, Alerts, Modals, Galleries, Tables, Tree View, [...]
Vagrant provides the framework and configuration format to create and manage complete portable development environments. These development environments can live on your computer or in the cloud, and are portable between Windows, Mac OS X, and Linux. Homepage: http://www.vagrantup.com/ GitHub: https://github.com/mitchellh/vagrant
Canvas Query is a wrapper library for the HTML5 Canvas element that allows it to be used with a jQuery like syntax. It also adds a lot of common use image manipulation methods which are convenient for game developers. Homepage: http://canvasquery.com/ GitHub: https://github.com/rezoner/CanvasQuery/
Bootstrap Magic, built with AngularJS, is a super-simple Bootstrap themes generator that gives you a live preview of any changes as you make them. The generator does support Less and all of its functions and you can also download your personalized CSS either minified or not. Homepage: http://pikock.github.com/bootstrap-magic/index.html GitHub: https://github.com/pikock/bootstrap-magic
“A theoretical grid for today’s layout challenges.” Bedrock is a responsive, mobile-first 18 column grid that has been designed to easily extend your current grid framework with its mobile classes, in the same way that the Foldy utility does for the 960.gs. Homepage: http://dfcb.github.com/Bedrock/ GitHub: https://github.com/dfcb/Bedrock
Built by Tommi Kaikkonen, the Interactive Guide to Blog Typography is an essential resource that helps you understand some of the key typographic fundamentals you should be using on your blog. Homepage: Interactive Guide to Blog Typography
Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader's behavior without requiring login, authentication, or any server-side processing. Aware.js will track a reader's visits, flag content as new or seen and can insert relative bookmarks (to clearly delineate content added since the [...]
Built on top of a solid full page grid layout, Flowtime.js is a framework for building HTML presentations with ease. The animations are managed with native and accelerated CSS3 transitions and Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options. Homepage: https://github.com/marcolago/flowtime.js Demo: http://flowtime-js.marcolago.com/
Dropzone.js is a light weight JavaScript library for jQuery that turns an HTML element into a dropzone. It supports multiple file uploads and also supports image previews (with nice progress bars). Homepage: http://www.dropzonejs.com/ GutHub: https://github.com/enyo/dropzone
Framer is a modern prototyping tool that can help you quickly build and test complex interactions and rich animations for both desktop and mobile (works great in desktop and mobile Safari or Chrome). It uses webkit CSS transforms to render on the GPU for smooth performance. Homepage: http://www.framerjs.com/ GitHub: https://github.com/koenbok/Framer
Continuum is a JavaScript virtual machine built in JavaScript. It assembles bytecode from sourcecode and executes it in an ES6 runtime environment. The code of the VM is written in ES3, which means it can run in older browsers like IE6. Homepage: http://benvie.github.com/continuum GitHub: https://github.com/Benvie/continuum
Elusive Icons is an icon-font with 270+ icons that has been optimized for use with Twitter's Bootstrap. It was created by the need for an Open-Source font that can be used in your projects without licencing issues. Homepage: http://aristath.github.com/elusive-iconfont/index.html GitHub: https://github.com/aristath/elusive-iconfont
Built in SCSS, Profound Grid is a responsive grid system. Its flexible grid can be either fluid or fixed and you can add per-media layouts as required (by changing the column and gutter widths or adding/removing columns). Unlike other grid systems, Profound Grid uses negative margins to calculate columns, so that fluid layouts will look [...]
Junior is a front-end framework for building native looking HTML5 mobile apps. It features CSS3 transitions optimized for mobile performance, swipable carousels using flickable.js and integrates with backbone.js views and routers. Homepage: http://justspamjustin.github.com/junior/ GitHub: https://github.com/justspamjustin/junior
Built almost entirely of HTML, Javascript and CSS, Droptiles is a Windows 8 Start-like Metro style dashboard. It creates the experience using Tiles. Tiles are mini apps that can fetch data from external sources and by clicking on a tile it will launch the full app. Apps can be from any existing website to customized [...]
Rainbow is a code syntax highlighting library, written in Javascript, that allows you to style your code exactly how you want via CSS. It has been developed to be lightweight (1.4kb), easy to use, and extendable. Homepage: http://craig.is/making/rainbows GitHub: http://github.com/ccampbell/rainbow
Photobox is a lightweight (both the script & CSS are only 7k each) and feature-rich jQuery image gallery modal window script that uses hardware accelerated CSS3 transitions and animations. Here is what this script can do: Images can be zoomed in and out with mousewheel and navigated using mousemove to move around Bottom row of [...]
Built using SASS and CSS3 media queries, Centurion is a responsive web framework. With its easy to learn syntax, it makes building a prototype very simple. It features a 960px grid (that can be scaled down to 320px wide), custom CSS buttons, heading scales based on the size of the browser (uses em, instead of [...]
Analytics.js is an easy solution for integrating analytics into a web app. It does this by not littering your code with third-party-specific calls. Instead of adding hooks for every single analytics service you integrate, you only add a single set of provider-agnostic hooks that then route to any analytics service you wish. Nice and simple! [...]