Let’s keep it simple: last year, we did a roundup of 50 of the most useful resources for web developers. Today, we bring to you the 2012 edition, but only better.
And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on.
This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011.
Our 50 Favorite Web Developers Resources and Tools from 2011
50 Most Useful jQuery Plugins from 2012
Top 50 Useful jQuery Plugins from 2011
CSS Frameworks
Base Framework
Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. It contains a minimal HTML5 template (including jQuery), a stylesheet with basic styles (for typography, blockquotes, code, form elements, tables…), a default Javascript file with base enhancements & fallbacks and, finally, a LESS file to easily customize your stylesheet.
Bourbon Neat
Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts.
Kube CSS Framework
The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. All you have with Kube is just what you need to get started – a minimal CSS file.
RWD Grid
The RWD Grid is another responsive grid system based on the popular 960.gs. The naming conventions of this grid system are similar to the 960.gs – underscore has been replaced by a hyphen (improving readability). The stylesheet has no base styles and the framework has been made for 1200px+ displays, 960px+ displays, 720px+ displays and mobile screens.
Gumby 960 Grid Responsive CSS Framework
Gumby offers a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column version or absolutely everything in a single bundle.
Within the framework they’ve packaged up tons of styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns) to help you quickly put together functional prototypes.
Foundation 3
The latest version (3) of Foundation has been built with Sass allowing you to quickly develop Foundation itself – and gives you new tools to quickly customize and build on top of Foundation. The developers have added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively.
Yes, as their taglines states, Foundation is quite possibly the most advanced responsive front-end framework in the world.
Gridiculous – A Fully Responsive Grid Boilerplate
Gridiculous is fully responsive boilerplate based on a twelve column grid (max site widths of 1200px, 960px, 640px, 320px and full width). With Gridiculous you can space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.
Gridiculous – A Fully Responsive Grid Boilerplate →
Responsive Grid System
The Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.
Less+ Framework
Less+ is an extension of the Less Framework with the difference that it has extended support for Internet Explorer. It empowers designers and developers to build websites that can adapt their content depending on screen resolution, making use of the jQuery Media Queries library.
Bootstrap v.2.0 from Twitter
The hugely popular Bootstrap, now in its second version, is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions that uses some of the latest techniques that gives you stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a lightweight (only 6k with gzip) framework.
Wirefy – The Responsive Wireframe Boilerplate
Wirefy is a collection of CSS & JS files to help you experiment with responsive wireframes. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. It is style agnostic so that clients don’t get hung up on colors, fonts, other design elements. Wirefy is meant to be another tool for your development kit that provides the most basic styles as a foundation.
Wirefy – The Responsive Wireframe Boilerplate →
Southstreet
SouthStreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help them deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.
One% CSS Grid
One% CSS Grid is a percentage based 12 column fluid CSS grid system. It has been designed as a base for building responsive web layouts easily, quickly and with minimum effort. It has two starting points, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).
CSS & HTML Tools
Adobe Edge Free Web Fonts
Adobe Edge Web Fonts, powered by Typekit, features hundreds of free web fonts, including some fonts from the Adobe library as well as a large collection of open source fonts.
Css2Less – CSS to LessCSS converter
Css2Less will quickly convert your old CSS files to fresh new LESS files. As simple as copy/paste.
CSSComb – Sort CSS Properties in a Specific Order
CSSComb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.
Cedvel
Cedvel is an application for quickly designing and exporting your own grid system . It aims to ease the grid design process and help you explore alternatives.
Fontello – Easy Iconic Fonts Composer
Fontello lets you combine iconic webfonts for your own project. With fontello you can shrink glyph collections (minimizing font size) and merge symbols from several fonts into a single file. You can choose from four icon fonts, they are: Entypo, Font Awesome, Iconic and Brandico.
HTML5 Please
HTML5 Please offers recommendations for polyfills and implementation so you can decide if and how to put each of the HTML5 features to use.
Stitches – An HTML5 Sprite Sheet Generator
Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click "Generate" and your sprite and stylesheet will be good to go.
Stitches – An HTML5 Sprite Sheet Generator →
Bootstrap Generator – Twitter Bootstrap Generator
The Twitter Bootstrap Generator will allow you to quickly kick-start your Twitter Bootstrap project the way you want. Simply alter the options and click "Generate" to get your compiled Bootstrap CSS file.
CSSO (CSS Optimizer)
CSSO is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.
Web Editors & Playgrounds
EpicEditor – An Embeddable JavaScript Markdown Editor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
dabblet – A Playground for Testing CSS and HTML
dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code.
CodePen
CodePen is useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.
Shiny Demos
Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.
Wireframe Apps
Moqups – HTML5 App For Creating Wireframes
Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts.
Moqups – HTML5 App For Creating Wireframes →
MockNow – An Online Wireframing Sharing Tool
Wireframe.cc
As a swift and minimal app, Wireframe.cc is extremely easy to use, and whether you have prior experience with wireframing apps or not, you will not take long getting accustomed to it.
Responsive Design Tools
RWD Calculator – Turning Pixels into Percentages
RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.
Screenqueri.es – Responsive Design Testing Tool
Screenqueri.es is a responsive design testing tool. It allow you to test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window.
responsivepx – Find that Tricky Breakpoint
responsivepx is a responsive web design testing tool where you enter the URL to your site (local or online) and use the controls to adjust the height and width of your viewport to find the exact breakpoint widths in pixels.
Gridpak – The Responsive Grid Generator
Gridpak is a generator for creating a responsive grid system. Use the simple interface to design your grid and then let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript. Check out this video for a detailed overview:
Viewport Resizer
Viewport Resizer is a browser-based tool to test any website’s responsiveness by building your own 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.
Opera Mobile Emulator
Javascript Libraries & Tools
Crossfilter
Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.
Graphene
Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end).
Foresight.js
Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server.
Javascript Library Boilerplate
The JavaScript Library Boilerplate helps you roll your own Javascript library with a tiny and robust core base. You can create your own library such as jQuery, Zepto, Prototype, etc, very easy and adding your own methods.
Javascript Library Boilerplate →
heatmap.js
heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5 canvas element based on your data.
Kartograph
Kartograph is a lightweight framework for building beautiful, interactive vector map applications without Google Maps or any other mapping service.
Heyoffline.js
Heyoffline.js is a useful tool that warns your users when their network goes down, making sure they don't lose anything.
batman.js
batman.js is a framework for building rich single-page browser applications. It has been written in CoffeeScript and its API is developed with CoffeeScript in mind, but you can also use plain old JavaScript.
uiji.js
uiji.js is jQuery in reverse, meaning instead of using CSS selectors to find elements, you use the same syntax to create elements.
sigma.js
sigma.js is an open-source and lightweight JavaScript library for drawing graphs, using the HTML canvas element. It has been designed to display interactive static graphs exported from a graph visualization software – like Gephi.
jPages
0
jPages is a client-side pagination plugin that gives you a lot more features comparing to most of the other similiar plugins, such as auto page turn, key and scroll browse and showing items with delay.
smoke.js
smoke.js is a very easy to use and flexible framework-agnostic styled alert system for Javascript. It uses CSS animations and background, so there are no images or js animation code making it very lightweight.
Keymaster
Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts.
Leaflet
Leaflet is a lightweight JavaScript library for mobile-friendly interactive maps. Weighing just 22kb of gzipped JS code, it still has all the features most developers ever need for online maps.
stroll.js
stroll.js is a collection of CSS list scroll effects. The style of scroll effect is determined via the class that is set on the list.
skrollr
Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.
KineticJS
KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Socialite.js
Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!
Morris.js
Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.
dynamo.js
dynamo.js gives offers a simple method to generate dynamic bits of HTML and add subtle effects to your content.
URI.js
URI.js is a Javascript library for working with URLs. It offers a "jQuery-style" API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().
JavaScript Console – Debugging JavaScript Tool
JSconsole is a simple tool for debugging Javascript and remote debugging mobile web apps.
Holder.js
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.
Yeoman
Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build web applications.
Retina.js
Retina.js is an open-source script that makes it easy to serve high-resolution images to devices with retina displays.
15 Responsive CSS Frameworks Worth Considering →
15 Free WordPress Themes with a Responsive Layout →
CSS Form Templates, Tools & Services →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →
50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
50 Useful Tools and Generators for Easy CSS Development →
50 Fundamental jQuery Controls, Components and Plugins →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
20 Awesome jQuery Enhanced CSS Button Techniques →
15 jQuery Plugins for Better Web Page Element Layouts →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →
Source : internetwebsitedesign[dot]biz
0 comments:
Post a Comment