1 | ---
|
2 | title: About Bonsai
|
3 | description: General documentation about installation and usage of the Bonsai framework.
|
4 | ---
|
5 |
|
6 | ## Overview
|
7 |
|
8 | Bonsai is a SASS- and JavaScript-based UI framework built specifically to be utilized across various ITHAKA platforms.
|
9 | Bonsai wraps [Foundation 6](http://foundation.zurb.com/sites/docs/) in order to make it ITHAKA-specific. You can see
|
10 | the exact Foundation version in use under "dependencies" in the [package.json](https://github.com/ithaka/bonsai/blob/develop/package.json) file.
|
11 |
|
12 | ## Installation
|
13 |
|
14 | Bonsai is not meant to have its CSS and JavaScript imported directly into your HTML, but instead needs to be installed
|
15 | into a front-end build system.
|
16 |
|
17 | Install it into your project with npm:
|
18 |
|
19 | ```bash
|
20 | npm install --save @ithaka/bonsai
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | ### SASS
|
26 |
|
27 | Import the Bonsai global SCSS in the SASS entry point of your application.
|
28 |
|
29 | ```scss
|
30 | @import "bonsai/scss/global";
|
31 | ```
|
32 |
|
33 | If you want all of Bonsai, you can choose to include all of it. Your entry point would look like:
|
34 |
|
35 | ```scss
|
36 | @import "bonsai/scss/global";
|
37 | @include bonsai;
|
38 | ```
|
39 |
|
40 | If you don't want all of Bonsai, but just want select components you can include them individually.
|
41 | Your SCSS entry point might then look like:
|
42 |
|
43 | ```scss
|
44 | @import "bonsai/scss/global";
|
45 | @include bonsai-core;
|
46 | @include typography;
|
47 | @include buttons;
|
48 | @include links;
|
49 | ```
|
50 |
|
51 | `bonsai-core` gives you access to the Foundation grid system among other basic Foundation utilities. This mixin is required
|
52 | if you wish to import individual components directly.
|
53 |
|
54 | You would include that mixin with Bonsai typography, buttons, link styling, etc. Look in the Sass Reference of each component in the Style Guide
|
55 | to see what the name of the mixin is that you need to include.
|
56 |
|
57 | ### JavaScript
|
58 |
|
59 | Bonsai JavaScript has a dependency of jQuery 3+ that you will need to resolve. We recommend directly linking to [Google's
|
60 | jQuery CDN](https://developers.google.com/speed/libraries/#jquery) in your HTML. This is a common convention and can
|
61 | greatly speed up page load time if your users already have it cached. Make sure jQuery is imported before Bonsai JavaScript.
|
62 |
|
63 | Bonsai uses the newer ES6 import convention. Your build system will need to have a [transpiler](https://babeljs.io/) in
|
64 | order to be able to properly consume Bonsai JavaScript.
|
65 |
|
66 | In your JavaScript file import each JavaScript component you need and initialize it:
|
67 |
|
68 | ```javascript
|
69 | import { BonsaiMediaQuery } from "@ithaka/bonsai/js/bonsai.mediaquery";
|
70 | import { BonsaiModal } from "@ithaka/bonsai/js/bonsai.modal";
|
71 |
|
72 | new BonsaiMediaQuery();
|
73 | new BonsaiModal($(".modal"));
|
74 | ```
|
75 |
|
76 | You can see what classes to import and the arguments that they take inside of each components documentation.
|