Page structure

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<meta name=viewport content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no'>
	<link rel=styleSheet href=natuive.min.css type=text/css media=screen>
	<!--[if lte IE 9]> 
		<link rel=styleSheet href=ie.css type=text/css media=screen>
		<script src=ie-fallback.js type=text/javascript></script>
	<![endif]-->
</head>
<body>
	<div class=header-and-banner>
		<header>
			Header
		</header>
		<div class='banner'>
			Banner
		</div>
	</div>
	<main>
		Main content
	</main>
	<footer>
		Footer
	</footer>
	<script src=natuive.min.js type=text/javascript async></script>
</body>
</html>

Options

```
.header-and-banner.viewport
```
– full-height centered header and banner area
- add
```
.push-up
```
  to balance at 1/3 height, instead of 1/2
Use
```
section
```
elements in
```
main
```
to clear inner margins at top/bottom
```
header.fixed
```
for fixed header on top on narrow screens (below 600px threshold)

Grid

1/5

.col5

4/5

.col45

1/4

.col4

3/4

.col34

1/3

.col3

2/3

.col23

2/5

.col25

3/5

.col35

1/2

.col2

1/2

.col2

1/1

.col5

<div class=row>
	<div>
		<div>...</div>
	</div>
	<div class=col3>
		<div>...</div>
	</div>
</div>

Grid alignment

Left Top

Center Top

Right Top

Left Middle

Left Bottom

Center Middle

Right Middle

Center Bottom

Right Bottom

ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected

<div class='row'>
	<div>
		<div>Left Top<p><br></p></div>
	</div>
	<div class='align-center'>
		<div>Center Top</div>
	</div>
	<div class='align-right'>
		<div>Right Top</div>
	</div>
	<div class='align-middle'>
		<div>Left Middle</div>
	</div>
	<div class='align-bottom'>
		<div>Left Bottom</div>
	</div>
	<div class='align-center align-middle'>
		<div>Center Middle</div>
	</div>
	<div class='align-right align-middle'>
		<div>Right Middle</div>
	</div>
	<div class='align-center align-bottom'>
		<div>Center Bottom</div>
	</div>
	<div class='align-right align-bottom'>
		<div>Right Bottom</div>
	</div>
	<div>ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected</div>
</div>

Grid without column padding

Only for CSS variables supporting browsers.

Bottom-aligned 1/2 wide column

Right-aligned 1/2 wide column.

Top part of a vertical row in a normal column.

Bottom part of a vertical row.

<div class='row no-padding'>
	<div>
		<div>...</div>
	</div>
</div>

Grid without column margin (gutter)

Only for CSS variables supporting browsers.

Bottom-aligned 1/2 wide column

Right-aligned 1/2 wide column.

Top part of a vertical row in a normal column.

Bottom part of a vertical row.

<div class='row no-margin'>
	<div>
		<div>...</div>
	</div>
</div>

Grid without spacing

Only for CSS variables supporting browsers.

<div class='row no-spacing'>
	<div>
		<div>...</div>
	</div>
</div>

Embedded grid

Child grid column

Parent grid column

<div class='row'>
	<div>
		<div class='row'>
			<div>Child grid column</div>
			<div>Child grid column</div>
		</div>							
	</div>
	<div class='col3'>
		<div>Parent grid column</div>
	</div>
</div>

Embedded grid without extra spacing

Child grid column

Parent grid column

<div class='row'>
	<div>
		<div class='row unpad'>
			<div>Child grid column</div>
			<div>Child grid column</div>
		</div>							
	</div>
	<div class='col3'>
		<div>Parent grid column</div>
	</div>
</div>

Grid with borders

Middle

Full width

Grid with all borders

Middle

Full width

Top

Center Bottom

Right

<div class='row border-all'>
	<div>...</div>
</div>

Right to left layout

Bottom-aligned 1/2 wide column

Right-aligned 1/2 wide column.

Top part of a vertical row in a normal column.

Bottom part of a vertical row.

1/5
centered

1/5

ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected

1/5

<div dir='rtl'>
	...
</div>

Options

Column class not mandatory. Minimum width 20%.
```
.row > .vertical-row
```
– a vertical row as tall as the parent row with equal-height full-width children.

Navigation

Standard navigation

<nav>
	<ul class='inline'>
		<li> <a href=#buttons>Buttons</a> </li>
	</ul>							
</nav>

Big navigation

<nav>
	<ul class='inline big-text'>
		<li class='active'> <a href=#grid>Grid</a> </li>
		<li> <a href=#slider>Slider</a> </li>
		<li> <a href=#form>Form</a> </li>
	</ul>
</nav>

Scroll navigation

<nav class=scroll>
	<ul>
		<li> <a href=#buttons>Buttons</a> </li>
	</ul>
</nav>

Drop navigation

<nav class=drop>
<form id='level1'> </form>
<form id='level2'> </form>
<input type='checkbox' class='trigger burger'>
<ul>
	<li> 
		<input type='radio' class='trigger' form='level1' name='level1'>
		<input type='reset' form='level1'>
		<a>First item</a>
		<b class='sub'></b>
		<ul>
			<li> 
				<input type='radio' class='trigger' form='level2' name='level2'>
				<input type='reset' form='level2'>
				<a>First item's second level item 1</a>
				<b class='sub'></b>
				<ul>
					<li> 
						<a href='asd'>First item's second level item 1 third level item 1</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</nav>

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Drop cap

Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.

<p class='drop-cap'>
	...
</p>

Quote

The sky above the port was the color of television, tuned to a dead channel.

<q>
	...
</q>

Links

Here is a link.

Paragraph

All elements except images are baseline-aligned with height divisible by the default line height.

Aspect ratio container

While the image is loading, the layout is already solid and the page doesn't jump after loading.

<picture class=aspect style='--ratio: 2.35;'>
	<img src=images/lido.jpg alt='Lido'>
</picture>

Video

Limited to container width.

					
<video poster=images/video.jpg controls=controls preload=none>
	<source type=video/mp4 src=//s3.amazonaws.com/gado/Outlying-Teaser.mp4>
	<a href=//s3.amazonaws.com/gado/Outlying-Teaser.mp4>Video link as fallback</a>
</video>

Tables

Standard

TheTableWillBeScrollableOnNarrowScreensBecauseOfWideCell	One Time	Second Long col	Three	Four
B	3	✔︎	✔︎	✔︎
Row Two with Long Headline to Test Table on Narrow Screens	1	✔︎	✔︎	✔︎
A	2	✔︎	✔︎	✔︎

<table>
	<thead>
		<tr>
			<td>Head</td>
			...
		</tr>
	</thead>
	<tr>
		<td>First</td>
		...
	</tr>
	...
</table>

Headless

First	Second	Third
✔︎	✔︎	✔︎
✔︎	✔︎	✔︎

<table>
	<tr>
		<td>First</td>
		...
	</tr>
	...
</table>

Sortable

First	Second	Third
Bee	3	7
Candy	1	6
Asteroid	4	9
Edgar	0	8
Due	2	5

<table>
	<thead>
		<tr>
			<td data-sort>Head</td>
			...
		</tr>
	</thead>
	<tr>
		<td>First</td>
		...
	</tr>
	...
</table>

Options

Topmost row column with attribute
```
data-sort
```
makes a sortable column by number/character.

Ascending by default, descending with
```
data-sort=desc
```

Fold (foldable content, accordion)

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class='fold'>
	<h3 class=label> Label </h3>
	<input type=checkbox class=trigger>
	<div class='content'>
		<p> Content. </p>
	</div>
</div>

Open by default

<div class='fold open'>
	<h3 class=label> Label </h3>
	<input type=checkbox class=trigger>
	<div class='content'>
		<p> Content. </p>
	</div>
</div>

Truncated content

<div class='fold'>
	<h3 class=label> Label </h3>
	<input type=checkbox class=trigger>
	<div class='content' style='--start-height: 6em;'>
		<p> Content. </p>
	</div>
</div>

Horizontal accordion

Nested Accordions

About Inner Accordion

About Inner Accordion 2

Options

Horizontal fold with
```
.fold.horizontal
```
, needs extra wrapper inside
```
.content
```
.

Buttons

Normal button

Small button

<a href=# class='button'>Small button</a>
<button disabled>Disabled button</button>

Big button

<a href=# class='button big'>Big button</a>

Buttons in paragraph

Here is an Inline button inside a paragraph.

Groups of buttons

Needed for proper spacing when wrapped

Features Showcase Guide Get it from GitHub

<div class='group'> ... </div>

Options

Both
```
<a href=# class='button'>
```
and
```
<button>
```
supported.

Lists

Ordered

First item
1. First item sub item 1
2. First item sub item 2
Second item

An in-house study at Walmart.com came out with the results that saw an up to 2% increase in conversions on the site for every single second of improvement on the load time. The accumulative growth of revenues went up to 1% for every 100 milliseconds of load time improvement.
1. Second item's sub item 1
2. Second item's sub item 2
  1. Sub sub item
  2. Another sub sub item

Unordered

Unordered one
Unordered two
- Nested one
- Nested two
Unordered three

Slider

Standard

One

Two

						
<div class='slider'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Controls on top

One

Two

Three

						
<div class='slider top'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Vertical

One

Two

Three

						
<div class='slider vertical'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Vertical with controls on the right

One

Two

						
<div class='slider vertical right'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Padded (controls outside of content)

One

Two

						
<div class='slider pad'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Fade in/out

One

Two

						
<div class='slider fade'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Auto height

One

Two

taller than One

						
<div class='slider auto-height pad'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Slider with detached nav

Slider here...

Slide 1

Slide 2

...detached nav here

Options

Full window:
```
<div class='slider full-window'>
```
Full screen:
```
<div class='slider full-screen'>
```
Slide duration
```
<div class='slider' data-duration=1>
```
in seconds. Default is .2.
Vertically center slides' content with
```
<div class='slider align-middle'>
```
Detach slider nav by adding an id to the slider and creating
```
<div class='slider-nav' data-for='slider-id'>
```
elsewhere
URI with hash matching a slide id in a slider, auto slides to it.

Tabs

Tabs at the bottom

Tab 1

Content of Tab 1

Tab 2

The content of Tab 2

New line

<div class='slider tabs'>
	<div> ... </div>
	<div data-tab_title='Tab 1'> ... </div>
	<div> <h2 class='tab-title'>Tab title and content</h2> ... </div>
	...
</div>

Tabs on top with auto height

Tab 1

Content of Tab 1

Tab 2

The content of Tab 2

New line

<div class='slider top tabs auto-height'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Vertical tabs

Tab 1 content

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tab 3 Very Long Title which Shows the Flexible Dimensions

<div class='slider vertical tabs'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Vertical tabs on the right

Tab 1 content

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tab 3 Very Long Title which Shows the Flexible tabs Dimensions

<div class='slider vertical tabs right'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Options

Tab titles are taken from
```
data-tab_title
```
,
```
.tab-title
```
on a child or index by default
```
data-duration=2
```
for 2 seconds slide duration

Forms

Default

Mast

Excepteur sint occaecat cupidatat non proident

Please choose: First option Second option Third option

Email Enter text here Website Range Select a file

Drop or browse

Country of residence Telephone

Check this I accept the Terms and Conditions.

Telephone

<form class='mast'>
	...
</form>

Wide

Excepteur sint occaecat cupidatat non proident Number input (5 digits)

A very long piece of label text which wraps to another line First option Second option has very long text which wraps to the next line Third option

Email Enter text here Website Range Select a file

Drop or browse

Country of residence Telephone

Check this I accept the Terms and Conditions.

Telephone

Open disabled fieldset below

Datalist examples

<form class='wide'>
	...
</form>

Elements

Text input

<label>
	<span>Label</span>
	<input type='text'>
</label>

Number input

<label>
	<span>Label</span>
	<input type='number' data-digits=5>
</label>

Checkbox

<div class='checkbox'>
	<span>Global label</span>
	<label> 
		<input type='checkbox'> <b class=checkbox-icon></b>
		Checkbox-specific label
	</label>
</div>

Radio buttons

<div class='checkbox'>
	<span>Label for all buttons</span>
	<label> 
		<input type='radio' name='radiodemo'> <b class=checkbox-icon></b>
		Label for this button
	</label>
	<label> 
		<input type='radio' name='radiodemo'> <b class=checkbox-icon></b>
		Label for this button
	</label>
	...
</div>

Textarea

<label>
	<span>Label</span>
	<textarea></textarea>
</label>

Range input

<label>
	<span>Label</span>
	<input type='range'>
</label>

File input

<label>
	<span>Label</span>
	<div class='file'>
		<input type='file'>
		<span>Placeholder</span>
	</div>
</label>

Select

<label class='select'>
	<span>Label</span>
	<select>
		<option value='First option'>First option</option>
		<option value='Second option'>Second option</option>
		...
	</select>
</label>

Optional sections

<div class='checkbox condition'>
	<span>Enable fieldset below</span>
	<label>
		<input type='checkbox'> <b class=checkbox-icon></b>
	</label>
</div>
<fieldset disabled>
	...
</fieldset>

Options

Validation enabled by
```
<label class='mandatory'>
```
Dynamic submit without page reload:
```
<form class='dynamic'>
```
. Requires PHP host.
Optional fieldsets are ignored by validation when disabled.
Set the placeholder colour with CSS variable --placeholder_color.
```
<form class='sticky-submit'>
```
to position the submit button absolutely on the right/center.
```
<textarea data-auto>
```
for automatically adjusted textarea height.

Masonry (vertical track only)

A very long cell which demonstrates how Masonry arranges cells in optimised space.

Cell

Cell Cell

<div class='masonry'>
	<div>Item</div>
	...
</div>

Cards

Standard

Card content.

Link.

<div class='card'>
	<div class='content'> Content </div>
</div>

Card with headline

Title

Card content.

Link.

<div class='card'>
	<div class='head'> Headline </div>
	<div class='content'> Content </div>
</div>

Card with image

Card content.

Link.

<div class='card'>
	<img src=image.jpg alt=Image>
	<div class='content'> Content </div>
</div>

Card with headline and image

Title

Card content.

Link.

<div class='card'>
	<div class='head image' style='background-image: url(image.jpg)'> Headline </div>
	<div class='content'> Content </div>
</div>

Fixed background

<div class='fixed-bg' style='background-image: url(image.jpg);'>
	<div class='fixed-bg-image'></div>
	...
</div>

takes up the full window and is visible only through the current section.

Language selector

<form action=. method=get class=language>
	<label class='select'>
		<select name='l'>
			<option value='en'>🇬🇧 English</option>
			<option value='fr'>🇫🇷 Français</option>
			<option value='cn'>🇨🇳 中文</option>
			<option value='bg'>🇧🇬 български</option>
			<option value='jp'>🇯🇵 日本</option>
		</select>
	</label>
	<noscript>
		<input type=submit value=▶>
	</noscript>
</form>

Parallax scrolling

Open demo page.

<html class='parallax'>
    <body>
        <div class='parallax-back'> ... </div>
        <div class='parallax-front'> ... </div>
    </body>
</html>

Scroll effects

Scroll to change this block's opacity.

<style>
	div[data-threshold] { 
		opacity: calc(1 - var(--threshold)); transition: all 0.1s linear; 
	}
</style>

Options

Adds CSS variable
```
--threshold
```
showing how much of the element height has been scrolled up outside of the viewport, 0.0 ~ 1.0
```
--height
```
is the element height, used for calculations
When all of it is above the viewport, the element gets a
```
.threshold
```
class

Notification bar

<body>
    <div class='notify'> Message </div>
    ...
</body>

notify('Message');

Options

Fixed on top:

<div class='notify fixed'>

notify('Message', 'fixed');

```
notify('Text', 'timeout')
```
to hide it automatically after 2 seconds

Copy to clipboard

Text to be copied to clipboard

copyButton(q('#copybutton'), q('#copycontent'));

'Back to top' button

<a class='backtotop' href="#">↑</a>

animate() function

animate(q('body'), 
	'0% { opacity: 1; transform: translateX(0); } 
	50% { opacity: 0; transform: translateX(-50vw); } 
	100% { opacity: 1;  transform: translateX(0); }', 
	2);

Options

Third parameter
```
duration
```
is optional, default value .2s
Callback function as a fourth parameter

guide

Page structure

Options

Grid

Grid alignment

Grid without column padding

Grid without column margin (gutter)

Grid without spacing

Embedded grid

Embedded grid without extra spacing

Grid with borders

Grid with borders

Grid with all borders

Right to left layout

Options

Navigation

Standard navigation

Big navigation

Scroll navigation

Drop navigation

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Drop cap

Quote

Links

Paragraph

Aspect ratio container

Lightbox

Standard

Full screen

Vertical with thumbnails

Inline

Inline lightbox with detached nav

Options

Video

Tables

Standard

Headless

Sortable

Options

Fold (foldable content, accordion)

Accordion

Open by default

Truncated content

Horizontal accordion

Nested Accordions

About Inner Accordion

About Inner Accordion 2

Options

Tooltip

Modal Window

Options

Buttons

Normal button

Big button

Buttons in paragraph

Groups of buttons

Options

Lists

Ordered

Second item

Unordered

Slider

Standard

Controls on top

Vertical

Vertical with controls on the right

Padded (controls outside of content)

Fade in/out

Auto height

Slider with detached nav

Slider here...

...detached nav here

Options

Tabs