jh3y/driveway

pure CSS masonry layouts

Hi! 👋

I'm Jhey.

For enquiries, reach out @ [email protected] or over on Twitter.

Stay awesome!

driveway's Issues

Reduce class definitions for nested layouts

Issue summary

Clusters are essentially nested layouts so why not play on this fact and reduce the number of classes that need to be remembered.

Currently, we have a dw-cluster classname. But, this could just be a repeat of the dw classname?

It's worth playing with this to see if the amount of classes could be reduced. dw-cluster is essentially dw dw.

@jh3y

Order columns items

issue summary

Order different like masonry. The items is attached to the DOM in Column1 and down, Column2 and down

expected behavior

First item must be the first in the first column (ok) , second item -> first item in the second colum (bad)

browser used

Chrome, Safari, Firefox

Thanks!!

"Content in date order"?

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.

Edge Vertical Clustering doesn't work

issue summary

expected behavior

actual behavior

browser used

Expected: Firefox
Actual: Edge

steps to reproduce

PLEASE add info about browser compatibility

OK, this is an impressive piece of work, however the information I was looking for in the first place was the answer to the question "which browsers does this support?". Please add this very important information on top of the readme, thank you very much!

Published to npm?

Seems like this package has not been published in npm yet?

Request/Question: Getting content to span across two columns

Hello,

First, thank you for creating this. Working with it has been insightful.

I wondered if it were possible to have content span across two columns rather than being constrained to the number columns used per viewport width.

Thanks!

Whats the deal with the class names?

Hey, sorry for not following your issue guidelines, but I just want to know whats the deal with the class names. Its extremely hard to understand all the abbreviations, just look at this:

<div class="dw-pnl dw-flp dw-flp--md">
  <div class="dw-pnl__cntnt dw-flp__cntnt">
    <div class="dw-flp__pnl dw-flp__pnl--frnt">
      <h1>You can flip me round</h1>
    </div>
    <div class="dw-flp__pnl dw-flp__pnl--bck">
      <h1>Yeah that's right</h1>
    </div>
  </div>
</div>

What?! Is this supposed to be more readable?

What about this alternative:

<div class="dw-panel dw-flip dw-flip-medium">
  <div class="dw-panel-content dw-flip-content">
    <div class="dw-flip-panel dw-flip-panel-front">
      <h1>You can flip me round</h1>
    </div>
    <div class="dw-flip-panel dw-flip-panel-back">
      <h1>Yeah that's right</h1>
    </div>
  </div>
</div>

Implement chronological ordering

The common issue that arises or that I'm asked about is chronological ordering(left to right by order in DOM, usually date). This has been brought up in #1, #7 and #9. It has also been brought to my attention again when I saw a discussion about masonry pop up on Twitter.

This feature does require some JavaScript intervention and can not be implemented via pure CSS alone.

My aim is to implement this as an optional feature that will require some JavaScript to also be included. Think something like;

  <div class='dw dw--chronological'></div>

with;

const el = document.querySelector('#chronological')
const myDriveway = new Driveway(el)

@jh3y

Direction

Is there some way to change direction left to right so that you can have a feed chronologically. e.g newsfeed.

Does not work for images only

issue summary

https://codepen.io/asdasdddd/pen/JjoMVvY

expected behavior

As shown in the description, dynamic height and width. Do not care about order.

actual behavior

Images stretched, filled. If it has height 100px and and width 500, it is stretched to common height let it be 200 px and width 100.

browser used

chrome

steps to reproduce

https://codepen.io/asdasdddd/pen/JjoMVvY