HTML.digital Documentation

View on GitHub › Download

Layout

Simple semantic HTML:

<html> <head>[...]</head> <body> <header> <nav></nav> </header> <main> <section></section> </main> <footer></footer> </body> </html>

Typography

Header 1

<h1>Header</h1>

Header 2

<h2>Header</h2>

Header 3

<h3>Header</h3>

Header 4

<h4>Header</h4>
Header 5
<h5>Header</h5>
Header 6
<h6>Header</h6>

Horizontal line
<hr>

Regular body text

<p>Regular body text</p>

Small text
<small>Small text</small>

Superscript Text
<sup>Superscript text</sup>

Marked Text
<mark>Marked text</mark>

Italic text, emphasized text
<i>Italic text</i>, <em>emphasized text</em>

Bold text, strong text
<b>Bold text</b>, <strong>strong text</strong>

<ul><li>Unordered list</li></ul>

  1. Ordered list
<ul><li>Ordered list</li></ul>

Code and Quotes

Inline Code

<code>Inline code</code>

Codeblocks

<samp>Code block</samp>

blockquote

"this is an awesome quoteblock"

Forms

Inputs

Text

<input type="text" placeholder="Type some text">

Date

<input type="date" min="2000-01-01" max="2030-12-31">

Colour

<input type="color" value="#dd0a35">

Select

<select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

Checkbox




<input type="checkbox" id="checkbox1"> <input type="checkbox" id="checkbox2" checked> <input type="checkbox" id="checkbox3" disabled>

Radio




<input type="radio" name="radio" id="radio1"> <input type="radio" name="radio" id="radio2" checked> <input type="radio" name="radio" id="radio3" disabled>

button

<input type="submit" value="Click me">

Textarea

<textarea cols="30" rows="10" placeholder="Type some text"></textarea>

Output

65





Output = 105
<form id="calc" oninput="calculation.value = parseInt(number_one.value)+parseInt(number_two.value)+parseInt(number_three.value); number_one_output.value = parseInt(number_one.value); number_one_output.style.left = parseInt(number_one.value)-2 + '%';"> <output name="number_one_output" id="number_one_output" for="number_one" form="calc">65</output> <input type="range" name="number_one" id="number_one" value="65"> <input type="number" name="number_two" id="number_two" value="30"> <select name="number_three" id="number_three"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> Output = <output name="calculation" id="calculation" for="number_one number_two number_three" form="calc">105</output> </form>

Progress

<progress max="100" value="65""</progress"

Meter

7.5 out of 10 <meter min="0" low="5" optimum="0" high="8" max="10" value="7.5" title="GB""7.5 out of 10</meter"

Tables

HTML.digital Bootstrap Skeleton CSS Foundation
Responsive Design ✓ ✓ ✓ ✓
Progressive Enhancement ✓ ✕ ✕ ✕
No Learning Curve ✓ ✕ ✕ ✕
Native Darkmode ✓ ✕ ✕ ✕
Easy Expandability ✓ ✓ ✓ ✓
Easy Prototyping ✓ ✕ ✕ ✕
<table> <thead> <tr> <th></th> <th>HTML.digital</th> <th>Bootstrap</th> <th>Skeleton CSS</th> <th>Foundation</th> </tr> </thead> <tbody> <tr> <td>Responsive Design</td> <td>✓</td> <td>✓</td> [...]

Aside

section > aside

<section> <aside> <img src="path/to/my.svg" height="150px;"> <h3>Test card</h3> <p>This is a mega awesome test card</p> <button>Click me!</button> </aside> </section>

article > aside

<article> <aside> <p>This is a mega awesome test card. <a href="#0">Click me!</a></p> </aside> <article>

Navigation

<nav> <a href="/"> <img src="path/to/logo.svg"> html.digital </a> <ul> <li> <a href="/docs/">Documentation</a> </li> <li> <a href="https://github.com/triss90/html.digital" target="_blank">GitHub</a> </li> </ul> </nav>

Images

All images now has a max width of 100%

<img src="path/to/image.svg" alt="My alternate image text">

Colour Scheme

Variables

You can edit the colour variables in the css file to add your own flair

/* Base color scheme */ :root { --color-primary: #dd0a35; --color-accent: #118bee0b; --color-bg: #fff; --color-bg-secondary: #e9e9e9; --color-secondary: #1687a7; --color-secondary-accent: #920de90b; --color-shadow: #f4f4f4; --color-text: #334252; --color-text-secondary: #999; }

Darkmode

Should you wish to enable or alter the darkmode styles, you simply need to uncomment and change the following variables in the css

/* darkmode */ @media (prefers-color-scheme: dark) { :root { --color-primary: #dd0a35; --color-accent: #118bee0b; --color-bg: #121212; --color-bg-secondary: #000; --color-secondary: #20d0ff; --color-secondary-accent: #920de90b; --color-shadow: #000; --color-text: #f4f4f4; --color-text-secondary: #999; } }