All Projects → karakanb → boardz

karakanb / boardz

Licence: other
Create Pinterest-like boards with pure CSS, in less than 1kB.

Programming Languages

HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to boardz

Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+72.73%)
Mutual labels:  css3, flexbox, css-library
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (+242.42%)
Mutual labels:  responsive, css3, flexbox
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+2069.7%)
Mutual labels:  responsive, css3, flexbox
atomize
A library of atomic CSS classes.
Stars: ✭ 51 (+54.55%)
Mutual labels:  responsive, css3, css-library
Formstone
Library of modular front end components.
Stars: ✭ 823 (+2393.94%)
Mutual labels:  responsive, flexbox
hangman-game
A responsive hangman game built with vanilla javascript, html, and css. Animated with GSAP and canvas animations.
Stars: ✭ 22 (-33.33%)
Mutual labels:  css3, flexbox
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (+221.21%)
Mutual labels:  responsive, css3
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+6200%)
Mutual labels:  responsive, flexbox
React Native Responsive Grid
Bringing the Web's Responsive Design to React Native
Stars: ✭ 369 (+1018.18%)
Mutual labels:  responsive, flexbox
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (+263.64%)
Mutual labels:  responsive, flexbox
Minwiz
Minimal starter kit for under 2 KB sites
Stars: ✭ 228 (+590.91%)
Mutual labels:  responsive, css3
cice-playground
CICE Full Stack Web Course
Stars: ✭ 12 (-63.64%)
Mutual labels:  css3, flexbox
Flex Layout
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+17187.88%)
Mutual labels:  responsive, flexbox
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+1724.24%)
Mutual labels:  responsive, flexbox
JonContextMenu
A beautiful and minimalist arc menu like the Pinterest one, written in Swift
Stars: ✭ 60 (+81.82%)
Mutual labels:  pinterest, pinterest-like
flexbox-carousel
CSS3 Animated Carousel with Flexbox
Stars: ✭ 23 (-30.3%)
Mutual labels:  css3, flexbox
Adam Blog
Adam Blog is a minimal clear theme for Jekyll
Stars: ✭ 167 (+406.06%)
Mutual labels:  responsive, pinterest
swatch
A lightweight, modern theming library based on CSS variables and the setter/getter pattern.
Stars: ✭ 14 (-57.58%)
Mutual labels:  css3, css-library
pointcss
A lightweight and flexible CSS Framework for building modern responsive web apps
Stars: ✭ 33 (+0%)
Mutual labels:  responsive, flexbox
gutter-grid
A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11
Stars: ✭ 18 (-45.45%)
Mutual labels:  responsive, flexbox

Boardz.css

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.

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 <ul> and <li> elements. It uses the powerful Flexbox model to create and maintain the layout across devices and screens.

Layout screenshot

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:

<div class="boardz">
    <!-- First column -->
    <ul>
        <li>
            <h1> Header 1</h1>
            Content
        </li>
        <li>
            <h1> Header 2</h1>
            Content
        </li>
    </ul>

    <!-- Second column -->
    <ul>
        <li>
            <h1> Header 1</h1>
            Content
        </li>
        <li>
            <h1> Header 2</h1>
            Content
        </li>
    </ul>
</div>

You can grab the minified version here or the beautiful version here.


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.

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 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].