About

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

Built with Eleventy & hosted on Netlify.

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

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