--- title: カンバス Kanbasu CSS Framework fabricator: true ---

カンバス Kanbasu

Kanbasu is a CSS framework with very basic styling. It can be used as a base for any web project or for prototyping. It will provides you all the basics and common patterns used to display content on the web today.

On the technical side, Kanbasu is written in Sass and obviously based on the principles of OOCSS. The components are named following the BEM methodology syntax.

This project is inspired by awesome coders who share and keep sharing their work. Harry Roberts deserve a special thanks for his framework Inuit.css. Nicole Sullivan for all her work related to OOCSS. Mark Otto and Jacob Thornton for Bootstrap.

The code is hosted on GitHub.

How to use

Install

With NPM

$ npm install --save-dev kanbasu

As a Git submodule

$ git submodule add git@github.com:liip/kanbasu.git

Or simply download the zip.

Setup

It’s recommended to copy the framework main file to your project to customize it as you wish. You’ll have to change all "import" paths to match the framwork location then.

$ cp node_modules/kanbasu/src/assets/scss/kanbasu.scss destination/kanbasu.scss

It’s also recommended to duplicated the settings file to have a quick access to all the variables and adapt them to your needs.

$ cp node_modules/kanbasu/src/assets/scss/settings/_settings.scss destination/settings/_kanbasu.scss

You should then import it in your main Sass file, before other Kanbasu files, to overrides the framework default settings. Learn more about Sass default variables.

Notice: Kanbasu does not include vendor-prefixed properties. If you build it by yourself, we recommend you to use Autoprefixer.

Report issues

Feel free to report any bug or suggestion through Github’s issues tracker.

Contribute

You are welcome to fork and request merge for whatever you think can improve the framework.

Kanbasu is built using Fabricator. As soon as you have Node.js >= 0.10 installed, you just need to run:

$ npm start

The complete guide is available in Fabricator documentation.

Guidelines are simple; keep the code DRY, follow the .editorconfig and organize declarations.

About

Kanbasu is proudly made at Liip.