Adaptable

Creating a responsive photo gallery is tough. You need to calculate again and again and again. You're a web designer/developer and (face it) math is not your specialty. This Sass mixin allows you to add a simple bit of code in your stylesheet to dynamically calculate widths and margins for your photos.

Demo

Because every thing needs to be demonstrated. View the demo

Browser Support

Adaptable relies heavily on CSS selectors. You will need selectivizr.js to run this under Internet Explorer 7-8.

• Internet Explorer 9+
• Internet Explorer 7-8 (with selectivizr.js)
• Firefox 3.6+
• Chrome 9+
• Safari 4+

How To Use

In your HTML, create a gallery using an unordered list. For example:

	<!-- jQuery + Selectivizr adds support for nth-child in IE browsers 7-8 -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="scripts/selectivizr.js"></script>
	<!-- end selectivizr.js -->
&lt;ul>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">&lt;img src="images/beaker.png" />&lt;/a>&lt;/li>
&lt;/ul>

In your scss or sass document, add the grid mixin:

	@mixin grid($items) {
		list-style: none;
		margin: 0;
		overflow: hidden;
		padding: 0;
		li {
			float: left;
			&:nth-child(1n) {
				margin: 5% 0 0 0;
			}
			@if $items > 1 {
				&:nth-child(1n) {
					margin: (5% / ($items - 1)) (5% / ($items - 1)) 0 0;
				}
				width: (95% / $items);
				*width: (94% / $items);
			}
			&:nth-child(#{$items}n) {
				margin-right: 0;
			}
			&:nth-child(-n+#{$items}) {
				margin-top: 0;
			}
			img, a {
				float: left;
			}
			a {
				text-align: center;
				width: 100%;
			}
		}
	}

Next, apply the mixin to your containing unordered list and specify how many images should be in each row. For example:

	ul {
		@include grid(4);
	}

Done.

When you are in a media query, you can now readjust your gallery to include fewer or more images. For example:

	@media (max-width: 768px) {
		ul {
			@include grid(3);
		}
	}

Latest Changes

1.0.1 - April 2, 2012

• Fixed a numerous amount of browser issues
• Enhanced documentation
• Added selectivizr.js to support earlier versions of IE

1.0 - March 29, 2012

• Initial release. Hooray!