There are many style guides but this is mine
Big thanks to Zach Leatherman for the inspiration.....and 11ty. This style guide is a direct knock off of his, because he's smart and his style guide is great.
Colors
Typography
Headers And Text
Top level header
This is some nice random paragraph text to test out how some actual writing, hopefully by a thoughtful crafter of prose, would write here. Brevity is best, if you've got the time.
Second Level Header
This is some nice random paragraph text to test out how some actual writing, hopefully by a thoughtful crafter of prose, would write here. Brevity is best, if you've got the time.
Third Level Header
This is some nice random paragraph text to test out how some actual writing, hopefully by a thoughtful crafter of prose, would write here. Brevity is best, if you've got the time.
Fourth Level Header
This is some nice random paragraph text to test out how some actual writing, hopefully by a thoughtful crafter of prose, would write here. Brevity is best, if you've got the time.
Fifth Level Header
This is some nice random paragraph text to test out how some actual writing, hopefully by a thoughtful crafter of prose, would write here. Brevity is best, if you've got the time.
Primary Title
This is a Primary Title
Links
Use text-decoration-skip-ink, no fallback:
blockquotes
Normal paragraph text
A looper, you know, a caddy, a looper, a jock. So, I tell them I’m a pro jock, and who do you think they give me? The Dalai Lama, himself. Twelfth son of the Lama. The flowing robes, the grace, bald… striking. So, I’m on the first tee with him. I give him the driver. He hauls off and whacks one – big hitter, the Lama – long, into a ten-thousand foot crevasse, right at the base of this glacier. Do you know what the Lama says? Gunga galunga… gunga, gunga lagunga. So we finish the eighteenth and he’s gonna stiff me. And I say, “Hey, Lama, hey, how about a little something, you know, for the effort, you know.” And he says, “Oh, uh, there won’t be any money, but when you die, on your deathbed, you will receive total consciousness.” So I got that goin’ for me, which is nice.
Normal paragraph text
Text highlighted header
Works with all levels of headers. Set any background-color and color on the element.
Top level header that wraps and the background color wraps too. So cool....
Callout
Note
Give credit where credit is due. Mostly to someone elses ideas I've shamelessly borrowed but don't want people to think I brilliantly had them myself. Which in most cases is safely assumed I did not.
Demos
This is a live demo with the label at the top.
This is a live demo with the label at the bottom. It is the default.
In case you need a custom label, override with the 'data-demo-label' attribute.
Code and Code Like
Simple code element. Typically it's tucked in some other text.
Simple pre element.
Simple pre element.pre with lots of text to show that wrapping is great and jumps to the next line without a terrible scroll bar or any weird stuff.const note = {
id: 1,000,001,
title: 'Oh dang',
date: '01/01/1970',
}code in here for codingChanges to be committed:
(use "git rm --cached ..." to unstage)
new file: .gitmodules
new file: posts
Icons
Tags
I prefer to leave the color out of the css and set the color and hover states on the element. I may change this at some point