All posts tagged ‘tumblr’

File Under: CSS, JavaScript, Visual Design

jQuery Masonry: Play Tetris With Your CSS Floats

One of the things that’s always on our minds here at Webmonkey and Wired is the wired.com news stream. We produce a huge number of posts every day, and our curated front door only shows the crème de la crème. The rest gets dumped in a river, which is informative, but not that exciting to look at. So we see it as a challenge: how to keep it visually interesting and still show a good mix of stories, all with a minimal amount of fuss and busywork.

Tumblr is a good solution, and one that several other news organizations are using. I happened across the Scaffold theme, and I like how it organizes posts not on a strict grid, but on a fluid grid where elements fill in the gaps around each other. It looks like a Tetris board.

The secret sauce is jQuery Masonry, a plug-in for the popular library by David Desandro.

“Think of it as the flip side of CSS floats,” he writes. “Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

You can grab the code from Desandro or check out the development version on GitHub. Just like jQuery, it’s distributed under an MIT license.

A particularly nice use of it in the wild is Zander Martineau’s Rather Splendid blog.

See also:

File Under: Software & Tools

Sweet Self-hosted Lifestreaming Tool Sweetcron

Sweetcron exampleSweetcron exampleSweetcron is a lightweight, configurable lifestreaming tool that you install on your server. Like services Tumblr and Friendfeed, you set up feeds from other services, such as your blog, Flickr, and Twitter. Sweetcron displays these feeds as your lifestream.

As our online selves get spread out among many different services, we’ll need tools like Sweetcron to bring everything back together. The big selling point of Sweetcron (which is free, so there’s no selling going on here) is its ability to be configured. For an example, see its creator’s site.

Sweetcron requires PHP 5 and MySQL 4.1, available on most web hosts. Installation is easy, though you’ll have to dig into some configuration files to make it work. There’s also fairly good documentation on creating/editing themes. To do some of the more complex stuff will require a little PHP, but you can accomplish quite a bit with CSS alone because each service is classed (ie, Flickr sections are set with class=”flickr_com”).

Be sure to check out the boxy theme that comes with Sweetcron, but isn’t enabled by default. That will get you started on the boxed look that Yong Fook uses on his site.

See also: