Various updates

- 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.
crozynski · Feb 2, 2015 · 82b8ed7 · 82b8ed7
1 parent 97d96ba
commit 82b8ed7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git 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
+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:
+
+````
+<a href="url">
+<div>content</div>
+</a>
+````
+
+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.
+
+````
+<div class="category">content</div>
+````
+
+### 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.
diff --git a/index.html b/index.html
@@ -3,12 +3,12 @@
 <head> 
 <title>Fluid Squares v2. A responsive grid experiment.</title> 
 <meta charset="utf-8"> 
-<meta name = "viewport" content="width=device-width, maximum-scale=1"> <!-- Kills text zoom in iOS. Media Queries manage font sizes -->
+<meta name="viewport" content="initial-scale=1">
 <link rel="stylesheet" href="css/screen.css?v=2"> 
 </head> 
 <body> 
 
-<a href="http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2" class="title"> 
+<a href="https://github.com/crozynski/Fluid-Squares" class="title"> 
 <div> 
 <h1>Fluid Squares</h1> 
 <p>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.</p>