@daonomic/ui

Base UI components for Daonomic services

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@daonomic/ui
1220.1.03 years ago5 years agoMinified + gzip package size for @daonomic/ui in KB

Readme

Build Status npm versionBase UI components for Daonomic services.

Usage

Install dependencies

Install @daonomic/ui package:
npm i @daonomic/ui -SE

Install the following postcss plugins and include them to your build pipeline:
npm i postcss-import postcss-nesting postcss-custom-media postcss-custom-properties postcss-calc postcss-color-function postcss-flexbugs-fixes postcss-selector-matches autoprefixer -DE

Setup build

daonomic-ui uses CSS custom properties for theming, so currently daonomic-ui requires postcss-custom-properties plugin and additional build setup due to insufficient browsers support.
Create project-specific theme file and include base theme:
@import 'daonomic-ui/source/theme/index.css';

:root {
  --color-primary: #000; /* you can redefine custom properties from base theme */
  --color-modal-overlay: rgba(
    0,
    0,
    0,
    0.5
  ); /* and add an additional custom properties */
}

Install webpack-append plugin:
npm i webpack-append -DE

Configure webpack to include theme file at the beginning of every imported CSS file:
{
  test: /\.css$/,
  use: [
    /* all your CSS loaders, */
+    {
+       loader: 'webpack-append',
+       query: `@import "/path/to/theme.css";`,
+     },
  ],
},

Include global styles

@daonomic/ui comes with a predefined global styles for typography etc. Add @daonomic/ui/source/global.css to your webpack entries:
const webpackConfig = {
  entry: [
    `./source/index.js`,
+     `@daonomic/ui/source/global.css`,
  ],
};

Or include it in your own global styles file:
./source/global.css

+ @import "@daonomic/ui/source/global.css";

body { /* ... */ }

Include fonts

By default, @daonomic/ui uses IBM Plex Sans as the main font family, so make sure to include it. For example, from Google Fonts:
<link
  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&subset=cyrillic"
  rel="stylesheet"
/>