@mobly/ui-styles

Mobly UI styles.

Install

Install dependencies:

npm i @mobly/ui-styles

Usage

This package is built with Sass and tailwindcss.

/* This will import the main.css file */
@import '@mobly/ui-styles';

/* For more granular imports we also provide */
@import '@mobly/ui-styles/build/css/fonts.css';
@import '@mobly/ui-styles/build/css/base.css';
@import '@mobly/ui-styles/build/css/components.css';
@import '@mobly/ui-styles/build/css/utils.css';

We also exported our custom tailwindcss config for referencing it in JavaScript

import config from '@mobly/ui-styles/config';

config.theme.screens.xs
// returns '320px'

API

• Base
• Components:
  • .c-button
  • .c-checkbox
  • .c-datepicker
  • .c-icon
  • .c-input
  • .c-loader
  • .c-modal
  • .c-radio
  • .c-select
  • .c-switch
• Utils:
  • .u-container

Tailwindcss

Checkout our tailwind.config.js for all the custom changes

• Prefix: .u-
• Theme changes:
  • Screens: custom
  • Colors: custom
  • Border color: added .u-border-default
  • Box shadow: custom
  • Font family: custom
  • Font size: custom
  • Line height: custom
  • Max width: custom
  • Text color: added .u-text-color
  • Z-index: custom
• Disabled plugins:
  • container

For more info on all tailwindcss' utility classes, check out their docs.

Development

Builds are setup with webpack, check the webpack.config.js for more info.
We use storybook for developping our styles.

NPM scripts

| Command | Description | Runs | --------------- | ---------------------------------------------------------- | ----------- | start | Start up storybook | start-storybook -p 6006 -s ../../storybook/static | build | Build package contents | webpack | build:storybook | Build storybook styleguide | build-storybook | lint | Lint scss files | stylelint ./src/scss --cache --syntax scss | prepublishOnly | Runs before every npm run publish (!important for lerna) | npm run lint && npm run build