Style Guide
The style guide for chrisburnell.com.
Colours
-
Bowhead
#4f758ehsl(203.7, 28.5%, 43.2%) -
Raven
#5f8aa6hsl(203.7, 28.5%, 51.2%) -
Coyote
#7298b1hsl(203.7, 28.5%, 57.1%) -
Canada
#eb2d37hsl(356.8, 82.6%, 54.9%) -
Black
#060606hsl(0, 0%, 2.4%) -
Mineshaft
#2b2b2bhsl(0, 0%, 16.9%) -
Kaiser
#4f4f4fhsl(0, 0%, 31%) -
Dove
#737373hsl(0, 0%, 45.1%) -
Alto
#ddddddhsl(0, 0%, 86.7%) -
White
#f9f9f9hsl(0, 0%, 97.6%)
Measures
- Small
- Medium
- Large
- Gigantic
- One
- Responsive
Transitions
Fonts
Primary Font: "Proxima Nova", sans-serif;
Primary Font italic: "Proxima Nova", sans-serif;
Primary Font bold: "Proxima Nova", sans-serif;
Secondary Font: Georgia, serif;
Secondary Font italic: Georgia, sans-serif;
Monospace Font: "Menlo for Powerline", "Menlo", Consolas, Courier, monospace;
Title Font: "Heebo", sans-serif;
Headings
Heading Level 1/α
Heading Level 2/β
Heading Level 3/γ
Heading Level 4/δ
Heading Level 5/ε
Heading Level 6/ζ
Paragraph
A paragraph (from the Greek paragraphos, to write beside
or written beside
) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, to write beside
or written beside
) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Aside
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Inline Elements
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text has a strikethrough
Superscript for things like: 8th of August a2 + b2 = c2 E = mc2
Subscript for things like: H2O H2SO4 C24H26O7
This small text for fine print, etc.
Abbreviation: HTML
Keyboard input: Tab
This text is a short inline quotation
This text is a short inline quotation with
another short inline quotation
inside
This is a citation
The dfn element indicates a definition
The mark element indicates a highlight
This is what inline code looks like
This is sample output from a computer program
The variable element, such as x = y
Blockquote
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Blockquote with Citation
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Quote Source
Twitter Embedded Quote
assumptions do not a civil developer make
— Chris Burnell (@iamchrisburnell) April 22, 2015
Unordered List
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
- This is the last list item
Ordered List
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- This is the last list item
Ordered List Reversed
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
This is the last list item
- This is a nested list item
- This is another nested list item in an ordered list
Ordered List Reversed, Twice
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
This is the last list item
- This is a nested list item
- This is another nested list item in an ordered list
Definition List
- Definition List
- A number of connected items or names written or printed consecutively, typically one below the other.
- This is a term.
- This is the definition of that term, which both live in a
dl
. - And another term.
- And it gets a definition too, which is this line.
Table
Heading A | Heading B | Heading C | Heading D |
---|---|---|---|
Cell A-1 | Cell B-1 | Cell C-1 | Cell D-1 |
Cell A-2 | Cell B-2 | Cell C-2 | Cell D-2 |
Cell A-3 | Cell B-3 | Cell C-3 | Cell D-3 |
Foot A | Foot B | Foot C | Foot D |
Table with Alternating Rows
Heading A | Heading B | Heading C |
---|---|---|
Cell A-1 | Cell B-1 | Cell C-1 |
Cell A-2 | Cell B-2 | Cell C-2 |
Cell A-3 | Cell B-3 | Cell C-3 |
Cell A-4 | Cell B-4 | Cell C-4 |
Cell A-5 | Cell B-5 | Cell C-5 |
Foot A | Foot B | Foot C |
Table with Subheadings
Heading A | Heading B | Heading C | |
---|---|---|---|
Subheading i | Cell A-i | Cell B-i | Cell C-i |
Subheading ii | Cell A-ii | Cell B-ii | Cell C-ii |
Foot A | Foot B | Foot C |
Details & Summary
Preformatted Text
Code Block
Code Block with Language
Extended Code Block with Language
CodePen Embed
Check out this CodePen!
Can I Use Embed
Figure
Figure with Caption
Video
Buttons
Buttons List
Text Input
Sparklines
Horizontal Rules
Deck
-
🍺 Beer Review by ShinDigger Brewing Co. 📍 at Mother Kelly's Bottle Shop and Tap Roomhttps://untappd.com/b/shindigger-brewing-co-mango-unchained/2075986 beer0 5
-
Wednesday, 29 July 2020
✅ Went to #ViennaCallingnote
✍️ 📅 What a hell of a line-up. Super excited for this evening! -
/like/1595355967 Tuesday, 21 July 2020
❤️ Liked: Shit yourself: HeydonWorkshttps://heydonworks.com/article/shit-yourself/ like -
/like/1594974213 Friday, 17 July 2020
❤️ Liked: From Indieweb Monolith to Microserviceshttps://vincentp.me/articles/2020/07/16/16-20/ like
Shelf
-
Mango Unchained
ShinDigger Brewing Co.0 5 https://untappd.com/b/shindigger-brewing-co-mango-unchained/2075986 beer -
Heated Seats
0 5 🏅 Earned 3 badges. https://untappd.com/b/mikkeller-heated-seats/3179245 beer -
Action Bronson's 7000
Stillwater Artisanal0 5 🏅 Earned 1 badge. https://untappd.com/b/stillwater-artisanal-action-bronson-s-7000/2435683 beer
Shelf with Images
-
Flight of the Cosmic Hippo
0 5 https://song.link/album/s/5AjD7hY9hMWVC5ZWGerBv4 music -
STOP STARING AT THE SHADOWS
0 5 https://song.link/album/s/2yopGJJSiA6ZDpw9IsGXTA music -
UNLOCKED
0 5 https://song.link/album/s/5LsyqeWryTmxsmda4xkm5a music
Icons
HTML Attributes
Classes should be double-space delimited.
Vocabulary
I’m always been a proponent for establishing a useful dictionary of specific vocabulary as it pertains to a project. This helps to ensure that everyone can be understood by everyone else. It also reduces the awkwardness
for people who might not be familiar with particular nomenclature or naming conventions and could be shy to ask for clarification—rather it makes these definitions known right off the bat, and serves as a reference for the future.
- DRY
-
Don’t Repeat Yourself—
a principle of software development aimed at reducing repetition of all kinds.
(Wikipedia) - measure
- A unit of length, designated for specific values for one dimension of measurement, e.g.
margin
,padding
, etc. - size
- Also a unit of length, but denoted for specific values for two dimensions of measurement, e.g. avatars, icons, etc.
Technology
The CSS is compiled from SCSS using gulp.js and some PostCSS.
The front-end is compiled with Jekyll, source files hosted by GitHub, front-end hosted by DigitalOcean, and sits behind CloudFlare for caching, SSL, and as a CDN.