What is it?

  • A HTML5 fluid grid framework whose units remain square.
  • Column widths increase or decrease to suit your display size using Media Queries.
  • It’s Mobile First, CSS is written for small displays, with Media Queries incorporated as display size increases.
  • It works on all modern desktop browsers, as well as iOS, Android and BlackBerry’s mobile WebKit browsers.
  • Uses css3-mediaqueries.js to work in IE or any browser that supports JavaScript but not Media Queries.

Check it out here www.fluidsquares.com or download fluid-squares-v2.0.zip (24kb). Use it or modify it any way you wish.

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.

What changed in version 2?

The original version of Fluid Squares used transparent images with max-width:100% to make a box stay square in a fluid grid. Thanks to Marco Lago’s (@marcolago) clever update, transparent images are now history thanks to a few clever lines of CSS:

#unit {
  width:50%;
  padding-bottom:50%; 
}

Marco writes on his blog:

It is possible to make full CSS fluid squares without images hack or javascript workarounds? YES! Just think how paddings (and margins) works in the box-model definition. If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element. So if you write: width: 50%; height: 0; padding-bottom: 50%; you get a fluid square box with only a three row CSS declaration.

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 add class=”category” to the div and remove the anchor element.

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.

As far as support goes, Safari 3+, Chrome, Firefox 3.5+, Opera 7+, and IE9 all natively parse Media Queries, as do more recent mobile browsers such as Opera Mobile and all those that run on mobile WebKit. For older browsers and IE less than 9, Version 2 of Fluid Squares uses css3-mediaqueries.js, which makes any browser that supports JavaScript interpret Media Queries.

I’ve also cut down a css reset to bare basics to suit this bare bones grid, customise this to suit your needs.

iOS Safari bug fix

A bug in iOS Safari causes text to run off the screen when switching from portrait to landscape orientation. A JavaScript Safari zoom bug fix fixes this, but I’ve used the non-JavaScript alternative, which is to disable user zooming: <meta name = “viewport” content = “width=device-width, maximum-scale=1“>. Preventing zooming generally isn’t a nice thing to do to a user, but because Fluid Squares uses Media Queries to tailor the layout and font sizes for the mobile device this isn’t a problem. If you wish to support mobile browsers that don’t run on mobile WebKit, use the JavaScript fix instead.

No shiv?

While it’s HMTL5, a shiv isn’t required because it doesn’t use any of the new HTML5 elements. If you want to user <header>, <nav> etc include a shiv. Browsers that don’t natively support new HTML5 elements will then treat them as blocks and allow styling. Consider Remy’s Shiv and Modernizr.

No wrapper?

It uses the body tag as a wrapper, but would certainly work within a standard div wrapper or new HTML5 block elements.

Icons

ico and webclip files are included in the directory. Frustratingly I could not get my Android emulator to display a Web Clip icon when saving a bookmark to the home screen, so removed the apple-touch-icon link rel tag from the head. Matthias Byens has written a thorough article, ‘Everything you always wanted to know about touch icons’, on a subject that is much more convoluted than it should be.

About these ads