Update: This version of Fluid Squares has been superseded by version 2. The original version documented below used transparent images with max-width:100% to make a box stay square in a fluid grid. Thanks to Marco Lago’s clever update, transparent images are now history thanks to a few clever lines of CSS.
Fluid Squares is an HTML5 fluid grid with square units, whose layout switches from four to three to two to one columns depending on browser width. It works on the desktop, iOS, Android and BlackBerry’s mobile WebKit browsers. Check it out here www.fluidsquares.com or download here fluid-squares-v1.0.zip (20kb). fluid-squares-v2.o.zip. Feel free to use it, modify it any way you wish.
Boxes that stay square in a fluid grid
Without a fix, the result of reducing a browser window’s width squashes a fluid grid’s squares into rectangles:
To fix this:
- A square transparent placeholder image is used in each unit.
- The image’s max-width is set to 100%.
- The image’s actual size must match the size of the largest instance you intend to display a grid unit.
- Content is laid over the top of each image using an absolutely positioned div.
I can’t take the credit for this idea – see the ‘OUR WORK’ text box on electricpulp.com – but as far as I can Google the method hasn’t been published before.
The ingredients
HTML The basic structure of each unit is a placeholder img and a div for content, nested in an anchor element:
<a href="url"> <img src="img/solid.png" alt=""> <div>content</div> </a>
If you don’t want the entire unit to be a link, see the .category div style. While I’ve used text, the grid unit could simply be an image, in which case the content div would be removed and placeholder image substituted with the image you wish to use. CSS Media queries control the number of columns displayed (4, 3, 2, and 1) on browser resize, with additional media queries providing fine control over font sizes, plus two media queries for mobile devices both portrait and landscape. Values for the mobile devices’ max-device-width were taken from Shichuan’s MBP. Which browsers support media queries? 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 mobile WebKit. Older versions, notably IE, don’t support media queries. I’ve cut down a css reset to bare basics to suit this bare bones grid. Media queries and column widths have been commented. Older browsers IE 8 and below, which don’t support media queries, get the standard 990px four column version via a conditional stylesheet. It is possible to force non-supportive browsers to work with media queries using css3-medaqueries.js. 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 as media queries 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 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 HTML5 new 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.
Testing on mobile emulators
For those of us not lucky enough to own a pile of mobile devices to test on, we have emulators. If you’re on a Mac like me, you’ll need VMWare or Parallels to run the majority of them. You’ll need to be running Vista or Windows 7 for the Windows Phone 7 emulator, though note that WP7 browser doesn’t currently support media queries.
- BlackBerry device simulators (tested)
- iOS Safari iPhone emulator via xCode (tested)
- iOS iPad emulator (tested)
- Android emulator (tested)
- Windows Phone 7 emulator and WP7 Dev Center
- Palm Pre emulator
- Opera Mini browser (browser based emulator that works in Safari, not Chrome for me)
- Nokia Symbian SDKs
Note that there is a browser-based iPhone emulator but I found it produced subtly different results to the actual device.
Thoughts
I have to leave Fluid Squares alone for now but it’s far from perfect. For instance the IE conditional stylesheet could easily be modified from serving a fixed layout to a fluid one. A grid of images which dim to show text on hover would be fantastic. If you’ve got any suggestions or improvements, speak up.
Hi!
I developed a fluid squares grid method that don’t use images.
The result is the same as your, you can check it here:
http://marcolago.com/misc/fluidsquares/
I used the files from your zip but I deleted the images in the markup and edited a little the CSS.
The “Magic” is explained here:
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
and is based on the strict definition of the box model’s vertical paddings that, if specified in percent values their size is a percent of the width of the containing element.
You can download my CSS and check the difference to discover where I modify it.
I hope you appreciate this.
Bye.
That’s awesome Marco. I’ll have a look at this in detail over the weekend.