kanbasu

A lightweight CSS framework written in Sass.

Showing:

Popularity

Downloads/wk

382

GitHub Stars

94

Maintenance

Last Commit

2yrs ago

Contributors

14

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

npm version Build Status

カンバス Kanbasu


Important information

Kanbasu won’t get any new features from now on, we do not recommend using it in new projects.

This framework was created during a time it solved an actual problem for us and after being used for years, we think there are now better solutions available. In particular, we are convinced that the utility-first approach gives us more control over the styling of interfaces with less code.

If you’re looking for an alternative in that direction, we’re recommending the amazingly well-done Tailwind CSS.


Kanbasu is a toolbox to create responsive web interfaces quickly. It’s focused on the layout and voluntarily avoid defining much “styling” properties which can be completely different from project to project.

Written is Sass, it’s highly customizable, every component being optional and customizable with variables.

CSS features used are working in all current major browsers. The oldest Internet Explorer version supported is 11. However, the framework does not include vendor-prefixed properties! When building it, we recommend you to use Autoprefixer to ensure a complete compatibility.

Read more and browse the documentation on kanbasu.liip.ch.

Install

With npm (recommended)

npm install --save-dev kanbasu

With Yarn

yarn add --dev kanbasu

As a Git submodule

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

Manually

Download the latest release archive

Setup

Easily scaffold a new project by running the script below in your project directory to:

  1. duplicate kanbasu.scss (renamed main.scss) and settings/_settings.scss to the specified destination
  2. adapt paths inside main.scss to match the Node module location
  3. remove Sass !default flags from settings/_settings.scss
  4. import settings/_settings.scss into main.scss

With npx:

npx kanbasu path/to/your/sass/directory

See other scaffolding methods.

Disclaimer

Kanbasu does not include vendor-prefixed properties. You should consider using a tool like Autoprefixer to ensure the properties used match the desired browser support.

What’s next?

Have a look at the documentation →

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial