green tea machine

flexbox

Flexbox my beloved. It's my go-to for doing any sort of layout or centering something.

I reference the CSS Tricks Flexbox Reference Page all the time, but as of writing this it's returning a 404? I hope that gets restored eventually.

It really is as simple as:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.container {
    display: flex;
    flex-direction: column;
}

css variables

CSS custom properties are awesome! I mostly use them for playing around with colors. They make it easy to configure something in one place and then use it everywhere else without duplicating CSS everywhere.

For example, this is a snippet from the current :root of this site:

:root {
  --background-color: var(--color-canvasWhite1);
  --body-text-color: var(--color-winterGreen);
  --accent-color: var(--color-lotusGreenDarker);
  --box-radius: 0.25rem;

  /*
    https://github.com/thesimonho/kanagawa-paper.nvim
    /blob/master/palette_colors.md
  */
  --color-lotusGreenDarker: #51643A;
  --color-winterGreen: #2B3328;
  --color-canvasWhite1: #cbc8bc;
}

And then I can just:

.my-container {
    background: var(--background-color);
    color: var(--body-text-color);
}

gradients

You can do color gradients in CSS!

.my-div {
  background: linear-gradient(
    0deg,
    #59c8f3,
    #eda2b2,
    #ffffff,
    #eda2b2,
    #59c8f3
);
}

There's a generator to play around with. You can even make animated gradients! My browser new tab page is set to a page that just displays the time with an animated gradient background.

color functions & mixing colors

This is one of my favorite new-ish things in CSS. It's really powerful, especially when combined with variables. Rather than creating new variables for different shades or mixes of colors, generate them dynamically!

CSS Tricks has a good reference.

Try this:

.my-div {
    background: color-mix(in srgb, red 50%, blue 50%);
}

It works with variables, too!

.my-div {
    --color-a: RebeccaPurple;
    --color-b: Turquoise;
    --color-mixed: color-mix(
        in srgb,
        var(--color-a) 25%,
        var(--color-b) 75%
    );
}