Astro-DS

Bootstrap-based React Components library.

Styles: Plain CSS, BEM + EM/REM

BEM

We are using our peculiar and condensed BEM Syntax:

• Use prefix for selecting any element declared within astroticker: ads-.

• Block elements will be declared right after. Separated by a low dash to differentiate Blocks from Elements. camelCase is allowed. Sample: ads-blockClass

• Elements come right after preceded by a low dash. Sample: ads-block_elementClass

• Modifiers close the className for a complete definition of the className. Sample: ads-block_element-modifier .

Measurement units: EM/REM

When to apply:

• body font-size is set to 62.5% (on small devices), () in order to make calculations easier. This initial value will make 1rem to be equal to 10px.

• We are using rem units for font-sizing. Like so, component's font-size itself or its elements does not depend on ascending (parent elements), just the Root.

• We use em units for properties that may change depending on the element's font-size.

• We use rem for any properties that have a global scope, like spacing properties.