Installing Bonsai CSS

Bonsai CSS can be added to your project by downloading from the Github repo. Extract and include the ./dist/bonsai.min.css into your project, linking in your document head.

<link href="path/to/css/bonsai.min.css" rel="stylesheet">

Install via NPM

Possibly the quickest and easiest way to include bonsai.css in to your project is through NPM or yarn.

// Using NPM
npm install bonsai.css

Install via Yarn

// Using NPM
yarn add bonsai.css

Import CSS in React

import 'bonsai.css/dist/bonsai.min.css';

Import CSS in Vue.js

<style src='bonsai.css/dist/bonsai.min.css' />

Install via CDN

To grab from CDN you can use the following.

// Via CDN
<link href="https://unpkg.com/bonsai.css@latest/dist/bonsai.min.css" rel="stylesheet">

Modular Installation

Bonsai.css can be broken down in to 3 distinct components. In cases where you may not need all three components, each of these components can be included seperately.

Base Element Styling

// Link locally
<link href="path/to/css/bonsai-base.min.css" rel="stylesheet">

// Via CDN
<link href="https://unpkg.com/bonsai.css@latest/dist/bonsai-base.min.css" rel="stylesheet">

Helpers

// Link locally
<link href="path/to/css/bonsai-helpers.min.css" rel="stylesheet">

// Via CDN
<link href="https://unpkg.com/bonsai.css@latest/dist/bonsai-helpers.min.css" rel="stylesheet">

Utilities

// Link locally
<link href="path/to/css/bonsai-utlities.min.css" rel="stylesheet">

// Via CDN
<link href="https://unpkg.com/bonsai.css@latest/dist/bonsai-utilities.min.css" rel="stylesheet">