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

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

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