Styles

Browsersconfig

It’s recommended to use our browserslist config to transpile your styles. See bundling.

Methodologies

Cube CSS

Cube CSS is a modern, lightweight CSS methodology focused on simplicity and maintainability. It stands for:

Composition: Build components with a composable and modular approach.
Utility: Use utility classes for specific, single-purpose styling.
Block: Define blocks as reusable, independent components.
Exceptions: Handle exceptions with overrides to manage special cases.

Cube CSS emphasizes clear, consistent naming conventions and avoids deep specificity, promoting easier debugging and scaling. It also encourages a utility-first approach, minimizing the need for complex CSS structures.

For more detailed information, visit the official Cube CSS documentation.

Mobile first

Mobile-First Media Queries: Begin by writing CSS for the smallest screen sizes and use media queries to progressively enhance the design for larger screens. This ensures a mobile-friendly layout is the default and allows for easier scaling.
Fluid Layouts with Relative Units: Use relative units like percentages (%) and em to create fluid layouts that adapt to different screen sizes. Avoid fixed pixel values for widths and heights.
Flexible Typography: Implement responsive typography using em or rem units for font sizes. Make sure the text remains readable and adjusts well on various devices.
Touch-Friendly Buttons and Links: Design buttons and links with larger touch areas to make them more accessible and easy to tap on mobile devices.

Sass

Do not use node-sass. The project always uses dart-sass.

Dart Sass is written in Dart language and is known for its fast compilation speed. It tends to outperform Node Sass in terms of processing and rendering Sass stylesheets, especially on larger projects. It’s the reference implementation of the Sass language, which means it’s likely to be more up-to-date with the latest Sass language features. This allows you to take advantage of the newest Sass functionalities sooner.

Maintenance is done by the official Sass team, ensuring it receives regular updates, bug fixes, and performance improvements. Node Sass, on the other hand, has seen some changes in maintenance and support due to certain dependencies, which might impact its long-term stability.

The error message often provides more helpful and detailed information compared to Node Sass, making it easier to debug and fix issues in your Sass code.

use `@use` instead of `@import`

you can do this easily by making use of the migrator of Sass-lang.com
there are some serious issues with @import e.g. putting everything (variables, mixins, functions) on the global scope), executing each stylesheet emitting its CSS every time (increases compilation time and produces bloated output).

more information available on @use

Tips and Tricks

`currentColor`

currentColor is a keyword in CSS that is mapping to the current color property (which is also inherited). It’s easy to use when making e.g. ghost buttons.

.button.secondary {
  color: var(--button-text-color);
  border: 1px solid currentColor; /* this will make sure that the border-color is always the same as the font-color */
}

Custom properties

Custom properties in CSS provide more functionality (and are native CSS so not a dependency of our code on Sass)

Using CSS custom properties

:root {
  --primary-color: red;
}
.btn.primary {
  background-color: var(--primary-color);
}

making use of the @property-notation to make custom properties animatable

@property --primary-color {
  syntax: '<color>';
  initial-value: red;
}

-> more information about this @property syntax and its possibilities

Logical Properties

There are new properties here to make it easier to support other writing-modes, like RTL.

The horizontal axis is now the inline axis (so width becomes inline-size as well as e.g. margin-left becomes margin-inline-start ) The vertical axis is now the block axis (so height becomes block-size as well as e.g. margin-top becomes margin-block-start )

CSS logical properties and values - CSS: Cascading Style Sheets | MDN (mozilla.org)

Logical Properties (web.dev)

Cascading Layers

CSS Cascading Layers provide a new way to structure your CSS code. Each layer comes with its own specificity context, so you can write simpler/shorter selectors from now on.

@layer atoms, molecules, organisms;
@layer atoms {
  button {
    color: #ffffff;
  }
}

More information via MDN

To Do

Describe tokens