Profile picture of Michael GroßklausMichael Großklaus

Color scheme

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

  1. In this post I want to give a short example why there is in my opinion a better way than using a Mobile First approach when writing CSS. Please note that for simplification I will refer to viewports as well as media queries, but the same concept also applies to anything that can be controlled by media and container queries. […]

  2. Implementing a light and dark theme based on the user's OS settings has become quite popular. But often users just want their OS to be dark, while they prefer reading a website with a light background, for example. It is therefore considered good practice to offer a theme toggle, that allows the user to change the theme of the website regardless of their OS theme. […]

  3. Without rounded corners:

    border: solid 0.25rem;
    border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);

    With rounded corners:

    border: solid 0.25rem transparent;
    linear-gradient(white, white) padding-box,
    linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;

    Drawback: You need to set a solid color as background, so it cannot be transparent.

  4. 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.

  5. I can never remember this snippet:

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));

    This will create equally sized columns, where 20rem is the minimum width of the columns. When they would become smaller than this, the last entry in a row moves to the next row.

    We use min(100%, 20rem) to avoid overflow when the container is smaller than 20rem.

  6. One reason frontend development never becomes boring is the fact that the available technologies evolve rapidly. Browser vendors publish new features every few weeks, which makes it hard to stay up-to-date. At the same time it also makes development much easier as as a lot of functionality gets introduced by the new browser versions. […]