Applied Masonry, updated Tumblr
Quick post tonight, because I’m really tired. One of those nights when you work because you can’t sleep. (Or can’t sleep because your brain wants to work.) These kinds of nights are great. The tomorrow mornings are less great. Anyway, good stuff going on here.
Now using Masonry!
I used David DeSandro’s jQuery Masonry to get Twitter favorites (one third the column width) and bookmarks (two thirds the column width) to pack together nicely. See the before and after. And in fact, after reading all about Masonry on David’s site I was prepared to bring the code over and set things up … until I realized it comes with the HTML5 Boilerplate that I’m already using! Thanks Paul Irish! Oops, my mistake. Masonry does not come with Boilerplate by default. I guess adding it was so easy, I forgot I did that! So all I had to do was paste in this chunk of code to get things working:
$(window).load(function(){
$('#posts').masonry({
itemSelector: '.f, .b, .t'
});
});For the record, I am increasingly less of a whiz with JavaScript, even though jQuery makes it dead simple. I just don’t use behavioral logic or set up sites from scratch enough to be fluent. For me to use Masonry without reacquainting myself with JavaScript for hours is a testament to the hard work that both David and Paul put into the Masonry and HTML5 Boilerplate instructional materials. David’s Masonry documentation and Paul’s intro to Boilerplate screencast (scroll down) are invaluable.
So I set that up.
This is a longer post than I wanted to write. I am going to pay for this in the morning. Maybe I should start brewing the coffee now, so it’s ready when I wake up. No, that’s a horrible idea. You see, this is what happens when you work too late.
Now applied to Tumblr!
Yep, that’s right. I moved from this very basic, static design/HTML/CSS sketch (view source) to this HTML5 Boilerplated, Masonry’d version (also static), and now to Nice Web Type’s live Tumblr stream. I had to adjust my markup a bit (and because of that, my CSS and snippet of jQuery) in order to get my design idea working with Tumblr’s theme logic. Basically, bookmarks and Twitter favorites look the same to Tumblr. Differentiating them is tricky, because only the favorites are identifiable (via a tag as class). So in my CSS, I rearranged things to style bookmarks and favorites the same (like bookmarks), followed by some more specific rules to make the favorites look like favorites.
Ask me about stuff
One more thing. I turned on Tumblr’s “ask me a question” feature. So please, ask me anything. No question too big or small. In case it’s not evident from the work itself (ha), I am seriously just a dude who knows a little HTML and is learning about HTML5, Tumblr, and typography. Critique welcome, too.
