astro-ds

Astroticker Design System Lib

Usage no npm install needed!

<script type="module">
  import astroDs from 'https://cdn.skypack.dev/astro-ds';
</script>

README

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.