From 82b8ed7d933ad74e7a18a6b658ad5e0cadb69a62 Mon Sep 17 00:00:00 2001 From: Craig Rozynski Date: Mon, 2 Feb 2015 17:50:43 +0900 Subject: [PATCH] Various updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Changed ‘maximum-scale’ to ‘initial-scale’ in the viewport meta tag. - Changed ‘More about Fluid Squares’ link to point to the Github repo instead of the decommissioned blog. - Updated README.md to incorporate the decommissioned blog’s Fluid Squares content. --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++------ index.html | 4 ++-- 2 files changed, 45 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ab0d6b6..29ddd4b 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,47 @@ -Fluid-Squares -============= +# Fluid-Squares -A fluid grid of square units. +## What is it? -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. +A fluid grid of square units using HTML and CSS. -The original version 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. +Fluid Squares preserves a unit's square proportion within a fluid layout. The number of columns also reduce to suit browser or device width using CSS media queries. -See www.fluidsquares.com for more info \ No newline at end of file +It works on all modern desktop browsers. Media queries are written Mobile First. IE8 doesn't support media queries, so the css3-mediaqueries.js polyfill is temporarily included. + +See [www.fluidsquares.com](www.fluidsquares.com) for more. + +## What problem does Fluid Squares fix? + +Without a fix, the result of reducing a browser window's width squashes a fluid grid's squares into rectangles. + +To fix this each unit's padding-bottom size is set to match its width in percentages. On top of that each unit is a percentage of the global container to determine how many columns there are. + +Setting a unit's width to 25% and padding-bottom to 25% will give you four units in a row that will remain square regardless of screen size or browser window resizing. + +## The ingredients + +### HTML + +The basic structure of each unit is a div for content, which is nested in an anchor element: + +```` + +
content
+ +```` + +If you don't want the entire unit to be a link, a class has been created for that purpose. Just remove the anchor element and add class="category" to the div instead. + +```` +
content
+```` + +### CSS + +Media queries control the number of columns displayed (1, 2, 3, and 4) on browser resize, as well as providing fine control over font sizes. + +It includes a cut down CSS reset to suit this bare bones grid. Replace with a fresh [Reset](http://meyerweb.com/eric/tools/css/reset/) or [Normalize](http://necolas.github.io/normalize.css/) and customise to suit your own needs. + +### No wrapper? + +It uses the body tag as a wrapper, but would certainly work within a standard div wrapper or HTML5 block elements. \ No newline at end of file diff --git a/index.html b/index.html index 4eb573a..0b076d5 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,12 @@ Fluid Squares v2. A responsive grid experiment. - + - +

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.