Home
Head's Up: I'm in the middle of upgrading my site. Most things are in place, but there are something missing and/or broken including image alt text. Please bear with me while I'm getting things fixed.

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

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

- 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 [TODO: Code shorthand span ] to add vertical spacing to stuff inside a container (with class [TODO: Code shorthand span ] )

- The first version they showed was [TODO: Code shorthand span ] 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.

- [TODO: Code shorthand span ] is what adjusts the bullets in lists

- [TODO: Code shorthand span ] 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

- The original width in the video was [TODO: Code shorthand span ] . I ended up changing that to [TODO: Code shorthand span ] 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