Neat Block Grid In Pure CSS – wall.css

Category: Javascript , Layout | March 25, 2019
Author: fabiocaccamo
Views Total: 444
Official Page: Go to website
Last Update: March 25, 2019
License: MIT

Preview:

Neat Block Grid In Pure CSS – wall.css

Description:

Yet another pure CSS implementation of the responsive, customizable block/wall grid layout system.

See also:

How to use it:

Install & Download.

# NPM
$ npm install @fabiocaccamo/wall.css --save

Import the wall.css library.

<link href="/path/to/css/wall.css" rel="stylesheet"/>

Add the CSS class wall to the grid item and specify the number of columns in the wall--cols-* attribute (1-24).

<div class="wall wall--cols-6">
  <div class="wall-col">
    <div class="wall-item">
      <a class="wall-item-content" href="#">
        <span class="wall-item-content"></span>
      </a>
    </div>
  </div>
  <div class="wall-col">
      <!-- ... -->
  </div>
  <div class="wall-col">
      <!-- ... -->
  </div>
  <div class="wall-col">
      <!-- ... -->
  </div>
</div>

Set the aspect ratio of grid items in the .wall--ratio-* attribute. Possible values: 1-1 (Default)2-11-23-22-34-33-416-9.

<div class="wall wall--cols-6 wall--ratio-3-2">
  ...
</div>

Set the border radius of grid items in the .wall--rounded-* attribute. Possible values: 0 (Default)12345678910152030.

<div class="wall wall--cols-6 wall--rounded-5">
  ...
</div>

Set the space between grid items in the .wall--spacing-* attribute. Possible values: 0 (Default)123451015202530405060.

<div class="wall wall--cols-6 wall--spacing-10">
  ...
</div>

Breakpoints available:

  • xs: 0
  • sm: 576px
  • md: 768px
  • lg: 992px
  • xl: 1200px
<div class="wall wall--sm-cols-3 wall--md-cols-4 wall--lg-cols-5 wall--xl-cols-10">
  ...
</div>

Customize the wall.css by overriding the default variables in the wall.scss.

$wall-columns: 24 !default;
$wall-ratio: ((1, 1), (2, 1), (1, 2), (3, 2), (2, 3), (4, 3), (3, 4), (16, 9)) !default;
$wall-rounded: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30 !default;
$wall-spacing: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60 !default;
$wall-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
)

You Might Be Interested In:


Leave a Reply