@cas-smartdesign/styles

A shared package providing style variables and basic style sheets to create SmartDesign like components and apps.

Entry points and bundles

The package has two main SCSS files and two corresponding CSS bundles.

• scss/styles.scss (compiled to dist/styles.css)
• scss/theme.scss (compiled to dist/theme.css)

Styles bundle

Contains prefixed class rules that can be added to your components to make them fit into SmartDesign.

In order to make use of the predefined variables (e.g. colors or spacings) in your components we recommend to use the styles.scss file or the module SCSS files and include it in your build process.

Theme bundle

The theme bundle contains every rule that is contained in the styles and also defines rules to some standard HTML tags that makes it easier to style a simple page.

Note that as it can modify the look and feel of other components we don't recommend this to be used on complex apps that also use third party elements.

SCSS structure

Beside the main files every SCSS file is declared as partial and they are organized in two folders:

Variables (scss/variables)

Files in this folder contain shared variables that are used for components or other modules.

Modules (scss/modules)

Files in this folder contain rules that are specific for a topic or component.

| Module | Description | | :---------: | ---------------------------------------------------------------------- | | app | Defines the most basic styles | | base_colors | Defines auto generated classed to change the color of a single element | | button | Defines rules for button-like elements | | colors | Defines classes for SmartDesign specific colors (mostly backgrounds) | | link | Defines rules for hyperlink-like elements | | misc | Defines rules for the simplest components | | spacing | Defines classes for setting pre-defined margin and padding values | | typography | Defines classes for setting pre-defined typography values |

Styling guidelines

• Every rule should behave the same in all the supported browsers
• Always use the "sd-" prefix for class names
• Beside the theme bundle, avoid changing default HTML styles
• Only use !important keyword for very specific rules (e.g. sd-hidden, sd-red)
• A variable file must not reference to files outside the variables folder (e.g. the modules folder)
• A module file can use other modules and variables, but dependencies should be imported explicitly