CSS from the ground up

CSS is a wild and wooly world to dive into --- it seems that the lion's share of CSS floating around the web is not particularly well-written. After all, the visual paradigm it addresses can really encourage a "tweak-till-it's-right" kind of approach.

Starting from the ground up, on the other hand, is really the only way to fully understand what it is your site is doing. Luckily, the Pelican static site generator does a fantastic job providing a straightforward set of html templates known as the 'simple' theme. Over the course of two days it was straightforward to assemble a dynamic one-or-two-column layout, inspired greatly by Giulio Fidente's work.

One important thing I've learned about CSS is to avoid w3schools as a resource! There are so many inaccuracies, and poor advice. Better to use the Mozilla CSS docs, or better yet, go to the W3C horse's mouth directly. CSS-Tricks is also a fantastic resource.

Other lessons learned:

  • Avoid 'absolute' positioning and favor blocks and floats when possible.
  • Relative (ie., percentage-based) and absolute measures for layout elements don't really play nicely together. I used percentage-based widths at the body-level <nav>, <main>, and <footer> CSS stylings, and then drew things such as one-pixel borders and set pixel-based padding to <div> elements nested immediately within.
  • Use the @media queries provided by CSS to construct dynamic layouts!