Fluid Squares

Fluid Squares preserves a unit's square proportion within a fluid layout. Number of columns also reduce to suit browser or device width using CSS media queries.

More about Fluid Squares

V2

V1 used a transparent image with max-width:100%. Marco Lago stepped up with a clever CSS method that eliminates the need for images. This new version also uses css3-mediaqueries.js (now works in IE) and is Mobile First.

Marco Lago's CSS method

HTML +
CSS +
JS =
HTML5

Dive into HTML5

Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript has been published...

diveintohtml5.ep.io/

HTML5 Rocks

Watch the sldeshow that let's you play with HTML5 features. Jump headfirst into HTML5 by experimenting with each API. A showroom of content that you can reuse...

html5rocks.com

WHATWG HTML Living Standard

This specification evolves HTML and its related APIs to ease the authoring of Web-based applications...

whatwg.org

HTML5 Spec for Web Devs

This HTML5 specification is like no other—It has been processed with you, the humble web developer, in mind...

developers.whatwg.org

HTML5.org

HTML5 differences from HTML4.
WHATWG and HTML5 FAQ.
HTML5 validator.
HTML5 (changes) tracker...

html5.org

HTML5 Shiv

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements...

remysharp.com

Modernizr

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it...

modernizr.com

HTML5 Polyfills

All the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them...

github.com/Modernizr

HTML5 Boilerplate

Along with HTML5 Boilerplate's rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script...

html5boilerplate.com

HTML5 Reset

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up...

html5reset.org/

Initializr: Customise Boilerplate

Initializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate...

initializr.com

Video for Everybody

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically...

camendesign.com

HTML5 Browser Test

The HTML5 test score is only an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all...

html5test.com

Activating Browser Modes with Doctype

In order to deal both with content written according to Web standards...

hsivonen.iki.fi

Live DOM Viewer

Markup to test. DOM view. Rendered view. innerHTML view. Log.

software.hixie.ch

Centre your page without a wrapper

The number one suggestion I see from the proprietor of html5gallery.com to submitters is...

camendesign.com

Pixels, ems, percentages, points

Pixel to em conversion made simple. Select your body font size. Voila! Your conversions. Oh la la! Custom conversions...

pxtoem.com

Grid Calculator

Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid...

www.29digital.net

Chrome Developer Tools

The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access...

code.google.com/chrome

Eric Revisits Reset

It was close to four years ago now that I first floated (ha!), publicly refined, and then published at its own home what’s become known as...

meyerweb.com

YUI Best Practices

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices...

developer.yahoo.com

Isobar Code Standards

This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America...

na.isobar.com/standards

Google Code Uni

Read. Learn. Build. $.

code.google.com/edu

CSS

CSS3, Please!

The Cross-Browser CSS3 Rule Generator. You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match...

css3please.com

CSS3 Generator

Another nice way to play with CSS3.

css3generator.com

CSS3 Maker

Another nice way to play with CSS3.

css3maker.com

CSS Gimmicks

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time...

smashingmagazine.com

Ceaser

CSS easing animation tool. Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it...

matthewlein.com/ceaser

Browser CSS Hacks

I don't use CSS hacks anymore. Instead I use IE's conditional comments to apply classes to the body tag. Nonetheless, I wanted to document every browser-specific...

paulirish.com

Efficiently Rendering CSS

I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it?

css-tricks.com

CSS Spriting Tips

One of the most effective ways of speeding up a website’s render time is to reduce the number of HTTP requests required to fetch content. An effective method...

blog.mozilla.com

CSS3 Pie

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

css3pie.com

Selectivizr

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

selectivizr.com

Webkit CSS Properties

Comprehensive list of -webkit properties.

css-infos.net

HTML5 & CSS3 Browser Support

CSS3 properties and selectors. HTML5 web applications, graphics, embedded content, audio and video, form inputs and attributes...

findmebyip.com/litmus

JavaScript

Crockford on JavaScript

Great collection of videos at YUI Theater, particularly from Douglas Crockford on Javascript.

developer.yahoo.com

node.js

Node's goal is to provide an easy way to build scalable network programs. In the "hello world" web server example...

nodejs.org

raphael.js

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you...

raphaeljs.com

jsfiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets...

jsfiddle.net

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development...

jquery.com

jQuery for Designers

Learn how easy it is to apply web interaction using jQuery...

jqueryfordesigners.com

Google JavaScript Style Guide

JavaScript is the main client-side scripting language used by many of Google's open-source projects...

google-styleguide.googlecode.com

High Quality JavaScript

The brilliant Stoyan Stefanov, in promotion of his new book from O’Reilly, “JavaScript Patterns,” was kind enough to contribute an excerpt...

net.tutsplus.com

JavaScript Garden

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language...

bonsaiden.github.com

MDN JavaScript

JavaScript® (sometimes shortened to JS) is a lightweight, object-oriented language, most known as the scripting language for web pages...

developer.mozilla.org

Responsive Design

Responsive Web Design

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page...

alistapart.com

Media Queries Gallery

A collection of responsive web designs...

mediaqueri.es

W3C CSS Media Queries

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features...

w3.org

Media Queries are Fool's Gold

Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false...

cloudfour.com

Fluid Grids

Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client as...

alistapart.com

Fluid Images

I’ve always hated publishing. I don’t mean the industry, but the act. Hitting “print,” sending an email, pressing that “Publish” button on the CMS...

unstoppablerobotninja.com

Grids

Grid Layout W3C Working Draft

Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts...

w3.org

Fluid 960 Grid System

Templates for Rapid Interactive Prototyping...

designinfluences.com

Em-based Typographic Grid

Unlike most of the ready-made grid systems like BluePrint and 960.gs which are based on pixels — I wanted to base it all on ems...

aplus.rs

YUI Grid Framework

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three...

developer.yahoo.com

Tiny Fluid Grid

The happy and awesome way to build fluid grid based websites. Inspired by 1kbgrid.com. Developed with love by Girlfriend's overconfident...

tinyfluidgrid.com

Less Framework

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...

lessframework.com

Sub-Pixel Problems in CSS

Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little...

ejohn.org

Incredible Em & Elastic Layouts with CSS

Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work...

jontangerine.com

Mobile

Rethinking the Mobile Web

This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web...

yiibu.com

Mobile First

For years, most Web teams have designed for the desktop. Mobile, if it even happened, was a port off the desktop version, designed and built before...

lukew.com

Mobile Developers' Guide

This non-commercial brochure provides an overview on the different mobile technologies and platforms. 17 writers contributed their know-how...

enough.de

The One Web Debate

There are two main camps in the mobile web: One Web and Mobile Web...

cloudfour.com

State of the Mobile Web

Every month Opera conducts the definitive analysis of the key trends affecting the mobile Web worldwide. We publish these findings as...

opera.com

W3C Mobile Web Best Practices

This document specifies Best Practices for delivering Web content to mobile devices....

w3.org

Return of the Mobile Stylesheet

The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser...

alistapart.com

HTML5 Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps...

html5boilerplate.com/mobile

320 and Up boilerplate

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s...

stuffandnonsense.co.uk

Mobile Framework Comparison

Web development vs. custom API frameworks. JQTouch, jQuery Mobile, PhoneGap, Sencha Touch, Titanium...

dinosaurswithlaserz.com

Responsive Images

The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different...

filamentgroup.com

Reformat Images for Mobile

Tinysrc a fast, easy - and free - way to reformat graphics and images for mobile devices....

tinysrc.net

Multiple Screen Sizes

So you're a designer and have been tasked with the design of a mobile web site...

mobiforge.com

Mobile browser CSS support

CSS contents and browser compatibility - mobile. My CSS tests, but now on mobile phones...

quirksmode.org

StatCounter GlobalStats

Based on aggregate data collected on a sample exceeding 15 billion pageviews per month collected from across...

gs.statcounter.com

AdMob Mobile Metrics

Over the past two years at AdMob, we’ve experienced the rapid growth in consumer usage of the the mobile...

metrics.admob.com

W3C Mobile Web Best Practices

This document specifies Best Practices for delivering Web content to mobile devices..

w3.org

Global Authoring Practices

This document gives general guidelines for web developers and content authors who are searching for directions to help create sites for the mobile web....

www.passani.it

Smartphone Front-end Matrices

This spreadsheet provides smart-phone information matter to front end mobile web developers...

spreadsheets.google.com

Optimise EDM for Mobile

Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the...

campaignmonitor.com

Quirksmode Mobile

This section contains my official mobile pages. They treat various aspects of mobile web development...

quirksmode.org

W3C mobileOK Checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification...

validator.w3.org/mobile

User Agent Switcher

Chris Pederick's User Agent Switcher is an essential Firefox add-on for anybody in the business of creating mobile web sites...

chrispederick.com

iPad Emulator

Browser-based iPad emulator...

alexw.me

iPhone Emulator

This is a web browser based simulator for quickly testing your iPhone web applications...

testiphone.com

HP/Palm webOS Emulator

Emulator accessible via webOS SDK...

developer.palm.com

Android Emulator

Test your web app on Android, bypass Android's SDK (tested and works a charm).

forum.xda-developers.com

BlackBerry Device Simulators

Welcome Developers! To view software for a BlackBerry product, please select a product from the drop down menu and click Select...

swdownloads.blackberry.com

Windows Phone 7 Emulator

Emulator accessible via Windows Mobile 6 SDK...

swdownloads.blackberry.com

Opera Mini Simulator

Browser-based demo of Opera Mini 6 that functions as it would when installed on a handset...

opera.com

Symbian Emulator

Emulator accessible via Symbian SDK...

forum.nokia.com

Typography

Elements of Typographic Style Applied to the Web

Great reference for laying out type on the web. The Vertical Motion chapter is particularly good.

webtypography.net/toc

How to Size Text in CSS

In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice...

alistapart.com

Typekit

This will change the way you design websites. Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

typekit.com

YUI 3: CSS Fonts

The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size...

developer.yahoo.com