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.
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.
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).
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.
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.
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.
Fluid 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.
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.
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.
Golden 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.
Button 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 UI
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.
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.
CSS 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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
- Why You Should Explain Design Decisions to Your Clients
- Taking a Look at Brand-Related Splash Screens in Web Design
- Beyond Glitched: Using Distorted Images in Web Design
- 8 Fantastic Examples of Variable Fonts in Action
- Fun Ways to Help You Rediscover the Joys of Web Design
- The Pros and Cons of Building Websites with Third-Party Products
- 30 Essential Free Plugins for Sketch App
- My Approach to On-Page SEO in 2019