Styling/CSS Framework

This is a explatiation of Nova's styling framework and philosophies.

For pratical references on styling components, refer to Component Library - Styling

For how to guides for specific brand-related tasks, see Brands - Styling.

Every Layout

Nova's approach to styling is based off the princples outlined in Every Layout (opens in a new tab).

If you want to be successful with writing CSS/SCSS in Nova you should give it a read.

• Read (opens in a new tab)
• Download (opens in a new tab) (also available in OneDrive (opens in a new tab))

Key Concepts

• Boxes - Remember, everything in web dev is a box, even if it doesn't look or behave like one.
• Composition - We value a component library where components can be used interchangeably and in combination with others to create more complex layouts. Most layouts can be achieved by mixing and matching existing components and styles.
• Layout Primitives - Similar to primitives in other programming languages (string, array, bool, etc.), we define the most common/primitive CSS layouts needed for easy and consistent reuse.
• Intrinsically Responsive - Where possible, we avoid media queries in favor of components that are themselves responsive. Every Layout has some great examples, but with Container Queries we really commit to this approach.
• Localized Styling - We leverage CSS modules and other tools/techniques to keep styles contained to the component(s) they affect.

Layout and Brand "layers"

To help us avoid styling conflicts, we've broken up component styles into a "Layout layer" and a "Brand layer".

• The Layout layer is responsibe for arrangement of boxes.
• The Brand layer is responsible for the brand design implementation.

These styles can be found in styles.module.scss and brands/${brand-name}.module.scss respectively.