npm package: @nimblehq/cx-theme
Description: The stylesheet and JS files for all UI components of CX.
Latest version: 0.3.0

<p align="center">
  <img width="120" height="120" src="https://staging-cx-theme.netlify.app/assets/static/images/nimble-cx-theme-logo.svg">
</p>

<h1 align="center">Nimble CX Theme</h1>
<p align="center">The stylesheet and JS files for all UI components of CX.</p>

## Usage

#### Package Installation

Several options are available to install the package:

* Install with [NPM](https://www.npmjs.com/)
  ```sh
  $ npm install @nimblehq/cx-theme
  ```
* Install with [Yarn](https://yarnpkg.com/)
  ```sh
  $ yarn add @nimblehq/cx-theme
  ```
* Use [Git URL](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#git-urls-as-dependencies) 
  to add the dependency. This repository is private a Github username & [token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) is required to access. 
  ```
  // package.json
  ...
  "dependencies": {
    ...
    "@nimblehq/cx-theme": "git+https://<github-username>:<github-token>@github.com/nimblehq/cx-theme.git#develop"
  }, 
  ...
  ```
* Use the [Local path](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#local-paths)
  ```
  // package.json
  ...
  "dependencies": {
    ...
    "@nimblehq/cx-theme": "file:../cx-theme"
  }, 
  ...
  ```

#### Via SCSS imports

Then import it in your `application.scss`, e.g,
```scss
/* app/assets/stylesheets/application.scss */
@import '@nimblehq/cx-theme/scss/cx-theme';
```

By making it more flexible you can import the `_variables.scss` and `/components`.
This method allows you to override theme variables.
```scss
// Theme Variables
@import '@nimblehq/cx-theme/scss/cx_theme/variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// Theme Overrided Components
@import '@nimblehq/cx-theme/scss/cx_theme/components';
```
Make sure to import Bootstrap's `bootstrap.scss` in between `_variables.scss` and `/components`!

#### Icon Sprite

This package also provides a solution for rendering some icons with SVG sproites.
So we can just use inline SVG like this within out layout.

```html
<!-- This example is Rails helper methods. -->
<div hiddden>
  <%= inline_svg_tag 'cx-theme/dist/images/icon-sprite.svg' %>
</div>
```

## Development Usage

#### Prerequisite
* [NVM](https://github.com/nvm-sh/nvm)
* [Node.js - 14.16.1](https://nodejs.org/dist/v14.16.1/docs/api/)

#### Use specific node version with NVM
```shell
$ nvm use
```

#### Install packages
```shell
$ npm install
```

#### Build assets
```shell
$ npm run asset:build
```

#### Compile HTML
```shell
$ npm run pug:build
```

#### View styleguide
```shell
$ npm run serve
```
Visiting [http://localhost:8080/build](http://localhost:8080/build) with a web browser will display the styleguide. ✨

## Styleguide Web Application
- [Production](https://cx-theme.netlify.app)
- [Staging](https://staging-cx-theme.netlify.app)

## License

This project is Copyright (c) 2014 and onwards Nimble. It is free software,
and may be redistributed under the terms specified in the [LICENSE] file.

[LICENSE]: /LICENSE

## About

![Nimble](https://assets.nimblehq.co/logo/dark/logo-dark-text-160.png)

This project is maintained and funded by Nimble.

We love open source and do our part in sharing our work with the community!
See [our other projects][community] or [hire our team][hire] to help build your product.

[community]: https://github.com/nimblehq
[hire]: https://nimblehq.co/