Responsive Boxes

Ashim D’Silva

28th March 2013

Media queries are doing a great job giving CSS feedback on the size of the browser window, allowing you to rearrange and organise for different screen sizes. However all boxes must still respond to the size of the entire window, instead of the far more logical: their container.

With design requiring to be responsive, there has been a strong move toward a content-first approach to building HTML. Build each piece that would go into a page first, setting up styles and boxes of content, and then assembling them with the main scaffolding. This often presents a problem.

The problem

Each box needs to be flexible within itself, but the only information media queries provide is the width of the entire browser.

For example (Demo 1):

div>img
{
	width: 100%;
	float: left;
}
@media screen and (min-width: 300px)
{
	div>img
	{
		width: 50%;
	}
}
@media screen and (min-width: 600px)
{
	div>img
	{
		width: 33%;
	}
}
@media screen and (min-width: 900px)
{
	div>img
	{
		width: 16%;
	}
}

Although the top box responds to different sizes showing 1up, 2up, 3up and 6up when the browser changes width, if the parent is provided only half the screen then children become half the size as well. This means the box needs to be redesigned to fit into a smaller space – not very responsive.

Each content piece you design should be able to stretch to all sizes you require of it. This will afford you the flexibility to drop it in wherever you need and not need to rewrite difficult media queries for the new context.

jQuery to the rescue

BoxRespond uses jQuery to circumvent this. Add the class ‘r-box’ to any element, provide the breakpoints you want with a ‘data-r-sizes’ attribute, and the plugin will add gt-* classes when the box reaches the respective sizes.

<div class="r-box" data-r-sizes="200, 400, 600">
	<img src="http://placehold.it/200x200">
		... inside elements ...
	<img src="http://placehold.it/200x200">
</div>

Your CSS doesn’t change for each box, and the box responds to its current size rather than the size of the browser.
Instead of media queries, you write for the classes you’re expecting:

			
div>img
{
	width: 100%;
	float: left;
}
div.gt-200>img
{
	width: 50%;
}
div.gt-400>img
{
	width: 33.333%;
}
div.gt-600>img
{
	width: 16.666%;
}

See the finished product

The top box responds as before. But the half and one-third sized boxes respond to their individual breakpoints even though they are all running off identical CSS.

Get the plugin from jQuery

Fork it on GitHub

Update

I just discovered some articles on the same subject. So take a read through perspectives of people a touch smarter than I am. And hopefully this goes through some chats towards the next CSS spec.

Ian Storm Taylor – Media Queries are a Hack
http://ianstormtaylor.com/media-queries-are-a-hack/

Andy Hume – Responsive Containers
http://blog.andyhume.net/responsive-containers/

I’ve since jumped back and forth on whether it is the responsibility of CSS to adapt a box to its own changing dimensions, or whether a box out of place is a sub-type of that box and warrants its own styling. In some cases, for the sake of modularity, I would actually subclass a module instead of depending on a hard size to change style.

more posts