Home

CSS Standards

• id & class names should be prefixed with unl-. For example: unl-scarlet.
• id & class names use hyphens (-) between words, all lowercase.

Sass Standards

Sass Preprocessor

All custom developed styles should be done in Sass. CSS is generated through an automated build process.

Methodology

For style organization, we're attempting to adhere to the [ITCSS methodology] (https://benmarshall.me/itcss/).

File Organization

The following directories are in the /wdn/templates_5.3/scss directory.

/variables

Sass variables and CSS custom properties (CSS variables) set values across the framework.

/mixins

Commonly used declarations can be reused with mixins.

/functions

Functions do not output any CSS but are used to calculate values.

/generic

Generic styles reset browser defaults and provide a consistent foundation for other styles.

/elements

Basic styles are applied directly to HTML elements.

/objects

Objects provide layout and structure to a page.

/components

Components consist of a wide variety of user interface (UI) regions.

/utilties

Utilities are helper classes that, in most cases, make targeted adjustments to one style.