{"id":16441571,"url":"https://github.com/karakanb/boardz","last_synced_at":"2025-07-14T19:40:14.357Z","repository":{"id":83635065,"uuid":"78957919","full_name":"karakanb/boardz","owner":"karakanb","description":"Create Pinterest-like boards with pure CSS, in less than 1kB.","archived":false,"fork":false,"pushed_at":"2017-05-09T17:12:16.000Z","size":14,"stargazers_count":36,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-18T19:18:41.904Z","etag":null,"topics":["css-library","css3","flexbox","pinterest","pinterest-like","responsive","small-size-league"],"latest_commit_sha":null,"homepage":"https://karakanb.github.io/boardz/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karakanb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-14T18:20:37.000Z","updated_at":"2024-08-21T14:05:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"66f50892-dc2b-42c7-a9b4-c5423a9eae0c","html_url":"https://github.com/karakanb/boardz","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karakanb%2Fboardz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karakanb%2Fboardz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karakanb%2Fboardz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karakanb%2Fboardz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karakanb","download_url":"https://codeload.github.com/karakanb/boardz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-library","css3","flexbox","pinterest","pinterest-like","responsive","small-size-league"],"created_at":"2024-10-11T09:14:49.136Z","updated_at":"2025-03-23T08:31:58.098Z","avatar_url":"https://github.com/karakanb.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Boardz.css\n\n![Boardz.css](http://i67.tinypic.com/2ib27oz.jpg)\n\nBoardz.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/)\n\n## What is Boardz?\nBoardz 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 `\u003cul\u003e` and `\u003cli\u003e` elements. It uses the powerful Flexbox model to create and maintain the layout across devices and screens. \n\n![Layout screenshot](http://i63.tinypic.com/53mu8i.jpg)\n\n## How to use it?\nIn 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:\n```HTML\n\u003cdiv class=\"boardz\"\u003e\n    \u003c!-- First column --\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ch1\u003e Header 1\u003c/h1\u003e\n            Content\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ch1\u003e Header 2\u003c/h1\u003e\n            Content\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003c!-- Second column --\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ch1\u003e Header 1\u003c/h1\u003e\n            Content\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ch1\u003e Header 2\u003c/h1\u003e\n            Content\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nYou can grab [the minified version here](src/boardz.min.css) or [the beautiful version here](src/boardz.css). \n\n----------\n\n## Available Classes\nThere 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. `\u003cdiv class=\"boardz beautiful\"\u003e`.\n\n`boardz`: This is the class that needs to be on the wrapper div.   \n`fitted`: This is the class to make columns justified vertically.   \n`beautiful`: This is the class to make stylish cells.   \n\n## Why?\nWe 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. \n\n-----\n\nBoardz 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.\n\n## License\nThe project is licensed under MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarakanb%2Fboardz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarakanb%2Fboardz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarakanb%2Fboardz/lists"}