Bookmarked responsive web resources

Responsive webdesign has been a hot topic for a while, but I tend to loose track of all useful resources that cross my path. So I’ll try to make list them up.

Feel free to share resources you find useful too!

If you’re not familiar with responsive webdesign I suggest you check out this nice presentation from @bytte:

 

CSS Frameworks:

HTML5 boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

Goldengridsystem

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.

320 and up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.

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.

 Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

 Gridpack

The Responsive grid generator, created by Erskine Design.

Embedding media

fitvidjs (video)

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

Text

letteringjs

A jQuery plugin for radical web typography

 fittextjs

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.

 

SVG

raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

 

Making things work cross browser

selectivizr.js

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

 

Contributions by @baskwalla, @driesdeleay@wolfr, @bengie & @paulirish 

 

About joggink

I'm a freelance frontend developer and a proud member of the dutch fronteers.

05. December 2011 by joggink
Categories: frontend development, javascript, jquery, mobile, SVG | Tags: , | 3 comments

Comments (3)

  1. I would add foundation by Zurb: http://foundation.zurb.com/ and delete Golden Grid since it’s highly inflexible.

  2. Maybe another resource :
    The Responsive grid generator – Created by Erskine Design
    http://gridpak.com/

  3. Pingback: Bookmarked responsive web resources | Bloggink » Web Design

Leave a Reply

Required fields are marked *