Quick Tip: LESS Mixins for Pure CSS Pinterest / Masonry style grid layout

Pinterest popularized the masonry grid style layout. Here’s a simple solution for a masonry layout built with pure CSS3, and no javascript or floats.

[css]

// Parent Element, or Container
.grid (@columns: 3, @gap: 10px, @width: 100%) {
-moz-column-count: @columns;
-moz-column-gap: @gap;
-webkit-column-count: @columns;
-webkit-column-gap: @gap;
column-count: @columns;
column-gap: @gap;
width: @width;
}

// Child Element, or Tile
.grid-box (@margin-bottom: 20px) {
display: inline-block;
margin-bottom: @margin-bottom;
width: 100%;
}

// Example: Book Shelf concept
.book-shelf {
background: #fff;
.grid (3, 10px, 960px)
}
.book {
.grid-box (15px);
}

[/css]

Based on Radu’s Masonry CSS. Check out his post for info on browser compatibility and fallbacks.

Advertisements

My plugin gets added to WordPress core!

WordPress 3.5 was released yesterday. After upgrading my site, I checked the editor screen and noticed a tiny tweak that made me smile. It looks like my humble suggestion finally made it in to WordPress core.

Screen Shot 2012-12-11 at 11.59.41 PM

Notice the Add Media button… it’s an actual button! The previous version of the button looked like this:

The old Upload/Insert button or link

It was an easily overlooked text and icon combo labeled “Upload/Insert” . This caused problems for users as I’ve discussed beforeI don’t know if this small change to a more clickable and noticeable “Add Media” button happened because I suggested it, but I’m glad it’s there. So after suggesting this usability improvement to the WordPress core team, their developers took notice and made it happen.

WordPress-usability-improvement-ticket

Thanks, WP devs. Also, I didn’t suggest the name change, but good choice on the new wording from “Upload/Insert” to “Add Media”. Much better.