This style was made by me, Anastasia, for me, Anastasia. Anyone is absolutely free to link to this style if they so wish, but I would perhaps stronly urge against it. First of all, I am a fool. I live within a realm of jest in which I pretend to know what I am doing. I do not. I have the artistic talent of a rock that has spent all too long tumbling in a stream only to be left featureless and smooth. As you can see, I think a centered page with margins (which I may add serve no purpose whatsoever) is peak design. Secondly, I make no promises that this will remain constant. If you are okay with the style of your page changing over time (SOMETIMES IN WAYS THAT MAY WELL BREAK THE SYMANTIC LAYOUT TOO!) then linking is fine. I may even improve the style over time (I jest yet again). But, if you want it to just work and continue working then I recommend hosting a copy of any styles somewhere else.
At the highest level, each page should be made up of two kinds of
tags. The <header> tag should be used for the
title and any navigation elements. This can be followed by any
number of <section> tags which contain the page
content (such as this). Every page should contain at least one
<section> tag, both because a page without any
content has no reason to exist and because the styling depends a
bit on that being that case.
While spacing should not usually be manually added or considered, it
may be useful to note that the very first element (which should
generally be a <header> but may be anything) will
recieve extra padding on the top, and the very last
<section> will both recieve extra padding on the
bottom and be stretched to fill the full page height if the content
itself does not take up the full view height.
Many pages have some kind of title. Generally this should be placed
within a <header> and be a h1#title
tag. After the title I am partial to placing a horizontal divider
(<hr/>) to get into the page content. If your
page needs navigation there are two standard options. Naturally a
<nav> tag should come first. Then two kinds of
navigation are available.
These can be formed using the appropriate list tags with links placed within them.
Moving into the section (or sections) of the page, these are for
general page content. If the page content is largely text (such as
this) or otherwise split into neat sections (often the case) then
you can use <h2> tags for each subheader. Text
should then be formed into paragraphs, each paragraph containing a
single idea (yada yada). Within your HTML itself, long lines of
text within a paragraph should still fit within 80 characters (this
includes indentation for other elements). You can add arbitrary
line breaks without changing the way that the text is rendered. In
any cases where this is not possible, for example an inline link
which takes up more than the available space, put that element all
on one line by itself within the markup.
I absolutely love CSS variables, perhaps a little too much. But they can be used to change elements about the page style without causing too much of a mess. Any you can change them programmatically!
Up first we have the colors. These are not used directly, per se, but do show up within the definitions of other variables so that some colors can be consistent across uses. They consist of
Then there are a number of sementic colors. These do not refer to any specific color, but use the defined color to define how parts of the page should be colored. They consist of
Font variables are a bit limited in scope but may also be used to change the appearence of the page. Currently the offerings are
There will probably be a new variable for code and other monospace (or visual text, like emoticons) coming soon.
And last but not least are the spacing variables. These are
The most important of these is arguably spacing which
controls the general density of the page as a whole. It shows up
everywhere, and while I recognize that more fine tuned spacing
could be useful, I personally like it when things like padding and
margins between elements are somewhat consistent.
These are miscellaneous items that may be used to provide somewhat consistent components across pages.
The strike class can be added to mark text as removed for some reason that retains value in still being a part of the document. Keep in mind that by default this will still be picked up by screen readers and text-based views of the page, so do not necessarily depend on it to convery meaning. For links it is better to use the inactive class. Partially because it also changes the color, but also so that the symantic meaning of the page is perserved.
Breakout boxes can be used to create seperate (though hopefully
related) content in context to a page or surrounding text. The
recommended structure is to use a div.breakout tag,
then within that place a <h3> tag for the
title and finally paragraphs for text. The title can be omitted
if not required within a given context.