Our 50 Favorite Web Developers Resources and Tools from 2011
Our 50 Favorite Web Developers Resources and Tools from 2011
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 CSS Grid System
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 SystemCVColumnal
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).
ColumnalCVLess Framework 4
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 4CVThe Semantic Grid System
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 SystemCVFoundation
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.
FoundationDocsCVFluid Baseline Grid
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 GridCVSkeleton
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.
SkeletonCVMQFramework
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.
MQFrameworkCVGolden Grid System
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 SystemCVButton CSS3 UI
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 UICVMobile Boilerplate
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 BoilerplateCVHTML Email Boilerplate
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 BoilerplateCVCSS Tools & Apps
Sencha CSS3 Animator & HTML5 Animations
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 AnimationsCVprefixMyCSS
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.
prefixMyCSSCVCSS Terminal
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 TerminalCVholmes.css
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.cssCVCSS Pivot
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.
Archive
Mobile
RSS
Revista Theme
Tumblr
