Review: How To Make A Nice Site With Less CSS From Kevin Powell (19min)

TL;DR

I really liked this one.. The info per min ratio is high while sticking at my very novice at css level

Notes

  • The colors came from Real Time Colors. I'm not excited about them. I just grabbed the first thing that came up. They could use some help

  • The width code pads 1.5rem on each side of the page at smaller window sizes then caps the max width to 65 characters for readability.

  • Very cool trick with `.flow > :where(:not(:first-child)) { margin-top: 1em; }`css` to add vertical spacing to stuff inside a container (with class `.flow`css`)

  • The first version they showed was `.flow > * + * { margin-top: 1em; }`css` which I don't really understand so I'm sticking with the one with text.

  • Got fluid text sizes from: Utopia.fyi with their Type calculator

  • The video used different fonts for the header sections. I don't have one that pairs with Hyperledgible yet so I'm just sticking with it.

  • `::marker`css` is what adjusts the bullets in lists

  • `text-wrap: balance;`` is what equalizes the line lenghts of the headings. It's not fully supported but doesn't hurt anything if you use it somewhere that doesn't understand it. It just gets ignored.

  • The flow trick he puts in later in the video for chaining font size is great. Look at the CSS in the source to see how that's done with a variable for the headers.

  • Right now you'll need to view source to see the CSS. I'm working on a Neopolitin update to show it automatically. It'll be visible when that's in place.

Sample Content

Everything Below Is For Position Only

Add salt before you fry the egg. Be sure to set the lamp firmly in the hole. Beat the dust from the rug onto the lawn.

Breathe deep and smell the piny air. Bring your best compass to the third class. Cap the jar with a tight brass cover. Crack the walnut with your sharp side teeth.

Cut the pie into large parts. Dip the pail once and let it settle. Draw the chart with heavy black lines. Drop the ashes on the worn old rug.

Fasten two pins on each side. Fly by night, and you waste little time. Glue the sheet to the dark blue background.

Test Image

  • Setup so the CSS shows up on the page

Notes

  • They originally had `width: min(100% - 3rem, 58ch);``.

    I changed it from `100%`` to `100vw`` because I had some preformated code lines extend past the side the messed with it. I expect there are other ways to deal with that too.

Reference

Real Time Colors

This is where he got the colors