Best web design resources of August 2011

It’s resource time and here’s the August round up that left a plethora of responsive and HTML5 resources, like a responsive grid with golden proportions, HTML5 Boilerplate 2, fluid width videos, images and even responsive sliders. Read on!

Golden Grid System

http://goldengridsystem.com/

GGS is a foundation CSS and HTML pack to build your own responsive grid. The grid hides or displays gutter or columns depending on the width of the device. Among other nice features, the typography baseline is correctly adjusted to match the font size in the differents screen widths so your text and images are always aligned.

HTML5 Boilerplate 2.0

http://html5boilerplate.com/

The metal-solid foundation for HTML 5 released version 2, now using normalize.css as the base stylesheet instead of the old reset, respond.js to embrace responsiveness and Modernizr 2 for HTML 5 compatibility in old browsers.

Fluid width videos for responsive layouts

http://www.netmagazine.com/tutorials/create-fluid-width-videos

A good tutorial by .net magazine that walks you through the layout of fluid videos in responsive environments, including videos placed through iframes or embedded using the object tag.

Responsive Images

https://github.com/filamentgroup/Responsive-Images

This approach to responsive images is better suited for environments where the image size will change dramatically. Instead of merely resizing the image, an image with the (closest) appropriate size is delivered using a combination of .htaccess and JavaScript.

FlexSlider: responsive slider

http://flex.madebymufffin.com/

FlexSlider works as a jQuery plugin providing a slideshow for your responsive layouts. Supports images of course, but also any kind of HTML element, so you can add YouTube videos, maps from Google Maps and any other HTML stuff. Licensed under MIT license.

Test your responsive websites

http://mattkersley.com/responsive/

Test your responsive layout using this online tool that will load your (online) website into several dimensions that mimic those of the iPhone and iPad.

HTML5 Geolocation

http://membership.thinkvitamin.com/library/html5/…/requesting-location?cid=106

In this video, ThinkVitamin teaches how to request the user location using Geolocation feature from HTML 5 specification.

Bootstrap

http://twitter.github.com/bootstrap/

Twitter released Bootstrap: a toolkit to kickstart development of web applications and sites with a foundational CSS and HTML for typography, forms, buttons, tables, grids, navigation and more.

Slides with HTML

http://imakewebthings.github.com/deck.js/

Deck.js is a jQuery plugin that empowers you to create slides for your presentation using only HTML and CSS3.

AJAX loading animation with CSS3

http://fgnass.github.com/spin.js/

With spin.js, you can build your own cross-browser AJAX loading animation using only CSS3 and JavaScript without any image. Spin.js has been licensed under MIT so you can use it on your commercial works.

Zoom Anything

http://css-tricks.com/examples/AnythingZoomer/index.php

Chris Coyier published a jQuery plugin to zoom images, text or other block elements like calendars.

WordPress Resources

Simple Facebook Connect updated to 1.0

http://ottopress.com/2011/sfc-1-0-a-quick-walkthrough/

Samel Wood, A.K.A. Otto, updated his popular plugin Simple Facebook Connect with a myriad of new features and optimizations. If you already use SFC, this update will make it even better.