@ithaka/bonsai/documentation/pages/index.md

ITHAKA core styling

---
title: About Bonsai
description: General documentation about installation and usage of the Bonsai framework.
---

## Overview

Bonsai is a SASS- and JavaScript-based UI framework built specifically to be utilized across various ITHAKA platforms.
Bonsai wraps [Foundation 6](http://foundation.zurb.com/sites/docs/) in order to make it ITHAKA-specific. You can see
the exact Foundation version in use under "dependencies" in the [package.json](https://github.com/ithaka/bonsai/blob/develop/package.json) file.

## Installation

Bonsai is not meant to have its CSS and JavaScript imported directly into your HTML, but instead needs to be installed
into a front-end build system.

Install it into your project with npm:

```bash
npm install --save @ithaka/bonsai
```

## Usage

### SASS

Import the Bonsai global SCSS in the SASS entry point of your application.

```scss
@import "bonsai/scss/global";
```

If you want all of Bonsai, you can choose to include all of it. Your entry point would look like:

```scss
@import "bonsai/scss/global";
@include bonsai;
```

If you don't want all of Bonsai, but just want select components you can include them individually.
Your SCSS entry point might then look like:

```scss
@import "bonsai/scss/global";
@include bonsai-core;
@include typography;
@include buttons;
@include links;
```

`bonsai-core` gives you access to the Foundation grid system among other basic Foundation utilities. This mixin is required
if you wish to import individual components directly.

You would include that mixin with Bonsai typography, buttons, link styling, etc. Look in the Sass Reference of each component in the Style Guide
to see what the name of the mixin is that you need to include.

### JavaScript

Bonsai JavaScript has a dependency of jQuery 3+ that you will need to resolve. We recommend directly linking to [Google's
jQuery CDN](https://developers.google.com/speed/libraries/#jquery) in your HTML. This is a common convention and can
greatly speed up page load time if your users already have it cached. Make sure jQuery is imported before Bonsai JavaScript.

Bonsai uses the newer ES6 import convention. Your build system will need to have a [transpiler](https://babeljs.io/) in
order to be able to properly consume Bonsai JavaScript.

In your JavaScript file import each JavaScript component you need and initialize it:

```javascript
import { BonsaiMediaQuery } from "@ithaka/bonsai/js/bonsai.mediaquery";
import { BonsaiModal } from "@ithaka/bonsai/js/bonsai.modal";

new BonsaiMediaQuery();
new BonsaiModal($(".modal"));
```

You can see what classes to import and the arguments that they take inside of each components documentation.