Experimenting with teaser columns

[davidbauer]

Right now, we're using four columns each with classes column span3.

I've experimented a bit with different column sizes, like 4/4/4 or 3/4/5 or 4/3/5. This has the advantage that the whole design looks more dynamic and can solve the problem that some rich media (tweets, video) elements can be displayed in full (see issue #55).

Of course, this makes only sense if we can assign elements to columns based on their width (videos to larger columns, links with small images to the thinnest column).

What do you think? (both from a design perspective and from feasibility)

[oliverwehn]

We could use http://isotope.metafizzy.co/index.html for layout stuff, as i easily allows responsive relayouting by changing column count, resorting, adding new elements etc. Also you could set the width depending on the box content without affecting where it will show up on the page.

[davidbauer]

Looks interesting. Do you know if it goes together with Bootstrap (or don't we need Bootstrap any longer once we've implemented Isotope?).

[oliverwehn]

Hmm, I guess Bootstrap is a bit bloated for the little content to be styled here. I’ll give it a try with Isotope as soon as possible.

[davidbauer]

The reason why I'm asking is that we are in fact already using Bootstrap, mainly to make the design responsive.

[oliverwehn]

I don’t think we need it anymore. Relayouting the columns with Isotope is easy.

[davidbauer]

Ok, fine. Will have to check where else we might have Bootstrap dependency.

[dergraf]

I don't see a big problem here. we need a solution for the buttons though.

On 23 January 2013 13:55, David Bauer notifications@github.com wrote:

Ok, fine. Will have to check where else we might have Bootstrap dependency.

— Reply to this email directly or view it on GitHubhttps://github.com/davidbauer/Twitter-Times/issues/59#issuecomment-12594253.

[oliverwehn]

Just did a quick sketch in codepen. What about somethink like this: http://codepen.io/oliverwehn/pen/Kfptx

[davidbauer]

Thanks. It's not column-related, though, is it? Or did you send me the wrong link?

[oliverwehn]

Oh, damn, wrong thread. Should have been posted in “Pocket integration”. Guess, the “we need a solution for the buttons though.” before misled me. Sorry.

To also contribute to the actual topic: I’m still playing around with Isotope for the layout. As you guys are implementing changes and features all the time, I have to get it working first before implementing all needed changes at once into a up-to-date code base of yours.

[davidbauer]

@oliverwehn You might want to have a look at this: http://metafizzy.co/blog/packery-preview/

[oliverwehn]

Thanks for the hint. That’s really a nice one. Got Isotope working so far, but maybe I’ll check out Packery as well as it seems to support responive grid layouts in a more native way.