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=html5shiv.min.js></script> 
		<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.

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

Embedded grid

Child grid column
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
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

Left
Middle
Full width
Top
Center Bottom
Right
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
1/5
<div dir='rtl'>
	...
</div>

Options

  • Column class not mandatory. Minimum width 20%.

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.

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

Lightbox

Standard

						
<div class='lightbox'>
	<a href=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756.jpg title='First Taipei photo'>
		<img src=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756-88x88.jpg alt=1>
	</a>
	...
</div>

Full screen

						
<div class='lightbox full-screen'>
	<a href=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756.jpg title='First Taipei photo'>
		<img src=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756-88x88.jpg alt=1>
	</a>
	...
</div>

Vertical with thumbnails

						
<div class='lightbox vertical thumbnails'>
	<a href=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756.jpg title='First Taipei photo'>
		<img src=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756-88x88.jpg alt=1>
	</a>
	...
</div>

Inline

						
<div class='lightbox inline thumbnails'>
	<a href=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756.jpg title='First Taipei photo'>
		<img src=//ds4jxjfidrdz4.cloudfront.net/wp-content/uploads/2016/08/DSC00756-88x88.jpg alt=1>
	</a>
	...
</div>

Options

  • Open automatically by URI: https://site.com?image=DSC00193.jpg#lightboxid or https://site.com?slide=3#lightboxid
  • Captions from link title
  • An inline lightbox inside an .aspect container will avoid page jump during initialisation
  • Inline lightbox with thumbnails can have the thumbnails outside with .outside
  • Lightbox with id provides links to individual slides

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

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 open'>
	<h3 class=label> Label </h3>
	<input type=checkbox class=trigger>
	<div class='content'>
		<p> Content. </p>
	</div>
</div>

Truncated content

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Nested Accordions

About Inner 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About Inner Accordion 2

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tooltip

This text has a tooltip. Here is the tooltip
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span class='tool'>
	Tool content.
	<span class='tip'>Tip content.</span>
</span>				

Modal Window

Open a modal window inside this tab.

<a href='external.html#content' class='modal'>Open a modal window here.</a>

Show external domain content in a modal window. (On PHP enabled host).

<a href='http://natuive.net/external.html#content' class='modal'>Open a modal window with external content.</a>

Options

  • Open a modal window with any content using openFullWindow('Any content');

Buttons

Normal button

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

Big button

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

Buttons in paragraph

Here is an Inline button inside a paragraph.

Options

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

Lists

Ordered

  1. First item
    1. First item sub item 1
    2. First item sub item 2
  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>

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.

Tabs

Tabs at the bottom

Tab 1

Content of Tab 1

Tab 2

The content of Tab 2

New line

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

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

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='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

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='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

Please choose:
Check this
<form class='mast'>
	...
</form>

Wide

A very long piece of label text which wraps to another line
Check this
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.

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

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>

or

notify('Message');

Options

  • Fixed on top:
    <div class='notify fixed'>
    or
    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