Customizable Masonry Layout In Pure CSS – Driveway.css

Preview:

Description:

Driveway.css is a pure CSS library to generate a responsive, interactive, customizable, Masonry-style layout using pure HTML/CSS.

Based on the CSS flexbox layout system.

How to use it:

1. To get started, include the core stylesheet in the document’s head section.

<link href="dist/driveway.min.css" rel="stylesheet" />

2. Create a basic Masonry layout following the markup structure as follows:

<div class="dw">
  <div class="dw-panel">
    <div class="dw-panel__content">
      <p>Content 1</p>
    </div>
  </div>
  <div class="dw-panel">
    <img src="2.jpg" class="dw-panel__content" />
  </div>
  <div class="dw-panel">
    <div class="dw-panel__content">
      <p>Content 3</p>
    </div>
  </div>
  ...
</div>

3. Insert nested grid items into the layout using the following CSS classes:

• dw-cluster: required for nested grid items
• dw-cluster–vertical: vertical flow
• dw-cluster–horizontal: horizontal flow
• dw-cluster__segment: segment
• dw-cluster__segment–col: segment column
• dw-cluster__segment–row: segment row
• dw-cluster__segment–quart: segment taking up quarter of the real estate available
• dw-cluster__segment–half: segment taking up half of the real estate available

<div class="dw">
  <div class="dw-panel dw-cluster dw-cluster--horizontal">
    <div class="dw-cluster__segment dw-cluster__segment--row">
      <div class="dw-panel dw-cluster__segment">
        <div class="dw-panel__content">
          <h2>Content 1</h2>
        </div>
      </div>
    </div>
    <div class="dw-cluster__segment dw-cluster__segment--row ">
      <div class="dw-panel dw-cluster__segment ">
        <div class="dw-panel__content">
          <h2>Content 2</h2>
        </div>
      </div>
      <div class="dw-panel dw-cluster__segment ">
        <div class="dw-panel__content">
          <h2>Content 3</h2>
        </div>
      </div>
    </div>
  </div>
  ...
</div>

4. Highlight the current grid item on mouse hover using the dw-panel--focus class.

<div class="dw-panel dw-panel--focus">
  <div class="dw-panel__content">
    <p>Panel content.</p>
  </div>
</div>
<!-- Required -->
<div class="dw__focus-curtain"></div>

5. Apply a pulse effect to the grid item on mouse hover using the dw-panel--pulse class.

<div class="dw-panel dw-panel--pulse">
  <div class="dw-panel__content">
    <p>Panel content.</p>
  </div>
</div>

6. Apply a flip effect to the grid item on mouse hover using the following CSS classes.

<div class="dw-panel dw-flip">
  <div class="dw-panel__content dw-flip__content">
    <div class="dw-flip__panel dw-flip__panel--front">
      Front Content
    </div>
    <div class="dw-flip__panel dw-flip__panel--back">
      Back Content
    </div>
  </div>
</div>