https://github.com/crozynski/Fluid-Squares

A fluid grid of square units.
https://github.com/crozynski/Fluid-Squares

Last synced: about 1 month ago
JSON representation

A fluid grid of square units.

• Host: GitHub
• URL: https://github.com/crozynski/Fluid-Squares
• Owner: crozynski
• Created: 2012-08-17T08:26:42.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2015-06-08T00:23:43.000Z (over 9 years ago)
• Last Synced: 2024-08-03T13:04:59.693Z (5 months ago)
• Language: HTML
• Size: 130 KB
• Stars: 32
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-javascript - Fluid-Squares - A fluid grid of square units. - ★ 29 (Boilerplates)

README

        
# Fluid-Squares

## What is it?

A fluid grid of square units using HTML and CSS.

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.

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](http://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.