Style Guide

See how elements are styled with mine.css.

Headings

h1 Heading with code and small text

h2 Heading with code and small text

h3 Heading with code and small text

h4 Heading with code and small text

h5 Heading with code and small text

h6 Heading with code and small text

# h1 Heading `with code` <small>and small text</small>
## h2 Heading `with code` <small>and small text</small>
### h3 Heading `with code` <small>and small text</small>
#### h4 Heading `with code` <small>and small text</small>
##### h5 Heading `with code` <small>and small text</small>
###### h6 Heading `with code` <small>and small text</small>

Paragraphs

At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab’s front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.

“There it is again—under the hatches—don’t you hear it—a cough—it sounded like a cough.”

At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab's front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.

"There it is again—under the hatches—don't you hear it—a cough—it sounded like a cough."

Links

link text

[link text](http://dev.nodeca.com)

link with title

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

link with footnote style syntax

[link with footnote style syntax][footnote style]

[footnote style]: https://en.wikipedia.org/wiki/Note_(typography)

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or keep all the numbers as 1.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Offset

57. foo
58. bar

57. foo
1. bar

Blockquotes

This is a paragraph preceding a blockquote.

<blockquote> can also be nested…

…by using additional greater-than ('>') signs right next to each other…

…or with spaces between arrows.

This is a paragraph following a blockquote.

This is a paragraph preceding a blockquote.

> `<blockquote>` can also be nested...
>> ...by using additional greater-than (`'>'`) signs right next to each other...
> > > ...or with spaces between arrows.

This is a paragraph following a blockquote.

Emphasis

• This is bold text
• This is also bold text
• This is italic text
• This is also italic text
• This is deleted text

- **This is bold text**
- __This is also bold text__
- *This is italic text*
- _This is also italic text_
- ~~This is deleted text~~

Code

Inline code

Indented code

line 3 of code
line 4 of code
line 5 of code

line 7 of code

Fenced code blocks

// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

`Inline code`

    Indented code

    line 3 of code
    line 4 of code
    line 5 of code

    line 7 of code

```
Fenced code blocks
```

```js
// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

Code blocks without any highlight.js theme:

// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5)); console.log(foo(5)); console.log(foo(5)); console.log(foo(5));

User Input

ctrlaltdelete

⌘⌥⇧

qwerty

azerty

<kbd>ctrl</kbd><kbd>alt</kbd><kbd>delete</kbd>

<kbd title="Command">⌘</kbd><kbd title="Option">⌥</kbd><kbd title="Shift">⇧</kbd>

<kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

<kbd>a</kbd><kbd>z</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Horizontal Rules

___

---

***

Images

![Finn and Jake](http://38.media.tumblr.com/tumblr_mdo6z0KBpf1rwy00jo1_400.gif "One style is all that is needed.")

![Captain Story-Martense House](https://upload.wikimedia.org/wikipedia/commons/6/66/1996.164.1-65_IMLS_SL2.jpg "Captain Story-Martense House, Front Door, Church Avenue and East 38th Street, Flatbush, Brooklyn, ca. 1899-1909.")

Like links, images also have a footnote style syntax.

The reference defining the URL location can be later in the document.

Like links, images also have a footnote style syntax.

![Alt text][id]

The reference defining the URL location can be later in the document.

[id]: https://upload.wikimedia.org/wikipedia/commons/1/1f/Ries.PNG  "1550 Woodcut of 58-year-old Adam Ries, inscription: ANNO 1550 ADAM RIES SEINS ALTERS IM LVIII"

Figures

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Helsinki_z00.jpg/1920px-Helsinki_z00.jpg"
    alt="Helsinki">
  <figcaption>
    Panoramic view of
    <a
      href="//commons.wikimedia.org/wiki/Helsinki"
      title="Helsinki">Helsinki</a>,
    Finland from the Ateljee bar of
    <a
      href="https://en.wikipedia.org/wiki/Hotel_Torni"
      title="en:Hotel Torni">Hotel Torni</a>.
  </figcaption>
</figure>

<figure class="borderless">
  <picture>
    <source srcset="/img/fork-dark.png" media="(prefers-color-scheme: dark)">
    <img src="/img/fork-light.png" alt="Screenshot of Fork.app">
  </picture>
  <figcaption>
    Light and dark mode images with the
    <code>&lt;picture&gt;</code>
    tag.
  </figcaption>
</figure>

Extras

The following markup falls outside the CommonMark specification and may require plugins or special options for your markdown parser of choice. We’re using markdown-it and related plugins to show how the following elements look when using style.css.

Abbreviations

via markdown-it-abbr

This is a HTML abbreviation example.

It converts “HTML” but keeps partial entries like “xxxHTMLyyy” intact.

This is a HTML abbreviation example.

It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.

*[HTML]: Hyper Text Markup Language

Definitions

via markdown-it-deflist

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Footnotes

via markdown-it-footnote

Footnote 1 link^[1].

Footnote 2 link^[2].

Inline footnote^[3] definition.

Duplicated footnote reference^[2:1].

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Special Emphasis

• Superscript: 19^th (via markdown-it-sup)
• Subscript: H₂O (via markdown-it-sub)
• Inserted text (via markdown-it-ins)
• Marked text (via markdown-it-mark)

- Superscript: 19^th^ (via [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup))
- Subscript: H~2~O (via [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub))
- ++Inserted text++ (via [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins))
- ==Marked text== (via [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))

Input Types

Mine.css offers improved default styling of built in HTML form inputs with dark mode override support.

• <input> element
• HTML5 input types

Button

Button Element

<input type="button" value="Button">
<input type="button" value="Button">
<input type="button" value="Button">
<button>Hey Hi</button>
<input disabled type="button" value="Disabled Button">

Checkbox

<div>
  <input type="checkbox" name="scales" id="scales" checked>
  <label for="scales">Scales</label>
</div>

<div>
  <input type="checkbox" name="horns" id="horns">
  <label for="horns">Horns</label>
</div>

<div>
  <input disabled type="checkbox" name="teeth" id="teeth">
  <label for="teeth">Teeth (Disabled)</label>
</div>

Color

<div>
  <input type="color" name="head" id="color-head" value="#e66465">
  <label for="color-head">Head</label>
</div>

<div>
  <input type="color" name="body" id="color-body" value="#f6b73c">
  <label for="color-body">Body</label>
</div>
<div>
  <input disabled type="color" name="foot" id="color-foot" value="#0083f5">
  <label for="color-foot">Footer (Disabled)</label>
</div>

Date

Date: Date (Placeholder): Date (Disabled):

<label class="block" for="trip-start">Date:</label>
<input type="date" name="trip-start" id="trip-start" value="2020-08-15">
<label class="block" for="placeholder-date">Date (Placeholder):</label>
<input
  type="date"
  name="placeholder-date"
  id="placeholder-date"
  placeholder="2020-08-25">
<label class="block" for="trip-end">Date (Disabled):</label>
<input disabled type="date" name="trip-end" id="trip-end" value="2020-08-25">

Datetime Local

Datetime Local: Datetime (Placeholder): Datetime (Disabled):

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2020-08-15">

Email

Email: Email (Disabled):

<label for="email">Email:</label>
<input type="email" name="email" id="email">

File

Avatar: Avatar (Disabled):

<input type="file" id="avatar" name="avatar" id="avatar" accept="image/png, image/jpeg">

Image

<input class="dark-icon" type="image" id="image" alt="Login" src="/light-dark.svg">

Month

Month: Month (Disabled):

<label for="start">Month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2020-08">

Number

Number (10-100): Number (disabled):

<label class="block" for="number">Number (10-100):</label>
<input type="number" name="number" id="number" min="10" max="100" placeholder="12">

Password

Password: Password (Disabled):

<label class="block" for="pass">Password:</label>
<input
  placeholder="••••••••"
  type="password"
  name="pass"
  id="pass"
  minlength="8">

Radio

<div>
  <input type="radio" name="drone" value="huey" id="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" name="drone" value="dewey" id="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input disabled type="radio" name="drone" value="louie" id="louie">
  <label for="louie">Louie</label>
</div>

Range

<div>
  <input type="range" name="volume" id="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input
    disabled
    type="range"
    name="cowbell"
    id="cowbell"
    min="0"
    max="100"
    value="90"
    step="10">
  <label for="cowbell">Cowbell (Disabled)</label>
</div>

Reset

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" name="id" id="id" />
    <input type="reset" value="Reset">
    <input disabled type="reset" value="Reset (Disabled)">
  </div>
</form>

Search

<input placeholder="Search..." type="search" name="search">

Submit

<input type="submit" value="Submit">

Tel

Tel: Format: 123-456-7890 Tel (Disabled):

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<small>Format: 123-456-7890</small>

Text

Name (4 to 8 characters): Name (Disabled):

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

Text Area

Tell us your story: It was a dark and stormy night... Don't tell us your story: It wasn't a dark and stormy night...

<label style="display: block;">
  Tell us your story:
  <textarea style="display: block;" id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
  </textarea>
</label>
<label style="display: block;">
  Don't tell us your story:
  <textarea
    style="display: block;"
    disabled
    id="story-disabled"
    name="story-disabled"
    rows="5"
    cols="33">
It wasn't a dark and stormy night...
  </textarea>
</label>

Time

Choose a time for your meeting: Office hours are 9am to 6pm Time (Disabled):

<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>

URL

Enter an https:// URL: Enter an https:// URL (Disabled):

<label for="url">Enter an https:// URL:</label>
<input
  type="url"
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="https://.*"
  size="30"
  required>

Week

Week: Week (Placeholder): Week (Disabled):

<label class="block" for="week-example">Week:</label>
<input
  class="block"
  placeholder="2018-W18"
  value="2017-W01"
  type="week"
  name="week-example"
  id="week-example"
  min="2018-W18"
  max="2018-W26"
  required>

Fieldset

<form style="display: inline-block;">
  <fieldset>
    <legend>Log into your account:</legend>
    <div>
      <label class="block" for="username">Email:</label>
      <input type="email" name="username" id="username">
    </div>
    <div>
      <label class="block" for="password-fieldset">Password:</label>
      <input type="password" name="password" id="password-fieldset">
    </div>
    <input style="width:100%" type="submit" value="Login">
  </fieldset>
</form>