Skip to content

Latest commit

 

History

History
459 lines (323 loc) · 11.1 KB

style-guide.markdown

File metadata and controls

459 lines (323 loc) · 11.1 KB
Raw
title date position layout icon
Style
2020-03-29 17:54:00 -0400
6
page
fa-paint-brush

{:toc}

Inspired by: Minimal Mistakes

Headings

Header 1 is used for the site, page, and post titles. It’s styled smaller when used on link posts. Headers 2–6 are used within pages and posts.

Header 1

{:.no_toc}

Header 2

{:.no_toc}

Header 3

{:.no_toc}

Header 4

{:.no_toc}

Header 5

{:.no_toc}

Header 6

{:.no_toc}

Typography

Paragraph

This is a simple paragraph that is designed to demonstrate the usage of the <p> HTML tag. It contains text that will be displayed as a paragraph on a webpage. This tag is one of the most frequently used tags in HTML, and it's crucial for structuring text content on the web.

Strong

If everything is bold, nothing is bold.

Emphasis

Important text can be emphasized.

Small

Text that’s (less) important can be small.

Strikethrough

Text that’s no longer relevant can struck.

Cite

Referenced works can be cited: Wikipedia.

Quote

Be yourself; everyone else is already taken. — Oscar Wilde

Blockquote

All of a sudden – wham! – I got an image of myself sitting at a big CRT (cathode ray tube) screen with all kinds of symbols on it, new and different ones, manipulated by a computer that could be operated through various input devices. All the material on the screen could be controlled with great flexibility. Other people had their display units tied to the same computer complex, and you could connect them. Everybody could share knowledge. The vision unfolded rapidly, in about a half hour, and suddenly the potential of interactive, collaborative computing became totally clear. Douglas Englebart

Definition

A validator is a program that checks for syntax errors in code or documents

Abbreviations

The WHO was founded in 1948.

Time

I have a date on Valentine's Day.

Code

Inline code for HelloWorld.swift.

Syntax-highlighted code using the Dracula theme:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

Preformatted

i carry your heart with me(i carry it in
my heart)i am never without it(anywhere
i go you go,my dear;and whatever is done
by only me is your doing,my darling)
                                                      i fear
no fate(for you are my fate,my sweet)i want
no world(for beautiful you are my world,my true)
and it’s you are whatever a moon has always meant
and whatever a sun will always sing is you

Variables

The area of a triangle is: ½ ✕ b ✕ h, where b is the base, and h is the vertical height.

Sample Output

Message from my computer:

File not found.
Press F1 to continue

Keyboard

To save a document, press ⌘ S.
The hyperkey (caps lock) acts as ^⌥⌘⇧.

Subscript

Getting our science styling on with H2O, which should push the “2” down.

Superscript

Still sticking with science and Albert Einstein’s E = MC2, which should lift the 2 up.

Line Break

This is a sentence.
After a break, another one.

Word Break

Fernstraßenbauprivatfinanzierungsgesetz

Bidirectional Text Override

This text will go right-to-left.

Bidirectional Isolate

  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

Data

  • Cherry Tomato
  • Beef Tomato
  • Snack Tomato

Ruby

漢 (ㄏㄢˋ)

Links and Areas

Anchor

This is a link to the homepage.

Nav

HTML | CSS | JavaScript | Python

Map & Area

Workplace

Lists

Unordered Lists

  • Feather Ruffling
    • Who could rustle the most
      • Larry the Lion
      • Benny the Bear
  • Pin the tail on the Donkey
    • Winners:
      • Gertrude the Giraffe
      • Benny the Bear
  • Dance off
    • Hip pop and Lock
      • Larry the Lion
    • Waltz
      • Gertrude the Giraffe
    • Breakdance
      • Benny the Bear

Ordered Lists

  1. Invitations
    1. Mailed to:
      1. Larry the Lion
      2. Gertrude the Giraffe
      3. Benny the Bear
  2. Menu
    1. Starters
      1. Beetle Bruschetta
      2. Caterpillar Canapes
    2. Main Course
      1. Gazelle Goulash
    3. Dessert
      1. Honeycomb Heartache
  3. Music
    1. Live Performance
      1. The Cooing Crows

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly explain this one.

Media

Image

mb

This is an inline image.

// TODO: Centered image

Figure

A photo of books

Picture

MSCH Image

Audio

Everyday Robots #63: Build and Watch

Video

Canvas

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>

SVG

Iframe

<iframe loading="lazy" title="Barely Managing" src='https://player.vimeo.com/video/153709318?title=0&byline=0&portrait=0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Tables

Table

Council budget (in £) 2018
Items Expenditure
Donuts 3,000
Stationery 18,000
Totals 21,000

Forms

First name: <textarea name="message" rows="5" cols="30"> Enter your message here </textarea> Red Blue Green Mercedes BMW Ford Tesla Personal information: First name:
Last name:

70 %

2 out of 10

Submit

Buttons

A true button:
You Look Nice Today!

A link button:
Go somewhere nice…

Dialog

Use location services?

In order to give directional instructions, we kindly ask you to turn on the location services.

Close Confirm

Special

Div

This is a `div`

Spans

Name

My full-name is mb bischoff.

My initials (mb) are mb.

Header

This is a header.

Footer

This is a footer.

Article

This is an article.

Section

This is a section.

Details

This is a summary element. With lots and lots of details inside a disclosure triangle.

Unstyled

  • dialog