npm package: @miovision/design-system
Description: CSS and HTML components for the Miovision Design System
Author: Miovision
Latest version: 1.18.6

# Miovision Design System

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

The Miovision Design System is our guide to building a consistent experience for our customers. It is our shared understanding of design that allows us to develop quickly. 

We use Brad Frost’s Atomic Design as our core foundational elements. This is how we structure the building blocks of the design system. 

There are 5 levels in atomic design:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

To learn more about Atomic Design, visit http://bradfrost.com/blog/post/atomic-web-design/

## IDE / Editor Setup

### Prettier
We are using **[Prettier](https://prettier.io/)** for automatic code style formatting. Follow the guide below for proper IDE / Editor integration:

**[Prettier Editor Integration](https://prettier.io/docs/en/editors.html)**

P.S for intelliJ users make sure you have the **[File Watchers](https://plugins.jetbrains.com/plugin/7177-file-watchers)** plugin installed.

## Git Commit Guidelines
We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the change log.

The commit message formatting can be added using a typical git workflow or through the use of a CLI wizard **[Commitizen](https://github.com/commitizen/cz-cli)**. To use the wizard, run ```npm run cm``` in your terminal after staging your changes in git.

## Style Guidelines

We have adopted the **[BEM](http://getbem.com/introduction/)** methodology to organize our CSS. Please take a moment to get familiar with this convention by going over the following article:

**[MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry.](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)**

## Development Setup

### Project Structure

```
.
├── .storybook                              # Storybook configuration files
├── README.md
├── build                                   # Compiled files
├── gulpfile.js                             # Build tool configuration file
├── public                                  # Static files like images and videos for components and stories
├── src                                     # Source files
│   ├── components
│   └── style.css
└── vendor                                  # Third-party libraries
```


### Installing Dependencies

**[Git](https://git-scm.com/)**: The **[Github Guide to Installing Git](https://help.github.com/articles/set-up-git/)** is a good source of information.

**[Node.js v8.x (LTS)](https://nodejs.org/en/)**: We use Node to generate the documentation, run a development web server, run tests, and generate distributable files.

We recommend using **[nvm](https://github.com/creationix/nvm)** (or **[nvm-windows](https://github.com/coreybutler/nvm-windows)**) to manage and install Node.js, which makes it easy to change the version of Node.js per project.

**[The commitizen command line utility](https://github.com/commitizen/cz-cli)**: ```npm install commitizen -g```

### Local Development

```bash
# Clone your Github repository:
git clone https://github.com/Miovision/design-system.git

# Go to the Design System directory:
cd design-system

# Install JavaScript dependencies:
npm install

# Build Design System:
npm start
```