CSS Stylesheet

This style sheet is based on SUIT CSS, which relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). We've modified and adapt some naming conventions to fit on webflow and our workflow.

The primary architectural element is components.

Components

Syntax: c-{ComponentName}{-descendentName}{--modifierName}

The goal is to partially isolate the CSS used in the component's implementation. In doing so, it makes styling simpler by reducing the amount of styling entanglement between components, and prevents styles from leaking outside the component.

ComponentName

The component's name must be written in pascal case (ComponentName) and are identified by the prefix c-.

ComponentName--modifierName

A component modifier is a class that modifies the base component in some form. Modifier names must be written in camel case (modifierName) and be separated from the component name by two hyphens (--). The class should be included in the HTML in addition to the base component class. Example: c-ProjectComments c-ProjectComments--userHeader

ComponentName.is-stateOfComponent

Use is-stateName to reflect changes to a component's state. The state name must be camel case. Never style these classes directly; they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component). For example, the component c-AssignTag would have a class is-active as a with specific style, and that would different from  the class is-active children of the component c-UserComments

Utilities

Utilities have been deprecated to focus on components based on modifiers and descendants. They can only be used when they are not needed to be overwritten on responsive.

Low-level structural and positional traits. Utilities can be applied directly to any element within a component. Utilities are widely reusable classes that do one thing. Responsible for most of the visual changes such as margins, text alignment, font-size, font-family, positioning, etc. They are identified by the prefix u-. Utilities must use a camel case name.

Why to use utilities? Certain CSS properties and patterns are used frequently. Relying on utilities can help to reduce repetition and provide consistent implementations.

How to use utilities? Utilities can be added to any element; multiple utilities can be used together; and utilities can be used alongside component classes.

This styleguide is designed for styling reusable, composable components. The benefits are most apparent in a system that considers components to be the building blocks of your website. Think of components as custom elements that enclose specific semantics, styling, and behaviour.