The Zeppelin Design System contains individual styles and components to build intuitive designs. These designs follow the same universal principles.

The Zeppelin Element Library gives developers the basic styles, scripts and assets for building Zeppelin products.

How to install

Run the following command using npm:

npm install zeppelin-element-library --save

If you prefer Yarn, use the following command instead:

yarn add zeppelin-element-library

How to use

Use either ESM or CommonJS to use the JavaScript

Import

Import the JavaScript as ECMAScript Module

import ZEL from 'zeppelin-element-library';

Require

Require the JavaScript as CommonJS Module

const ZEL = require('zeppelin-element-library');

Use provided Styles

When using Webpack, you can include the provided styles into a JavaScript file.

import 'zeppelin-element-library/zel.css';

Initialize Script

To get the JavaScript running, initialize ZEL after the DOM has loaded. Place the following script at the bottom of your body element.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    ZEL.init();
  });
</script>

Development for publishing on npm

There are a few main parts to this project for use in the npm package;

1. Sketch Files - Update sketch files at src/assets/sketches/ and 'yarn bundle' will move it to the folder assets/sketch/ for you automatically.

2. Fonts - Update fonts at src/assets/fonts and 'yarn bundle' will move it to the folder assets/fonts/ for you automatically.

3. Logos - Update logos at src/assets/logos (please add them as a zip file) and 'yarn bundle' will move it to the folder assets/logos/ for you automatically.

4. Icons - Update icons at src/assets/icons/raw and 'yarn svg:update' will prefix, optimize and move them into src/assets/icons/SVG. Please be aware that always the complete icon set is needed in src/assets/icons/raw/. Also a sprite of all prepared SVGs will be generated at src/assets/icons/sprite. By 'yarn bundle' the src/assets/icons/ folder except src/assets/icons/raw will be copied to the folder assets/icons/ which will be part of the npm package and also be available via CDN after deployment. SVG and sprite folders within assets/icons/ will then also be zipped automatically.

5. guidelines.json - Update this file at src/assets/themes/guidelines.json and it will automatically be moved to the main folder by 'yarn bundle' for npm packings. Please do not touch the guidelines.json file in the root folder. If you make any changes made to src/assets/themes/guideslines.json please make sure to run 'yarn convert' to convert this file to a guidelines.scss file that can be used to make the zeppelin element library css.

Note on 'yarn convert': Nested variables can be accessed as 'map-deep-get($guideliness, "breakpoints", "xs")' (see _variables.scss).

6. bundle - This folder contains all compiled javascript for ZEL. It is made automatically by 'yarn build' and then renamed and moved by 'yarn bundle' for npm packaging.