Advertise here with BSA
As a developer, anything that can save you just a little bit of time is well worth its weight in gold. If you agree with that statement, you will love this. What we have for you is our selection of the best, the most useful and the most innovative tools and resources from 2011. That includes frameworks, boilerplates, apps, Javascript resources, CSS3 animations tools…and on…and on. So, no matter what, you are guaranteed to discover something completely new and really, really useful.
The first thing to note about this post is that it doesn’t include any jQuery resources or tools. If you are looking for jQuery resources, you should check out last weeks Top 50 Useful jQuery Plugins from 2011.
This post has been written in collaboration with our sister site
CodeVisually. By clicking on the
CV link next to each resource, you can visit the corresponding CodeVisually page and leave a comment.
CSS Frameworks & Boilerplates
The 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version.
The 1140px CSS Grid SystemCV
Columnal is a grid system has borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) have been taken from 960.gs. Columnal makes web design easier by making your grids fluid, dynamically changing based on the browser size (and even switching to a mobile-style layout if the width is small enough).
ColumnalCV
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. The goal of Less Framework is to make building websites with multiple layouts efficient, and to make the layouts feel consistent.
Less Framework 4CV
The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages without any ugly .grid_x classes in your markup.
The Semantic Grid SystemCV
Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time.
FoundationDocsCV
The Fluid Baseline Grid system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.
Fluid Baseline GridCV
Skeleton is a small collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17? laptop screen or an iPhone.
SkeletonCV
Based on a 12 column grid, the responsive MQFramework has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code. One CSS file imports the framework files and a custom stylesheet for the design of your site. It utilises the @media property to allow you to design your sites for browsers of all sizes.
MQFrameworkCV
Golden Grid System is a folding grid system for responsive design. It comes with folding columns, elastic gutters, a zoomable baseline grid, and the Golden Gridlet, a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.
Golden Grid SystemCV
Button CSS3 UI is a CSS3 framework that lets you easily integrate custom buttons. It’s easy to install and use: download and upload Button CSS3 UI on your server, then paste the code between the head tag in your header with the good path and save.
Button CSS3 UICV
Mobile Boilerplate is a custom template for creating rich and performant mobile web apps. It offers cross-browser consistency for A-grade smartphones, and fallback support for Blackberry, Symbian, and IE Mobile. You get an offline caching setup for free, a media query polyfill, and many common mobile WebKit optimizations.
Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.
Mobile BoilerplateCV
HTML Email Boilerplate creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there – Gmail, Outlook, Yahoo Mail, etc. It provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.
HTML Email BoilerplateCV
CSS Tools & Apps
Sencha Animator is a desktop app that lets you create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices. You can animate text and images with smooth transitions, design buttons with gradients, and embed analytics tracking code – all the while using web standards.
Sencha CSS3 Animator & HTML5 AnimationsCV
prefixMyCSS instantly prefixes your CSS3 code. First, you write your CSS code. Then you paste your code in the prefixMyCSS website’s first block and click the prefix button. All vendor prefixes are added to your code. You can then safely replace your old code.
prefixMyCSSCV
CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It’s handy for rapid CSS development, prototyping and debugging.
CSS TerminalCV
holmes.css is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible, or erroneous HTML and HTML5 markup by adding one class. The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as missing required attributes on tags, potentially improvable markup, deprecated and non-W3C elements and attributes, and others.
holmes.cssCV
CSS Pivot lets you add CSS styles to any website and share the result with a short link. It’s been designed to let you invite others to submit improvements for your website. Just type in the website’s URL in the text field, click the button, and you’re ready to rock.
CSS PivotCV
CSS Lint helps point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don?t want.
CSS LintCV
Normalize.css is a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards. It targets only the styles that need normalizing (ie. ones that have differences between default browser styles). How Normalize.css works is it preserves useful defaults, normalizes styles, corrects bugs, improves usability, and explains what the code does.
Normalize.cssCV
Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices. This CSS spritemap generator helps reduce your website’s loading time by reducing the amount of images and better utilizing the connection.
SpritemapperCV
Sprite Cow is a web-based tool that helps you get the background-position, width and height of sprites within a sprite sheet as a nice bit of copyable CSS. While automated sprite sheet generators are convenient, Sprite Cow gives you control over optimization and compression while saving you time by not having to copy all the positions and sizes from graphics apps.
Sprite CowSprite Cow
Prefixr is a web-based tool that gives you cross-browser CSS in seconds. Put in your code, check off a few optional formatting and exclude options, and click the button to get your cross-browser CSS code.
PrefixrCV
Patternizer is a tool that allows you to create background patterns in just a few minutes. Patterns can then be saved and shared with anyone, allowing for collaboration and remixing.
PatternizerCV
Patternify is a simple CSS pattern generator. Its graphical web-based interface lets you draw the pattern you want, and then it generates the CSS code for you. Instead of having to launch your graphics editor and creating a 2px by 2px image, you can just build your pattern online using this. And with the base64 code, you don’t even need an image file anymore: just include the code in your CSS and you’re ready to rock.
PatternifyCV
CSS3 Patterns Gallery is exactly what it sounds like: a gallery of CSS3 patterns. You get a preview of each pattern in the gallery, and if you like it, just click on it and the code for it will pop up, as well as a full-screen preview of what the pattern will look like. Handy for easy browsing of patterns and quick grabbing of the code to use or modify in your own design.
CSS3 Patterns GalleryCV
CSS3 Shapes is a small resource to help designers and developers with a list of of common and not-so-common geometric shapes you can perform using CSS3.
CSS3 ShapesCV
HTML5 Resources
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this.
ModernizrDocsCV
Response JS is a lightweight, jQuery plugin, that gives designers/devs tools for producing performance-optimized, mobile-first responsive websites. It provides easy-to-use action hooks for dynamically swapping code blocks based on screen sizes and semantic methods for progressively serving images/media via HTML5 data attributes.
Response JavascriptCV
Initializr, based on the HTML5 Boilerplate template, is an HTML5 templates generator that helps you get started with your HTML5 project. It does that by generating a clean customizable template with just what your project needs.
InitializrDocsCV
oCanvas is a JavaScript library intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It?s very straightforward and easy to get started with.
oCanvas – Object-Based Canvas DrawingDemoDocsCV
Gury is a JavaScript library designed to help in the creation of HTML5 and Canvas applications. You can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.
Gury – HTML5 Canvas Utility LibraryDocsCV
Mercury Editor is a fully featured editor much like TinyMCE or CKEditor, but with a different usage paradigm. It expects that an entire page is something that can be editable, and allows different types of editable regions to be specified. It displays a single toolbar for every region on the page, and uses the HTML5 contentEditable features on block elements, instead of iframes, which allows for CSS to be applied in ways that most other editors can’t handle.
Mercury EditorDocsCV
Javascript Resources
Sugar is a Javascript library for working with native objects. It is designed to be intuitive, unobtrusive, and let you do more with less code. It’s simple to understand and easy to use. Sugar is a not a framework for AJAX, animation, or DOM manipulation. In fact, Sugar is not tied to the browser in any way.
SugarCV
Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It provides tons of methods for taking advantage of the audio element and provides a way to group sounds and offers many methods to control them. It degrades gracefully on non-modern browsers.
BuzzDocsCV
FitVids.JS is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
FitVids.JSCV
deck.js is a tool for making modern HTML presentations. Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state looks like and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don't.
deck.jsDocsCV
Adaptive Images, intended to be used with responsive and fluid layout techniques, is a solution that will automatically create, cache, and deliver device-appropriate (it detects the resolution of the visitors screen) of your website’s content images. No need to change your mark-up, it manages its own image re-sizing, and will work on any CMS or even on flat HTML pages.
Adaptive Images in HTMLCV
Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.
Adapt.jsCV
Bootstrap is a toolkit from Twitter built to rapidly kickstart the development of your web apps or sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and comes with the complete style guide documentation.
BootstrapCV
Recurly.js is an open-source Javascript library for creating great looking credit card forms to securely create subscriptions, one-time transactions, and update billing information. The library is designed to create fully customizable order forms while minimizing your PCI compliance scope.
Recurly.jsDocsCV
validate.js is a lightweight (just over 1kb gzipped) JavaScript form validation library inspired by CodeIgniter that allows you to validate form fields from over a dozen rules. It has no dependencies, its customizable and also works in all major browsers (even IE6!).
validate.jsCV
money.js is a super-simple and tiny (just over 1kb!) JavaScript library for realtime currency conversion and exchange rate calculation, from any currency, to any currency.
It can be used with the free, hourly-updating exchange rates from the Open Source Exchange Rates API project, or with static/cached/approximate/justplainwrong exchange rates.
money.jsCV
ApeJS is a tiny framework for developing Google App Engine websites using the JavaScript language. There are other JS frameworks out there that you could use with App Engine – are extremely well made – but I needed something more simple, something that
So if you are looking for a framework that doesn’t come with tons of libraries, like RingoJS and AppEngineJS, and that will prototype applications really quickly you will love ApeJS.
apejsCV
CoderDeck combines Deck.js with the CodeMirror2 highlighting code editor to make it easy to demo and teach live HTML, CSS and Javascript directly in the browser.
CoderDeckCV
Jwerty is a small (1.5kb) JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear. It has no dependencies, but is compatible with jQuery, Zepto or Ender if you include those packages alongside it.
jwertyCV
Ideal Forms is a very easy to use and small framework that helps you build powerful and beautiful online forms. Everything is stylable with CSS and comes packaged with three styles (sapphire, comix and forest) to get you started. It degrades gracefully with javascript disabled.
Ideal FormsCV
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
It is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG.
d3.jsDocsCV
Cube is an open-source system for visualizing time series data, built on MongoDB, Node and D3. If you send Cube timestamped events (with optional structured data), you can easily build realtime visualizations of aggregate metrics for internal dashboards (for example, you might use Cube to monitor traffic to your website).
CubeDocsCV
Microjs is a large collection of micro-frameworks and micro-libraries, with most under 2kb in size. Get exactly what you need and nothing more, keeping the load light.
Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable.
MicrojsCV
Ace is a standalone code editor written in JavaScript with the goal to create a browser based editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded into any web page or JavaScript application.
Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.
ACECV
Kendo UI, making the most out of the web’s latest HTML5, CSS3, and JavaScript standards combines everything needed for modern JavaScript development, including a powerful DataSource, universal Drag-and-Drop, Templates, Themes, and UI Widgets.
Kendo UI Mobile helps developers build apps and sites for mobile devices that always look native. On iOS, its widgets look native to iOS. On Android, the widgets look native to Android. Automatically, Kendo will detectsthe device and apply the proper styling.
Kendo UICV
Tools
Google Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads). The output works in all Webkit browsers such as Chrome and Mobile Safari.
Google SwiffyCV
Instant WordPress is a complete standalone, portable WordPress development environment for Windows. It has a built-in Apache web server, PHP, and MySQL installations that start and stop automatically and comes with dummy posts and pages for fast theme and plugin testing.
Instant WordPressCV
Mobilizer is a Webkit-based Adobe AIR app that lets you preview your mobile websites, design mockups, and local HTML on a variety of phone shells. With Mobilizer all you have to do is visit any URL or drag and drop local HTML, Flash, or even image files. It can export PNGs of device views – perfect for portfolios.
MobilizerCV
You might also like…
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 →
Advertise here with BSA
