Web design from first principles

When I first made this website, I went with a page template originally designed for a CMS. It has some advantages, such as a sidebar that can fit a bunch of links, a table of contents or other stuff.

Lately however I've become more interested in so-called classless CSS, as promoted by CSS Bed. A fancy term to describe something very humble: the idea of making stylesheets that you can drop into any web page and it will look good, because no page structure is assumed.

For example, here's the stylesheet I use on this page: 

body { Width: 80ex; Max-width: 80%; Margin: 1em auto; }
body { Font-family: sans-serif; Font-size: 16pt; Padding: 1em; }
body { Color: darkslategray; Background-color: seashell; }

It's hardly perfect. For one thing, it assumes a light color scheme. Beware of link visibility!

You can do more with it, though. Just five more lines can make for a navbar, as demonstrated on my web design index (and yes, by this point explicit link colors are necessary): 

nav { Color: seashell; Background-color: darkslategray; }
nav { Text-align: center; Padding: 1ex; Margin: 1ex 0; }
nav ul { Padding: 0; Margin: 0; } nav li { Display: inline-block; }
nav li { Margin: 0 1ex; } nav, nav li { Border-radius: 1ex; }
nav a { Text-decoration: none; Color: lightblue; Font-weight: bold; }

Pretty good, is it? Not even 10 lines of CSS in total. With two more we can have a sidebar too: 

aside { Padding: 1ex; Margin: 1ex; Float: right; Clear: right; }
aside { Border: 0.5ex solid darkslategray; Border-radius: 1ex; }

So you can see why this is a big deal, here's the stylesheet I use on my list of favorite books. It's four times bigger, despite looking less sophisticated, and doesn't support extra elements: 

html {
	Background-color: tan;
	Color: black;
}
body {
	Color: midnightblue;
	Background-color: antiquewhite;
	Font-family: sans-serif;
	Width: 70ex;
	Max-width: 80%;
	Margin: 5ex auto;
	Padding: 5ex;
	Line-height: 1.6em;
	Text-align: left;
	Box-shadow: 0.5ex 0.5ex 0.5ex saddlebrown;
}

h1 {
	Font-size: 3em;
	Font-family: serif;
	Font-weight: normal;
	Text-decoration: double underline;
	Margin: 1.6em auto;
	Margin-top: 0.8em;
	Line-height: 0.8em;
}

header, h1, h2, h3 { Text-align: center; Clear: both; }
/* p { Text-indent: 5ex; } */
        
a { Color: blue; }
a:visited { Color: purple; }
a:hover, a:active { Color: cyan; }

li a { Font-weight: bold; }

blockquote {
	Background-color: ghostwhite;
	Padding: 1ex;
}

On the other hand it has a name: it's called Diary, and as you can see it's best used for listings.

That's it for now. Enjoy!

— , 7 July 2021