Create Pinterest-like Boards With Pure CSS | Boardz.css

Boardz.css is a simple CSS library that allows the creation of Pinterest-like boards from simple unordered lists with a file size of less than 1KB.

Boardz is a simple, lightweight, and responsive pure CSS library that creates Pinterest-like boards from simple, unordered list elements. The main goal of Boardz is to give the basic design of the board a simple virtual layout.

The library is not built to be a plug-and-use file, it simply gives the board layout for the nested <ul> and <li> elements. Uses a powerful Flexbox model to create and maintain layout across devices and screens.

How to make use of it:

1. Download the CSS file and place boardz.css in the header of the HTML document.

<link rel="stylesheet" href="src/boardz.css">

2. Create a list of boards and insert them into a DIV container named “.boardz”.

<div class="boardz">
  <ul>
      <li>
          <h1> Board 1</h1>
          Content
      </li>
      <li>
          <h1> Board 2</h1>
          Content
      </li>
  </ul>
  <!-- Second column -->
  <ul>
      <li>
          <h1> Board 3</h1>
          Content
      </li>
      <li>
          <h1> Board 4</h1>
          Content
      </li>
  </ul>
</div>

3. To create a “fit” board layout, just by adding the fitted class to the div of the Boardz element.

<div class="boardz fitted">
  ...
</div>

4. Boardz can be used with images as well.

<div class="boardz centered-block">
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>                    
  </ul>
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
  </ul>
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
  </ul>         
</div>

Available Classes

There are three main classes that can be given to a Boardz element. The boardz class is necessary on the wrapper div, and the other two are optional. Note that, all of these classes should be used on the wrapper div, e.g. <div class="boardz beautiful">.

boardz: This is the class that needs to be on the wrapper div.
fitted: This is the class to make columns justified vertically.
beautiful: This is the class to make stylish cells.

CSS Only Pinterest-like Responsive Board Layout, Boardz.css Plugin/Github

Read More – 

Modern Photo/Video Gallery and Lightbox Plugin | nanogallery2
jQuery Plugin To Hide and Reveal Social Icons In A Circular Layout | socialCircle


See Demo And Download

Official Website(karakanb): Click Here

This superior jQuery/javascript plugin is developed by karakanb. For extra Advanced Usage, please go to the official website.

Share