Start Developing

• Guideline & Best Practices
• Implementation
• Installing Currency
• Usage
• Customizing Currency

Guidelines and Best Practices

Markup and Style

Namespaces

Currency classes are preceded by namespaces that signify their use.

.c- Components

.p- Patterns

.l- Layouts

.u- Utilities

BEM Naming

In order to keep our code base manageable and specificity low, Currency follows the BEM (Block, Element, Modifier) naming convention. A block represents an independent component that is functional on its own. All variants and properties of that component are included in the base class.

An element, a part of the base class, is separated from the base name by two underscores. An element is dependent on the block for meaning.

A modifier changes the base class or parent element and is separated from the element by one dash. It’s used to change an element’s appearance or state.

Accessibility

A benefit of using a centralized design system is ensuring that all of our users, regardless of ability, have a phenomenal experience using any of Wilmington Trust’s products. Currency follows the POUR standard set forth by the Web Content Accessibility Guidelines (WCAG): we design experiences that are perceivable, operable, understandable, and robust. And while accessibility is baked into our components, collaboration between all members of product teams is essential.

Implementation

Currency code assets are available in our Azure DevOps repository which is available to clone for use. For questions regarding permissions restrictions, please reach out to the Currency team.

Installing Currency

Currency is hosted on M&T's private Artficatory registry and can be installed via npm.

Set your registry

Set your npm registry to Artficatory.

npm config set registry https://bar.prod.mtb.com/artifactory/api/npm/mtb-npm-ga

Install the package

Install Currency as an npm dependency.

npm install currency-design-system --save-dev

Updating Currency

The Currency team will push all updates to Currency to the npm package upon every release. Run the following command to update to the latest version available on Artifactory:

npm update currency-design-system

Usage

Currency can be used in its entirety or broken down to smaller pieces to fit the needs of your project.

Import main SCSS file

To use all of Currency, simply import the following file:

@import "~currency-design-system/scss/mtb-currency-design--defaults-set.scss";

Use the below import if you do not wish to have your defaults overwritten:

@import "~currency-design-system/scss/mtb-currency-design.scss";

Import main CSS file

If your project does not use SCSS/SASS, or if you do not intend to modify Currency, import the following pre-compiled stylesheet:

@import "~currency-design-system/css/mtb-currency-design--defaults-set.css";

Use the below import if you do not wish to have your defaults overwritten:

@import "~currency-design-system/scss/mtb-currency-design.scss";

Customizing Currency

If you have Currency installed in your node_modules folder, you can choose to import select stylesheets to fit the needs of your project, as shown in the example below:

$_localFontPath: "~currency-design-system/fonts/";
$_arrowPath: "~currency-design-system/images/dropdownArrow.svg";
$_fillPath: "~currency-design-system/images/dropdownFill.svg";

@import "~currency-design-system/scss/1-settings/brand/mt/__var-initials",
        "~currency-design-system/scss/1-settings/brand/mt/mt-tokens",
        "~currency-design-system/scss/1-settings/tokens.scss",
        "~currency-design-system/scss/1-settings/theming/_theme-logic",
        "~currency-design-system/scss/1-settings/brand/mt/__var-index",
        "~currency-design-system/scss/2-tools/__tools-index",
        "~currency-design-system/scss/4-defaults/__defaults-index",
        "~currency-design-system/scss/5-components/__component-index",
        "~currency-design-system/scss/6-patterns/__pattern-index",
        "~currency-design-system/scss/7-layouts/__layout-index",
        "~currency-design-system/scss/9-utils/__util-index";

Local Paths

$_localFontPath: "~currency-design-system/fonts/"; 
$_arrowPath: "~currency-design-system/images/dropdownArrow.svg";
$_fillPath: "~currency-design-system/images/dropdownFill.svg";

Tokens & Settings

This step is mandatory in order for Currency to work, as the other files depend on it.

@import "1-settings/brand/mt/__var-initials";
        "1-settings/brand/mt/mt-tokens";
        "1-settings/tokens.scss";
        "1-settings/theming/theme-logic", 
        "1-settings/__var-index";

Tools

This step is mandatory in order for Currency to work, as the other files depend on it.

@import "2-tools/__tools-index";

Vendors

Third-party styles that are being used on a project. ie Bootstrap or Foundation.

@import '3-vendors/__vendor-index';

Elements

@import "4-defaults/__defaults-index";

Components

Classes begin with a namespace: c-

@import "5-components/__component-index";

Patterns

Classes begin with a namespace: p-

@import "6-patterns/__pattern-index";

Layouts

Classes begin with a namespace: l-

@import '7-layouts/__layout-index';

Utilities

Classes begin with a namespace: u-

@import "9-utils/__util-index";