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

Google+ will improve your social media experience, even if you don’t use it.

Google+ a better social media user experience

The Question

My friend at Good Web Work asked the question,”To what problem is Google+ a solution?”. I started to write a comment on his post, but after the scroll bar popped up on the comment form realized this was blog post material .

I have no idea what I’m talking about

I haven’t used Google+ yet so take this opinion as one from an outsider looking in. I have watched videos, played with demos and read reviews. My first impression: The design looks nice; a clean minimalist interface with an ample use of white space. The overall impression I get is an easy to navigate, light and responsive website. Three cheers for Google for finally letting their designers do their jobs.

You gotta problem?

What problem does Google+ solve? Well, that depends on your definition of a problem. Did the world think Myspace was a big problem before Facebook came out. Probably not, since most users had not experienced anything better. After Myspace users got a taste of simplicity from Facebook’s early interface, the contrast was almost offensive. Now Google+ seems to be positioning themselves as the cleaner, friendlier interface of the social networks.

Competing for the best user experience

I can come up with a few problems Google+ at least attempts to solve. What about the problems of inferior user experience and lack of healthy competition?

The Problems Google+ May Help Solve:

  1. Inferior User Experience – Facebook is great, but there’s plenty of room for enhancements. Google+ Circles, Huddles, and Hangouts appear to be new take on common social media functionality. Circles are supposedly a big improvement on Facebook “Lists”.  Allowing you to group friends more easily and filter what you see and what others see gives more control to the user and hopefully improves the user’s experience. You also have the ability to “Follow”, in the Twitter sense, someone you aren’t “Friends” with, in the Facebook sense. The best of the both worlds perhaps.
  2. Lack of Healthy Competition – Facebook has exploded in the last several years with no one coming close to competing with them as a full social platform. Google can and will compete for users. This will cause Facebook to improve their service in response, only giving users more options and better social media experiences.

Everybody Wins

For most people the current Facebook interface is familiar, so they wouldn’t consider it a problem. The mere fact that Google is launching a very serious social media platform designed from the ground up with the user in mind will benefit all users of social media even if they aren’t using Google+. They are raising the bar and their competitors will have to jump higher.

Yes, according to Neil Postman‘s definition of a problem, a newer/better social network from Google may not solve any of the world’s biggest problems.

It may only help us communicate more efficiently.

What do you think?

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.