home ~ projects ~ socials

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; } to add vertical spacing to stuff inside a container (with class .flow)
  • The first version they showed was .flow > * + * { margin-top: 1em; } 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 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

My apologies. The process I use to include alt text is currently broken. I'm working to get it fixed and hope to have it working again soon.

Notes

  • The original width in the video was width: min(100% - 3rem, 58ch);. I ended up changing that to width: min(100vw - 3rem, 58ch); 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.

A color generator website that I found out about from Kevin Powell. I like that it shows you the colors, but it's not quite what I'm looking for

-- end of line --