Install

Installing Garden is pretty straightforward. You can do it via npm or bower by running one of the commands below.

Using npm

Copynpm install garden

Using bower

Copybower install garden

As an alternative, you can manually download the source code for our latest release.

CDN

You can also use Garden through a CDN (Content Delivery Network) link, so you will not need to download and host the code within your application.

CSS

Copy<link href="https://unpkg.com/garden/dist/css/garden.min.css" rel="stylesheet">

JavaScript

Copy<script scr="https://unpkg.com/garden/dist/js/garden.min.js"></script>

Using

Garden main files are located on dist/garden.min.css and dist/garden.min.js (It comes with all of the JS components bundled together). If you want to use components individually, you will have to build them as well.

CSS

We rely on PostCSS to process our CSS files. By using the PostCSS import plugin it is possible to import a specific file, as shown below.

Copy/* css files are located at: garden/src/css/ */

@import "garden/src/atoms/button";

/* PostCSS import resolves bower_components/node_modules folder automatically */

JavaScript

We use Webpack with Babel-loader to handle the ES2015 to ES5 transpiling/bundling process. Since it’s plain ES2015, you can use any transpiler along with any bundler as well:

Copy// ES2015 import syntax:

// You will have to point to your bundler where to resolve garden imports, or use directly from node_modules/bower_components:
import file from 'garden/src/js/file';

JavaScript components rely on jQuery to work, most of the time, so it is important to note that garden.min.js does not come with jQuery. You have to add your own version of it.

Checkout the README of the project to know how to build the project locally.