Juniper.

The Human Made Pattern Library.

Back to main page.

How to use juniper in your project

Include Juniper.

Include the production files from the gh-pages branch. We recommend either downloading the releases or using a submodule.

Juniper CSS.

For simple projects, you can just load the compiled CSS files directly in your page.

<link rel="stylesheet" href="hm-pattern-library/assets/styles/juniper.css" />

Juniper SASS.

For more complex projects, you can include the SCSS files at the top of your SCSS file. You will need to define the project path so that images load correctly. See the example SCSS file below.

// Define image path, relative to your project's main SASS file.
$images-path: "./../vendor/hm-pattern-library/assets/images";

// Include the Juniper SASS file.
@import "./../vendor/hm-pattern-library/assets/sass/juniper";

// Your custom styles here.

JavaScript.

Juniper aims to have minimal JavaScript, and it is completely optional. The small ammount there is should be as lightweight as possible, without any dependencies. You can include the juniper.min.js file in your project for a few nice little extra features (e.g. code syntax highlighting).

<script src="hm-pattern-library/assets/js/juniper.min.js"></script>

Fonts.

The HM Pattern Library uses Proxima Nova for both headings and body. You will need both 300 and 700 weights. These are provided by Typekit and if you wish to use them you will need to add the Typekit JS to your page, and either create a new Kit, or add your domain to the Juniper kit settings.

Updates.

We aim to maintain full compatability between minor releases however major releases may include breaking changes.

Migrating to V2.

Whilst this release broke a lot, unless you have done a lot of customization it shoudln't be too hard to upgrade!

Made by Humans