Profile picture of Michael GroßklausMichael Großklaus

Color scheme

Collecting some frontend related notes, thoughts, bookmarks and tips.

  1. With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):

    font-variant-numeric: tabular-nums;

    This can be helpful for example for tables or when displaying prices below each other.

  2. The following principles are valid for all kinds of animations:

    • Appearing: ease-out, longer animation
    • Disappearing: ease-in, shorter animation
    • Moving: ease-in-out
    • Long distance / big screen: longer animation
    • Short distance / small screen: shorter animation

    When fading in list items, that means multiple items:

    • overlapping, not one after, not at the same time
    • vertical: top to bottom
    • grid: top left to bottom right