Sample H1 Heading

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the tinman.css Starter Page.

View the demo page

Sample H2 Heading

This index.php page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the tinman.css Starter Page.

Sample H3 Heading

Headings step down the golden ratio type scale, h1 to h6, and their line heights follow the same rule.

Sample H4 Heading

This index.php page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the tinman.css Starter Page.

Sample H5 Heading

Body text is 1rem with a line height of 1.618.

Sample H6 Heading

The smallest heading is still larger than body text on desktop.

Buttons

Button Button Button

Button Button Button Button Button

Button Button Button Disabled

Tables

Heading	Heading	Heading	Heading
content	content	content	content
content	content	content	content
content	content	content	content
content	content	content	content

Lists

Just a simple list
Unordered List
- Unordered Item #1
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolorum quidem eaque soluta asperiores, assumenda sunt, in, dolores magni cumque minima officiis maxime velit ipsam, earum! Consequuntur ipsum voluptatum debitis?

Just a simple list
Ordered List
1. Ordered Item
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione porro facilis mollitia, itaque obcaecati hic eos nemo suscipit fuga nulla. Ducimus rerum perspiciatis ipsam ipsum possimus, vitae mollitia molestias perferendis.

Block Quotes

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. http://www.worldwildlife.org/who/index.html

Text and Code

Body text can be bold, italic or small, and inline code sits in a line of text.

.container {
	margin: 0 auto;
	width: 90%;
}

Definition list

Gutter: 0.7em either side of every column, so 1.4em between neighbours.
Row gap: 1.4em between lines of wrapped columns.

Figure

Images sit in the grid with u-img-responsive.

Notification Boxes

This is an example of a success notification

This is an example of an information notofocation

This is an example of a warning notification

This is an example of an error notifocation

Forms

Colours

Theme tokens

These change with light and dark. Use the toggle at the top and watch them flip.

--primary

--primary-hover

--accent

--accent-hover

--secondary

--secondary-hover

--tertiary

--tertiary-hover

--body

--background

Palette backgrounds

Fixed colours, the same in light and dark. The bg_* classes set a background, and the button-* classes in Buttons above use the same colours.

bg_white

bg_grey

bg_grey2

bg_greydark

bg_greydark2

bg_green

bg_blue

bg_violet

bg_orange

bg_red

bg_pink

bg_yellow

bg_greendark

bg_bluedark

bg_violetdark

bg_orangedark

bg_reddark

bg_yellowdark

bg_pinkdark

Palette text

The text classes. The three light ones are for use on dark backgrounds, so they sit on a dark strip here. The *dark colours are dark enough to read as text on white (4.5:1), and every text colour is a step darker when you hover a link that uses it.

.white

.grey

.grey2

.greydark

.greydark2

.green

.blue

.violet

.orange

.red

.pink

.yellow

.greendark

.bluedark

.violetdark

.orangedark

.reddark

.yellowdark

.pinkdark

Light and Dark

Every colour is a token with a light and a dark value, so the whole page follows the visitor's system setting. The button at the top of the page switches it by hand and remembers the choice. To force a theme, set data-theme="dark" or data-theme="light" on the <html> element.

Spacing

u-margin-1 to u-margin-6 add top and bottom margin in steps of 0.7rem, for example on a container that holds a section. Neighbouring margins collapse to the larger one.

u-margin-1 (0.7rem above and below)

u-margin-2 (1.4rem above and below)

u-margin-3 (2.1rem above and below)

u-margin-4 (2.8rem above and below)

u-margin-5 (3.5rem above and below)

u-margin-6 (4.2rem above and below)

Row gap

Wrapped columns are 1.4em apart by default, the same as the gap between neighbours. To change it for one row, set --row-gap on that row.

three columns

The same row with --row-gap: 0.7em.

three columns, 0.7em gap

Utilities

u-pull-left u-pull-right

u-text-center

u-text-right

u-center-block (a 50% wide box centred in its column)

Class	Effect
`u-full-width`	Width 100%, for inputs and buttons in a column.
`u-max-full-width`	Max width 100%.
`u-pull-left / u-pull-right`	Float content left or right inside a column. They do nothing on the column itself.
`u-cf`	Clears floats above the element.
`u-center-block`	Centres a block element with auto side margins.
`u-center-abs`	Centres an element in its positioned parent.
`u-text-center / u-text-right`	Aligns text.
`u-text-hide`	Hides text but keeps the element, for icon buttons.
`u-hide / u-show`	Hides or shows an element.
`u-invisible / u-visible`	Hides or shows an element but keeps its space.
`u-img-responsive`	Image fills its column and keeps its ratio.
`u-no-margin`	Margin 0.
`u-margin-1 to u-margin-6`	Top and bottom margin in steps of 0.7rem.

Error Pages

400.html 401.html 403.html 404.html 500.html 503.html