@mobly/ui-styles v1.0.1

@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