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.
How to implement
Processing CSS with PostCSS and cssnext
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:
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.
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.