Switch to M&T
DesignDevelop
Version 4.5.1
Overview

Start Developing

Currency’s code library provides developers with out of the box tools to create a consistent user experience across products, while also providing flexibility for ad hoc decision-making. Using the library as intended lets developers work faster while following SCSS and HTML conventions.

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.

.c-card

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.

.c-card__img

.c-card__title

.c-card__body

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.

.c-button--primary-disabled

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
Copy
If you do not have access to Artifactory, please reach out your tech lead for the appropriate permissions.

Install the package

Install Currency as an npm dependency.

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

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
Copy

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/wtc-currency-design--defaults-set.scss";
Copy

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

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

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/wtc-currency-design--defaults-set.css";
Copy

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

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

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/wt/__var-initials",
        "~currency-design-system/scss/1-settings/brand/wt/wt-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/wt/__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";
Copy

Local Paths

By default, Currency will search for the following assets in your node_modules directory. To host them locally, you may change the following variables to your new path:
$_localFontPath: "~currency-design-system/fonts/"; 
$_arrowPath: "~currency-design-system/images/dropdownArrow.svg";
$_fillPath: "~currency-design-system/images/dropdownFill.svg";
Copy

Tokens & Settings

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

@import "1-settings/brand/wt/__var-initials";
        "1-settings/brand/wt/wt-tokens";
        "1-settings/tokens.scss";
        "1-settings/theming/theme-logic", 
        "1-settings/__var-index";
Copy
This imports a function that creates mapping for theme to local variables.

Tools

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

@import "2-tools/__tools-index";
Copy
Preprocessor functions to help write or extend properties on classes. This includes: functions, placeholders, mixins and media queries.

Vendors

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

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

Elements

@import "4-defaults/__defaults-index";
Copy
Elements are HTML native that are only meant to be used as a standalone element and should not be used to compose components.

Components

Classes begin with a namespace: c-

@import "5-components/__component-index";
Copy
Components are small features (ex. buttons) that make up a part of the website. Each component is fully functional by itself and does not rely on any other components.

Patterns

Classes begin with a namespace: p-

@import "6-patterns/__pattern-index";
Copy
Patterns are combinations of components that are not saleable such as a header, footer or modal. Only one pattern should appear on a page at once.

Layouts

Classes begin with a namespace: l-

@import '7-layouts/__layout-index';
Copy
Layouts are used for design patterns where items are arranged (not decorated). When you make a change to a layout class, every page throughout the website will be affected.

Utilities

Classes begin with a namespace: u-

@import "9-utils/__util-index";
Copy
Make changes only for a certain style in a specific place. Utility classes can help us update it without having to change the entire CSS structure.