Profile picture of Michael Großklaus

Michael Großklaus

Doing frontend things at factorial.io and created miyagi.dev.

GitHub
github.com/mgrsskls
Mastodon
indieweb.social/@mgrsskls
RSS
/feed.xml

Built with Eleventy & hosted on Netlify.

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

  1. Gradient border

    Date:
    Tags:
    • css

    Without rounded corners:

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

    With rounded corners:

    border: solid 0.25rem transparent;
    background:
    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.

  2. Numbers with same width

    Date:
    Tags:

    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.

  3. CSS Grid tiles

    Date:
    Tags:

    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.