@nimblehq/cx-theme

Nimble CX Theme

The stylesheet and JS files for all UI components of CX.

Usage

Package Installation

Several options are available to install the package:

• Install with NPM

  $ npm install @nimblehq/cx-theme
  

• Install with Yarn

  $ yarn add @nimblehq/cx-theme
  

• Use Git URL to add the dependency. This repository is private a Github username & 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

  // package.json
  ...
  "dependencies": {
    ...
    "@nimblehq/cx-theme": "file:../cx-theme"
  }, 
  ...
  

Via SCSS imports

Then import it in your application.scss, e.g,

/* 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.

// 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.

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

Development Usage

Prerequisite

• NVM
• Node.js - 14.16.1

Use specific node version with NVM

$ nvm use

Install packages

$ npm install

Build assets

$ npm run asset:build

Compile HTML

$ npm run pug:build

View styleguide

$ npm run serve

Visiting http://localhost:8080/build with a web browser will display the styleguide. ✨

Styleguide Web Application

• Production
• Staging

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.

About

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 or hire our team to help build your product.