Splashnology Magazine

Responsive Web Design Toolbox: 50 Handy Tools and Services

Responsive Web Design Toolbox: 50 Handy Tools and Services

Earlier we’ve posted some materials on Responsive web design – How to Make a Website for All Devices (Responsive Web Design) and Responsive Web Design: Helpful Articles, Techniques & Tutorials, and some examples of really cool designs in 70 Examples Of Modern Responsive Web Design. And now, we would like to present to your attention some fresh data on this topic that is about grids, frameworks, JavaScript Libraries and jQuery Plugins, online services and testing tools. Hope you’ll find it useful!

Advertisement

Responsive Design Templates and Frameworks

BluCSS Framework

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.
BluCSS Framework in Responsive Web Design Toolbox: 50 Handy Tools and Services
Demo | Download

Tiny Fluid Grid

Tiny Fluid Grid in Responsive Web Design Toolbox: 50 Handy Tools and Services

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDemo | Download

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
Less Framework 4 in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Adapt.js

Adapt.js is a lightweight (826 bytes minified) 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.js in in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
Gridless in Responsive Web Design Toolbox: 50 Handy Tools and Services
Demo | Download

Hardboiled CSS3 Media Queries

Hardboiled CSS3 Media Queries in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations waiting for you. Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.
Mobile Boilerplate in Responsive Web Design Toolbox: 50 Handy Tools and Services

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
Skeleton in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

Fluid Grid

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
Fluid Grid in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
Golden Grid System in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Semantic

The Semantic Grid System. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
Semantic in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Foldy960

A responsive version of the 960 grid.
Foldy960 in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

SimpleGrid

Simple Grid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.
SimpleGrid in Responsive Web Design Toolbox: 50 Handy Tools and Services

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
Columnal in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Flurid

Flurid is a cross-browser fluid width grid system optimized for flexibility (fluidity) and one of the only fluid width grid systems to work in Internet Explorer versions 5.0 and newer* without hiding pixels in margins. Like any grid system, the basic purpose is to break the page into a series of rows and columns, giving the designer an easy, rational way to organize and present content to the user.
Flurid in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

FluidGrids

FluidGrids in Responsive Web Design Toolbox: 50 Handy Tools and Services

inuit.css

inuit.css now has a custom grid system builder for creating fixed or fluid grid system igloos.
inuit.css in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
1140 CSS Grid in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

320 and up

’320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
320 and up in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

Fluid 960 Grid System

Fluid 960 Grid System in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

JavaScript libraries & jQuery plugins

Respond.js

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
Respond.js in Responsive Web Design Toolbox: 50 Handy Tools and Services

Lettering.js

Lettering.js in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
FitText in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Doubletake

A jQuery plugin for responsive images. Intended to be a proof of concept.
Doubletake in in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

imgSizer.js

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
Modernizr in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

Mobilize.js

A HTML5 and Javascript framework to transform websites to mobile sites.
Mobilize.js in Responsive Web Design Toolbox: 50 Handy Tools and Services

wmuSlider

wmuSlider – jQuery responsive slider.
wmuSlider in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Responsive jQuery Slideshow

Responsive jQuery Slideshow in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDemo

Photo Swipe

Image Gallery for mobile and touch devices.
Photo Swipe in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDemo | Download

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Blueberry in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

CSS3-mediaqueries-js

This library make CSS3 Media Queries work in all browsers.
CSS3-mediaqueries-js in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Responsive jQuery Slider Plugin Flexslider

Fully responsive jQuery slider plugin.
Responsive jQuery Slider Plugin Flexslider in Responsive Web Design Toolbox: 50 Handy Tools and Services

Dynamic-Carousel

Responsive Slider with @media queries and JS.
Dynamic-Carousel in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Responsive Web Design Tools and Services

WebPutty

WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.
WebPutty in Responsive Web Design Toolbox: 50 Handy Tools and Services

Debugging CSS Media Queries

Debugging CSS Media Queries in Responsive Web Design Toolbox: 50 Handy Tools and Services
Demo

Responsive Design Testing

Responsive Design Testing in Responsive Web Design Toolbox: 50 Handy Tools and Services

Responsive Containers

Media queries are clearly a huge step forward for responsive layouts. Letting you apply different CSS based on the width of the device or the viewport opens up all sorts of possibilities for adapting content to best fit a given space. Media queries work really well when you want to adjust the core layouts of the site, but they’re less suited to changing styles at a smaller more granular level.
Responsive Containers in Responsive Web Design Toolbox: 50 Handy Tools and Services

resizeMyBrowser

resizeMyBrowser in Responsive Web Design Toolbox: 50 Handy Tools and Services

PXtoEM.com

PX to EM conversion made simple.
PXtoEM.com  in Responsive Web Design Toolbox: 50 Handy Tools and Services

Media Query Bookmarklet

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.
Media Query BookMmarklet in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

ProtoFluid

Rapid Prototyping of Adaptive CSS and Responsive Design.
ProtoFluid in Responsive Web Design Toolbox: 50 Handy Tools and Services

A Fluid Grid Calculator

A Fluid Grid Calculator in Responsive Web Design Toolbox: 50 Handy Tools and Services

Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheets in Responsive Web Design Toolbox: 50 Handy Tools and Services
Download

Responsivepx

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.
Responsivepx in Responsive Web Design Toolbox: 50 Handy Tools and Services

Screenfly

Screenfly allows you to view your website on a variety of device screens and resolutions. Enter a URL and click on GO to get started.
Screenfly in Responsive Web Design Toolbox: 50 Handy Tools and Services

Responsive Data Tables

Responsive Data Tables in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDemo | Download

Sencha

Application services that let you deliver images and data to mobile devices more rapidly and more cost effectively.
Sencha in Responsive Web Design Toolbox: 50 Handy Tools and Services

Responsive Twenty Ten

Responsive Twenty Ten is a child theme of the default WordPress theme. Dan Gavin and Sara Cannon of Birmingham, AL decided to go on a quest to make a responsive WordPress theme.
Responsive Twenty Ten in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

Adaptive Images

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
Adaptive Images in Responsive Web Design Toolbox: 50 Handy Tools and ServicesDownload

You might also be interested in..

Responsive Web Design: Helpful Articles, Techniques & Tutorials
70 Examples Of Modern Responsive Web Design
How to Make a Website for All Devices

7 Comments

  • http://www.the-triumph.com Web Design Company Mumbai

    Nice collection of Resources.

  • Anonymous

    Awesome collection, I feel like a kid in a candy store:)

  • http://www.facebook.com/profile.php?id=562479147 Dave Heywood

    brilliant, was only looking for some sketch templates, but wow, what a collection…

  • Anonymous

    Great stuff, especially 320 & up

  • Tom Hermans

    Okay, everything I assembled is somehow just here on one webpage.. Awesome. (and handy). Lots of best practices in here.

  • Prodyot

    This a great “futuristic” collection and very helpful too.
    Can’t do without these utilities.
    Thanks for sharing.

  • http://sizzlingmagazine.com/ Kieffer Sutherland

    Absolutely wonderful!

  • Advertisement