Getting Started

The Mutual of Omaha Design System Toolkit is an interface component library used to build websites and applications.

Just like Twitter's Bootstrap or Zurb's Foundation, Mutual of Omaha’s toolkit should be considered the starting point… a style and component baseline for implementing common layout patterns and interactivity.

Our toolkit differs from other frameworks. It’s modular and is built using the SUITCSS methodology, which is focused on protecting maintainability and extensibility. SUITCSS is not a CSS framework, library, or set of tools, but an interface architecture methodology based on a naming convention and a set of computer science principles.

Our toolkit is built as a modular, mobile-first, object-oriented (OOCSS) library. Following Design System standards, you will be able to develop a webpage or app without needing custom or one-off code.

SUITCSS-specific documentation:

How to implement

The CSS files use PostCSS and CSS Next, and JS files are built with the ES6 syntax. A bundler, such as Webpack, along with postcss-loader and babel-loader is recommended to transpile the ES6 JS and PostCSS into CSS.

Processing CSS with PostCSS and cssnext

PostCSS can be used with many types of processors. The Digital team favors Webpack for our build process. To set up for Webpack or any other processor that you build relies on, please review PostCSS’s usage guide. It is important to evaluate your project and find the best processor that works for you and your team.

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.

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:

3. Configure PostCSS

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

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.

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.

5. Adding desired module import to your CSS or JS file.

In your CSS file, add the following to import it from node_modules:

If the component you want to use contains JS, then import the module in the JS file. For example, to pull in the Overlay module, add the following:

View the documentation for Overlays.

After importing the JavaScript from our node_modules, you may have to run an init() function to start its functionality. Information about which modules need initialization can be found within the design system next to the modules that have accompanying JavaScript.

6. Loading needed fonts.

In your page's head tag, add one of the following options to get our fonts to load. To read more on our fonts, go to our documentation on Typography. The script tag supports better asynchronousity, preventing render blocking where possible.