About The Mod Base Design System

Mod Base is a design system package for use on Modernize's S3 microsites. This differs from our mod-style library because we will be removing the use of bootstrap, and will no longer house "component styles." Component styles will live with their shared component HTML / JS.

File Structure of Mod Base

src / fonts / modstyle-icons/ - icon font folder

• modicons-basic
• modicons-fill
• modicons-stroke

styles /

base /

• _breakpoint-mixins
• _colors
• _flex
• _fonts
• _reset
• index

icons /

• _basics
• _fill
• _stroke
• index

templates /

• _dark-mode

.editorconfig - rules for code editors based on company's code guidelines

.sass-lint.yml - configuration for SASS/SCSS linter

package.json - Node modules used in mod-base

Updating Mod Base

When updating mod-base, you will want to create a beta version to pull into a site for testing purposes (before publishing a new, stable version).

For more detailed instructions on updating NPM packages — checkout our documentation! How to Update NPM Packages