Neat Block Grid In Pure CSS – wall.css

Category: Javascript , Layout | November 30, 2020
Author: fabiocaccamo
Views Total: 23 views
Official Page: Go to website
Last Update: November 30, 2020
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
)

Changelog:

11/30/2020

  • Added hspacing and vspacing responsive modifiers.

05/10/2020

  • Fixed font-size reset and vertical-align.

v0.1.1 (05/08/2020)

  • Removed background-color from .wall-item-content

v0.1.0 (05/04/2020)

  • Added public mixins aspect-ratio-container and aspect-ratio-content

You Might Be Interested In:


Leave a Reply