Usage

All examples in the Design System include the module package name for the package.json to install the module. All modules are deployed in the Mutual of Omaha Artifactory, along with the necessary CSS or JS imports.

1. Create a .npmrc file and add the @moodxd registry

A .npmrc file must be created in each project. Add the following snippet to the .npmrc file.

@moodxd:registry='https"://repo.mututalofomaha.com/artifoctory/api/npm/npmjs'

2. Run npm install or yarn add

Add the postcss plugins postcss, postcss-cssnext, postcss-nested, postcss-import and postcss-prefix to package.json. This can be done with:

npm install --save-dev postcss postcss-cssnext postcss-nested postcss-import postcss-prefix 



// or



yarn add postcss postcss-cssnext postcss-nested postcss-import postcss-prefix -—dev

3. Configure PostCSS

Add a postcss.config.js file to the root of the project and add:

module.exports = {
 plugins: [
 require("postcss-import")({}),
 require("postcss-cssnext")({}),
 require("postcss-prefix")({}),
 require("postcss-nested")({})
 ]
};

This configuration can be further extended or modified using PostCSS plugins.

4. Adding desired toolkit modules

Add the modules you need for your project to the package.json and run npm install or yarn to download them to your node_modules directory.

"dependencies":{
 ...
 "@moodxd/theme-core":"^5.0.0",
 ...
}Below is a list of all modules currently available. You can yarn add or npm install them or add them to package json with ^5.0.0 as the version.@moodxd/base-reset @moodxd/base-typography @moodxd/component-accordion @moodxd/component-card @moodxd/component-corporate-navigation @moodxd/component-decorative-number @moodxd/component-footer @moodxd/component-form @moodxd/component-hero @moodxd/component-narrative-form @moodxd/component-overlay @moodxd/component-section-navigation @moodxd/component-section-title @moodxd/component-site-navigation @moodxd/component-tabs @moodxd/element-button @moodxd/element-checkbox @moodxd/element-dropdown @moodxd/element-input @moodxd/element-link @moodxd/element-loader @moodxd/element-radio @moodxd/element-select @moodxd/element-table @moodxd/element-textarea @moodxd/element-tooltip @moodxd/eslint-config-moo @moodxd/jsutil-click-outside @moodxd/jsutil-openable @moodxd/jsutil-stickable @moodxd/layout-container @moodxd/layout-grid @moodxd/theme-core @moodxd/utility-flex @moodxd/utility-layout @moodxd/utility-offset @moodxd/utility-order @moodxd/utility-properties @moodxd/utility-size @moodxd/utility-space @moodxd/utility-typography5. Adding desired module import to your CSS or JS file.In your CSS file, add the following to import it from node_modules: