Website Style Guide
http://robertcsmith.me
Typography
HTML Headings Tags
HTML tags define default Heading styles.Inside an hgroup
Heading 1 - Long Boring Text and Stuff & B Tag Text
H2 With Subheading Class & Long Boring Text and Stuff Long Boring Text and Stuff
Inside an hgroup
Heading 2 - Long Boring Text and Stuff Long Boring Text and Stuff & B Tag Text
H3 With Subheading Class & Long Boring Text and Stuff Long Boring Text and Stuff
Inside an hgroup
Heading 3 - Long Boring Text and Stuff Long Boring Text and Stuff & B Tag Text
H4 With Subheading Class & Long Boring Text and Stuff Long Boring Text and Stuff Long Boring Text and Stuff Long Boring Text and Stuff
Heading 4 & B Tag Text
H5 With Subheading Class
Heading 5 & B Tag Text
H6 With Subheading Class
Heading 6 & B Tag Text
Other HTML Tags
HTML tags define default text styles.A <p> element denotes a 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.
This is a paragraph with a link inside of it. Links are anchor or
<a> elements. This is an external link
Download file type icon indicators appear automatically when the link ends in .doc .docx or .pdf :
- This month's shopping list
- A recent research paper I read on AI
- Refer to this receipt to verify the purchase
Links to email addresses and telephone numbers are auto decorated by css automatically, such as the email address Jon Doe and his telephone number +1 415-997-9947.
The element denotes
deleted text and the element
denotes inserted text in edited documents.
A strikethrough ( element)
is used to indicate content that has been superceeded, is no longer accurate or is no longer relevant.
Such as when referring to Twitter X.
The superscript® element.
The subscript for things like H2O.
The element is for fine print, legal copy, etc.
The element is for acronyms and abbreviations such as HTML
This text is a short inline quotation.
This is a citation.
The element indicates a definition.
The element indicates a highlight.
The variable element, such as x = y. It is used outside of code blocks
The 1 time element: is an inline
element with a datatime attribute which defines the precise date and time to which the txt refers. It is used in the title of blog posts
A
(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.It is distinguished visually using indentation and a serif typeface in italics. It contains one or more
elements and may or may not include a citation(which may or may not link to the source with) placed at the bottom.To emphasize or call out text within a blockquote like this you may wrap text with the
1elementWhen a blockquote contains a
Said no one, ever.element, the oopening and closing quotation marks are added automatically are styled nicely.
- Description Lists
- Description lists (
elements) are used to group terms/descriptions in a block-level list (such as this). They consist of one or more key/value pair entries consisting of a description term (element) and a description detail (element). - This Is A Description Term
- And I am the Description Detail which typically contains a paragraph with more information.
These are used when there is more information to convey than a typical inline definition
(
element).
This is an unordered list (1
element)
- Unstyled, unordered list item 1
- Unstyled, unordered list item 2
- Unstyled, unordered list item 3
- List Item 1
-
List Item 2
- List Item 1
-
List Item 2
- List Item 1
-
List Item 2
- List Item 1
-
List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 3
- List Item 3
- List Item 3
- List Item 3
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 3
- List Item 3
- List Item 3
- List Item 3
Expand for details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.
4481 25th Ave.
Sacramento, CA 95820
USA
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
The Keyboard input ( element)
has innerHTML text of what is physically displayed on the key itself such as: shift.
Combinations of keystrokes are indicated with a plus sign between them:
Ctrl + Alt + Del
The Sample Output (1) Element is used to denote
example text feedback on a computer resulting from a specified user action. The element is to be used inline
for example, when you successfully start this application on your local computer it should read
[Bootstrap] Application is running at http://[::1]:3000 which indicates it is successfully serving
pages on that address. If you want to to show larger output or feedback that would be more appropriate to use
the the 11 elements
to generate a code block.
Inline code: code
1;2;3;4;5;6;7;8;9;10 11;12;13;14 151617181920212223242526272829;30 313233343536373839404142;Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is wrapped in a strong tag. Suspendisse varius enim in eros. Here is a link in the paragraph. Elementum tristique. This is an external link to an "external link in the paragraph. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text is wrapped in an em tag for emphasis Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. This text is wrapped in a b tag Nunc ut sem vitae risus tristique posuere. This text here is wrapped in an i tag. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text here is wrapped in an u tag Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is wrapped in a strong tag. Suspendisse varius enim in eros. Here is a link in the paragraph. Elementum tristique. This is an external link to an "external link in the paragraph. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text is wrapped in an em tag for emphasis Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. This text is wrapped in a b tag Nunc ut sem vitae risus tristique posuere. This text here is wrapped in an i tag. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text here is wrapped in an u tag Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is wrapped in a strong tag. Suspendisse varius enim in eros. Here is a link in the paragraph. Elementum tristique. This is an external link to an "external link in the paragraph. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text is wrapped in an em tag for emphasis Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. This text is wrapped in a b tag Nunc ut sem vitae risus tristique posuere. This text here is wrapped in an i tag. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text here is wrapped in an u tag Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is wrapped in a strong tag. Suspendisse varius enim in eros. Here is a link in the paragraph. Elementum tristique. This is an external link to an "external link in the paragraph. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text is wrapped in an em tag for emphasis Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. This text is wrapped in a b tag Nunc ut sem vitae risus tristique posuere. This text here is wrapped in an i tag. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. This text here is wrapped in an u tag Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.Text Styles
Text style classes when typography style doesn't match the default HTML tag.Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.Colors
Color Palette
Text Color
Manage recurring text colors.Black and White
Gray
Green
Red
Yellow
Blue
Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.UI Elements
Buttons
Buttons With Icons Only
Form Elements
Icons (Image)
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-xxlarge
icon-width-xxsmall
icon-width-xsmall
icon-width-small
icon-width-medium
icon-width-large
icon-width-xlarge
icon-width-xxlarge
icon-xxsmall
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-xxlarge
icon-width-xxsmall
icon-width-xsmall
icon-width-small
icon-width-medium
icon-width-large
icon-width-xlarge
icon-width-xxlarge
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-xxlarge
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.icon-embed xxsmall
icon-embed xsmall
icon-embed small
icon-embed regular
icon-embed medium
icon-embed large
icon-embed xlarge
icon-embed xxlarge
Structure Classes
Core
Defined and flexible core structure we can use on all or most pages.Max Widths
Paddings
Direction Classes
Size Classes
Margins
Direction Classes
Size Classes
Utility Classes
Etcetera
Useful utility classes we like to use in most of our projects to build faster.This is a link. Notice that on hover, the cursor will remain the same and the link cannot be clicked.
This is another link It is inside a div.pointer-events-on inside a div.pointer-events-off and therefore the cursor should change on hover and the link should refresh the page when clicked