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

How to Write Object Oriented CSS

Tetris video game cover

* Image taken from the cover art of the world-famous Tetris video game.

Objects Shmobjects.

The first time I heard about Object Oriented CSS was from a tutorial on NetTuts. At the time, I viewed OOCSS as just another random framework somebody was imposing on the web community. I had not given it much thought since then, until I listened to Nicole Sullivan‘s interview on The Big Web Show. She’s a CSS pro who started OOCSS.org and the open-source OOCSS project on github. Nicole has been hired by mega-sites like Facebook to optimize their CSS files. FACEBOOK! That must have been insane!

Oh, OOOOOOOOOh CSS!

Having spent a chunk of the last 4 years of my life learning and working with CSS on a daily basis, I was intrigued to hear the thoughts of an elite CSS Ninja. Half way through the interview I found myself inspired to become an Object Oriented CSS-er.

I started browsing the Google tubes and found a nifty presentation created by Nicole. Enjoy:

The Fast And The Fabulous
http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=velocity-thefastandthefabulous-090622131645-phpapp01&stripped_title=the-fast-and-the-fabulous

If you didn’t have time to click through the slideshow here is a super tiny break down:

Two main principles

  1. Separate structure and skin
  2. Separate container and content

Applying these principles creates efficient CSS code. This means cleaner smaller CSS files that load faster.

What does it look like?

Well, kinda like this…

[html]

</div>
</div>
[/html]

This basic structure is very flexible. By adding classes you can “extend” the object class to fit each scenario the design requires. For example:

[html]<div class="object simple half"> …[/html]

Extending the object class is faster to write and to load.

I’m extremely guilty of writing overly specific CSS, thinking that everything has to have its own ID. Trying to be too semantic, I guess. I’ve confused myself by listening to too many different theories about how to structure your HTML and how to reference selectors in your CSS files.

I’m realizing that all I’ve needed was a little objectivity.

Free Desktop Wallpaper Background: Black Boxes

black dark gray boxes grid background

 

My latest free desktop wallpaper design is an arrangement of dark gray blocks on a black background similar in layout to
Piet Mondrian‘s Composition II in Red, Blue, and Yellow, that he painted in 1930. I’m not saying its as revolutionary as his painting, only that it shares the same balance of visual weight. If you like this wallpaper you can download it for free. Love it or hate, feel free to express your opinion in the comments.