https://github.com/karakanb/boardz
Create Pinterest-like boards with pure CSS, in less than 1kB.
https://github.com/karakanb/boardz
css-library css3 flexbox pinterest pinterest-like responsive small-size-league
Last synced: 4 months ago
JSON representation
Create Pinterest-like boards with pure CSS, in less than 1kB.
- Host: GitHub
- URL: https://github.com/karakanb/boardz
- Owner: karakanb
- Created: 2017-01-14T18:20:37.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T17:12:16.000Z (over 8 years ago)
- Last Synced: 2025-03-18T19:18:41.904Z (8 months ago)
- Topics: css-library, css3, flexbox, pinterest, pinterest-like, responsive, small-size-league
- Language: HTML
- Homepage: https://karakanb.github.io/boardz/
- Size: 13.7 KB
- Stars: 36
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Boardz.css
Boardz.css is a simple CSS library that allows to create Pinterest-like card-boards from simple unordered lists with **less than 1kB** minified file size. [Live demo here.](https://karakanb.github.io/boardz/)
## What is Boardz?
Boardz is a simple, lightweight and responsive pure CSS library that creates Pinterest-like boards from simple unordered list elements. The main objective of the Boardz is to give the basic layout of the board with a simple default styling. The library is not made to be a plug-and-use file, it simply gives the layout of the board to the nested `
- ` and `
- ` elements. It uses the powerful Flexbox model to create and maintain the layout across devices and screens.
## How to use it?
In order to use Boardz, just wrap your unordered list with a div of class `boardz`, then the rest of the list will be styled properly. Think of every unordered list as a column in the board, and the columns will be generated for every unordered list element in your div. Boards will also give a basic style to the h1 headers in your list elements. The basic structure of a simple board with 2 columns is as follows:
```HTML
-
Header 1
Content
-
Header 2
Content
-
Header 1
Content
-
Header 2
Content
```You can grab [the minified version here](src/boardz.min.css) or [the beautiful version here](src/boardz.css).
----------
## 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. ``.`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.## Why?
We are trying to build more interactive and fancy interfaces everyday, and the web pages are getting bigger and bigger in terms of file sizes. I like simple interfaces with clear intentions and because of this, usually, I am trying to use small libraries wherever possible. A few days ago, I read [the great Medium article of Ohans Emmanuel on CSS Flexbox](https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af) and decided to implement a simple Pinterest-like card-board library by using pure CSS and Flexbox, which I was thinking of using for a new project, while keeping the file size at minimum. Turns out that Flexbox makes things incredibly simple and is a nice step for building more responsive web pages.-----
Boardz is highly customizable and a simple solution with less than 1kB minified file size. It may set a base for anyone to create more specialized card-boards, or it may not, I don't know. The project is completely open-source, so you can submit a PR whenever you want. Anyway, if you found anything wrong with it, or if you have any suggestions, please feel free to contact me.
## License
The project is licensed under MIT License. -