Kihon

Kihon — styling from the ground up

by saltymouse

You probably don't need Bootstrap/Tailwind/Sass and other frameworks and tools for your blog and landing-pages. So often we reach into the yarn add bootstrap package bucket without thinking of the transmission size down the line. Modern, standards-based CSS is capable of doing all the fancy things you probably want to do.

There are a lot of minimalist CSS starters out there, but Kihon tries to strike a balance between minimal yet modern and usable. The page you're reading now is styled with Kihon.

Pink & blue waves
Bootstrap (22.7KB) is about the same size as this image (36KB)... which brings more joy to the page?

Overview

Take a peek at the source-code to follow along. It's only ~100 lines (one "page")!

Kihon uses hand-picked colours for dark-mode, but if you're not in the colour-picking mood, you can always use the mix-blend-mode overlay hack. 

@media (prefers-color-scheme: dark) {
  body::after {
    background-color: oldlace;
    content: '';
    display: block;
    height: 100vh;
    left: 0;
    mix-blend-mode: difference;
    position: fixed;
    pointer-events: none;
    top: 0;
    width: 100vw;
  }
}