Style Utilities

The OLYSENSE Design System’s CSS Utilties provides a method of styling elements with as little friction as possible. All CSS selectors are prefixed with ods- to prevent name collisions. You can use them standalone, or with another CSS framework.

Typography

Our Typography Library provides a toolkit for consistent text styles that can applied to elements in your application.

Install our Olysense Typography library to apply our Typography CSS utilities.

• Semantic size types for enhanced readability
• Responsive sizing for optimal display
• Text transformation capabilities

npm install '@ods/typography'
yarn add '@ods/typography' 

Import the css library into your application.

import '@ods/typography/index.min.css'; 

Layout

A lightweight layout library for building responsive mobile first UIs.

• Intuitive, declarative layout design
• Versatile grid, block, and inline layout options
• Responsive container queries for adaptive components

The library uses the latest CSS Container Queries and CSS Selector nesting.

Install our Olysense Layout library to build responsive UIs using Block , Inline , and Grid CSS utility classes.

npm install '@ods/layout'
yarn add '@ods/layout' 

Import the css library into your application.

import '@ods/layout/index.min.css'; 

Avoiding Styling Conflicts

By default, the Olysense Typography and Layout libraries both make use of CSS layers . Without going into too much details, layers are a way to organize styles into distinct groups, where each layer has a specific priority, allowing you to control which styles take precedence over others by defining a hierarchy between them. Essentially layers act like stacked sheets of paper where the top layer overrides the ones below it.

This provides greater control over the CSS declarations that ultimately get applied. As shown below, the layout and text layers are both nested under an ods-ds layer.

@layer ods-ds {
    /* @ods/layout/index.css */
    @layer layout {
        color: gren;
    }

    /* @ods/layout/typography.css */
    @layer text {
        color: blue;
    }
} 

Style Prioritization

As described here , it’s important to understand the following:

• Layered styles are less important than un-layered styles. This means if you import something like a CSS reset into your application, by default the styles within that reset will have a greater priority than those coming from either of these libraries (which would not be preferred).
• Cascade layers stack in the order they first appear. So given the following @layer layer-2, layer-3, layer-1 , the order would be exactly as shown -2, -3, -1 .

An example of various styles being applied and their corresponding priority is shown below, where some of the styles are defined with layers and others are not.

/* Cascade layers stack in the order they first appear */
@layer ods-ds.typography, ods-ds.layout;

/*
@import "./reset.css";
PRIORITY: 2 (overrides the color in the layers below, but is overriden by index.css below due to order)
*/
h1 {
    color: black;
}

/*
@import "@ods/layout/index.min.css";
@import "@ods/typography/index.min.css";
*/
@layer ods-ds {
    /*
    @ods/layout/index.css
    PRIORITY: 4 (overrides nothing)
    */
    @layer layout {
        color: gren;
    }

    /*
    @ods/layout/typography.css
    PRIORITY: 3 (overrides layout as it's defined first at the top of the file)
    */
    @layer text {
        color: blue;
    }
}

/*
inline-css within index.css
PRIORITY: 1 (overrides all other colors as it comes last in the declaration and is un-layered)
*/
h1 {
    color: red;
} 

Guidance

To ensure styles are applied properly, it is recommended that you establish a simple layer order when importing your global CSS files. This would include things like a shared reset (ex. Normalizer, CSS Remedy), a utility toolkit (ex. Tailwind) and of course the Olysense libraries (which reside under the ods-ds layer).

Simple

One of the clearest initial use cases would be to make low-priority defaults that are easy to override. In this case, we can ensure that those layers nested under the ods-ds layer will take precedence over the CSS reset.

@layer reset, ods-ds;

@import url(reset.css) layer(reset);
@import "@ods/layout/index.min.css"; /* already assigned to layer: ods-ds.layout */
@import "@ods/typography/index.min.css"; /* already assigned to layer: ods-ds.typography */ 

Complex

As projects become larger and more complex additional layers may be needed. The example below assumes the application is currently leveraging boostrap. Notice how bootstrap-utilities are defined last to ensure those always take precedence.

@layer bootstrap-reset, bootstrap-layout, ods-ds.layout, ods-ds.typography, bootstrap-utilities;

@import url(bootstrap/reboot.css) layer(bootstrap-reset);
@import url(bootstrap/grid.css) layer(bootstrap-layout);
@import url(bootstrap/utils.css) layer(bootstrap-utilities);
@import "@ods/layout/index.min.css"; /* already assigned to layer: ods-ds.layout */
@import "@ods/typography/index.min.css"; /* already assigned to layer: ods-ds.typography */