@daonomic/ui

    20.1.0 • Public • Published

    Build Status npm version

    daonomic-ui

    Base 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&amp;subset=cyrillic"
      rel="stylesheet"
    />

    Keywords

    none

    Install

    npm i @daonomic/ui

    DownloadsWeekly Downloads

    109

    Version

    20.1.0

    License

    Apache-2.0

    Unpacked Size

    260 kB

    Total Files

    92

    Last publish

    Collaborators

    • 0v1se