"Content in date order"?

[Schweinepriester]

Hi!

At first: Really great post, pretty much what i was looking for, thanks! :)

Could you elaborate on:

if you wanted to display a blog with the content in date order, this would be tricky. I think it would require some extra thought. One solution would be to wrap columns and then populate them in reverse date order. The result would be the newest item being in column one, the second newest in column two and so on.

Which is exactly my use case, i would want to have a masonry with images only in order of capture time.

[jh3y]

Hey @Schweinepriester!

Thanks for the kind words, it's much appreciated 😄

This seems to be the trickiest use case to deal with 😕

I think the issue is trying to make it play nicely responsively. And that's even after solving how to render things in the correct order in the DOM. As this is aiming to be pure CSS, it's a little out of scope. But with some JavaScript, you could modify the structure slightly once the request for images has been made.

As for the pure CSS approach. I may be overlooking something simple with the flexbox/multi column layout specification but I haven't come up with a solution yet and not sure if there is a simple one.

Approach 1: jsbin.com/kozirih...

The solution I propose in the post was a quick one off the top of my head without any time to truly explore it. My idea was something along the following. If we say have items 1 through 7 going where 1 is the newest and seven oldest, we could populate columns in that order filling one column at a time. Consider;

<div class="layout">
  <div class="column">
    <div class="panel panel--1">1</div>
    <div class="panel panel--4">4</div>
    <div class="panel panel--7">7</div>
  </div>
  <div class="column">
    <div class="panel panel--2">2</div>
    <div class="panel panel--5">5</div>
  </div>
  <div class="column">
    <div class="panel panel--3">3</div>
    <div class="panel panel--6">6</div>
  </div>
</div>

We could set our layout block to display: flex and ensure that each column was equal width. This would display fine and as intended... almost. But what about when we want it to act responsive?

When we scale down to mobile, the assumption is that we would want them all to stack nicely on top of each other in order. I had thought there might be some way to use the order property on flex items that are nested by applying it to the panels ensuring they were ordered correctly on the lower viewport. However, the assumption was that this wouldn't work because we are hoping that display: flex elements will almost overlook the column elements altogether and just look at the panels beneath. This is a behaviour similar to how absolutely positioned elements behave within the nearest relatively positioned element.

Approach 2: jsbin.com/zoxiwe...

Alternatively, we could discard the column elements altogether and develop mobile first so that they are all stacked by default. When we scale up to larger viewport we can define an order for them to move into and using defined height on the panels and the layout, try to get it all to layout nicely. The issue with this approach is that it just doesn't seem to be flexible enough. It also will most likely remove any of the staggered masonry aesthetic that we are striving for because of how flex items will stretch to align etc. and leave gaps when wrapping.

Not ideal but would work

It may not be ideal. However, a work around could be to duplicate the markup and show/hide appropriately. Have one set of panels columned and another just stacked in order. At set breakpoints show/hide whichever is appropriate at that viewport size.

Hope that elaborates things a little. It may be a little out of pure CSS scope at the moment.

@jh3y

[jh3y]

Update:: I updated the implementation of clusters and segments to make use of separate columns/rows. This still won't solve the issue out of the box though. For date ordered going left to right, it will require some logic either for server side rendering or using JavaScript to modify the ordering/structure of the DOM.

[jh3y]

Closing as dormant. Addressed timeline ordering in README update.

@jh3y