Code Style and Conventions

CSS

Units

• Generally 'rem' is used
• Exceptions:
  • px for: border-width, border-radius, box-shadow, outline-width (these do not scale well, and don't need to)
  • px for media-queries
  • Relative units (%, vw, etc.) can be used where they make sense (e.g. layout)
  • For line-heights, unit-less values are used (e.g. 1, 1.2)

When defining rem values within KoliBri, always use the provided Sass function:

@import '@shared/mixins';
font-size: rem(16);

This ensures that the passed value always equals to the same number in pixels for default browser settings.

When a project uses a different root font-size than 16px, this can be configured using a CSS custom property and will be taken into account:

html {
  font-size: 65.5%; /* Equals 10px */
  --kolibri-root-font-size: 10;
}

Background reading and code samples