Tag: grid

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 […]

February 1, 2013
How to Write Object Oriented CSS

* 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 […]

July 16, 2010
Free Desktop Wallpaper Background: Black Boxes

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 […]

July 30, 2009