CSS

Stratosphere provides all the CSS vars and utils you need to make your applications match the Design System's standards.

Utils

Utils are re-usable class names that can give an element desired styling.

See the full list of utils on GitHub.

Adding New Utils

Whenever you’re finding that you’re using a style frequently setting the same properties on an element, consider abstracting it into a utility.

Rules of thumb

• Utilities should be reserved for frequently used things. If you only need it once or twice, it probably doesn’t need to be a utility
• Dont abuse utils. We dont want hundreds of utilities for margins or other trivial things. You will still need to write css in your application.

See the docs for more information.

Vars

The design system ensures visual consistency by using a vars.scss file for all visual concerns like color, spacing, font, max width, box shadows etc. On build, this file gets included in the distributed package in a scss format, css format and less format for use in different kinds of apps.

The goal is for all design system components and all custom css to eventually use these vars as much as possible. This will allow us to control all of our visual styles from the design system, and make UI changes globally with a new design system release.

See the full list of vars on GitHub.

Adding New Vars

Whenever you’re writing CSS in the design system, you should think about whether that style will need to be used again. If it is, it can be added to vars.scss. Follow the naming convention guidelines and put it in the appropriate section in the file or create a new one.

Rules of thumb

• Things that are universal don't need a variable. eg: 0px, 0%, 100%, 100vw, 100vh
• Variables should be coherent and meaningful. We dont need a 25px variable if we already have one of 20px . It’s possible that the 25px is just a manual error in the design. Consult design if you’re not sure.

Usage

main.ts

import '@ci/stratus-components/styles/vars.css'