^2.0

lightweight, feature-heavy web front-end

Lightweight, 9+9 K
Accessible
Feature-packed
Dozens of demo pages
Seamless loading
WordPress theme
No dependencies
Style agnostic
Encapsulated JS and CSS
Embeddable components
Auto component initialization
Built for edge cases

GitHub page

Developed by Radoslav Sharapanov since 2014

Install with NPM and include the natUIve files in your app

npm install --save-dev natuive

require('./node_modules/natuive/index.js');

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>
</head>
<body class=n-type>
	<div class=n-header-banner>
		<header class=n-header>
			Header
		</header>
		<div class=n-banner>
			Banner
		</div>
	</div>
	<main>
		Main content
	</main>
	<footer class=n-footer>
		Footer
	</footer>
	<script src=natuive.min.js type=text/javascript async></script>

</body>
</html>

Options

```
.n-header-banner.n-viewport
```
– full-height centered header and banner area
- add
```
.n-push-up
```
  to balance at 1/3 height, instead of 1/2
Use
```
.n-section
```
containers in
```
main
```
to clear inner vertical margins
```
.n-header.n-fixed
```
for fixed header on top on narrow screens (below 600px threshold)
body.n-sticky-footer for a sticky footer and vertical space taken by main.
Check the Navigation section for mobile burger nav.
```
html.n-vertical-page
```
blocks horizontal overflow.
Lite version available at natuive-lite.min.css and natuive-lite.min.js without Slider, Tabs, Lightbox, Cards, Grid with Inline Popups, Modal, Notify, Parallax.

Grid

Columns with classes like _1/3 inside a container of class n-row

_1/5

_4/5

_1/4

_3/4

_1/3

_2/3

_2/5

_3/5

_1/2

_1/2

_1/1

<div class='n-row'>
	<div>
		<div>...</div>
	</div>
	<div class='_1/3'>
		<div>...</div>
	</div>
</div>

Alignment

Left Top

Center Top

Right Top

Left Middle

Left Bottom

Center Middle

Right Middle

Center Bottom

Right Bottom

ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected

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

Grid without column padding

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='n-row n-row--no-padding'>
	<div>
		<div>...</div>
	</div>
</div>

Grid without column margin (gutter)

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='n-row n-row--no-margin'>
	<div>
		<div>...</div>
	</div>
</div>

Grid without spacing

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

Embedded grid

Child grid column

Parent grid column

<div class='n-row'>
	<div>
		<div class='n-row'>
			<div>Child grid column</div>
			<div>Child grid column</div>
		</div>							
	</div>
	<div class='_1/3'>
		<div>Parent grid column</div>
	</div>
</div>

Embedded grid without extra spacing

Child grid column

Parent grid column

<div class='n-row'>
	<div>
		<div class='n-row n-unpad'>
			<div>Child grid column</div>
			<div>Child grid column</div>
		</div>							
	</div>
	<div class='_1/3'>
		<div>Parent grid column</div>
	</div>
</div>

Grid with borders

Middle

Full width

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

Grid with all borders

Middle

Full width

Top

Center Bottom

Right

<div class='n-row n-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 is optional. Minimum width 20%.
```
.n-row > div > .n-row--vertical.n-row
```
– a vertical row as tall as the parent row with equal-height full-width children.

Navigation

Standard navigation

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

Big navigation

<nav class='n-nav'>
	<ul class='n-list--inline n-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='n-nav n-nav--scroll'>
	<ul>
		<li> <a href=#buttons>Buttons</a> </li>
	</ul>
</nav>

Drop navigation

<nav class='n-nav n-drop'>
	<ul>
		<li> 
			<input type='checkbox'>
			<ul>
				<li> 
					<input type='checkbox'>
					<ul>
						<li> 
							<a href='asd'>First item's second level item 1 third level item 1</a>
						</li>
					</ul>
					<a>First item's second level item 1</a>
				</li>
			</ul>
			<a>First item</a>
		</li>
	</ul>
</nav>

Mobile navigation behind a burger

<header class="n-fixed-mobile n-header">
	<div class="n-fold n-fold--mobile">
		<div class="n-fold--label"> <span class="n-burger"></span> </div>
		<input type=checkbox class=n-trigger>
		<div class="n-fold--content">
			<nav class=n-nav>
				<ul class="n-list--inline">
					<li class="active"> <a href="#grid" tabindex="0">Grid</a> </li>
					<li> <a href="#slider" tabindex="0">Slider</a> </li>
					<li> <a href="#form" tabindex="0">Form</a> </li>
				</ul>
			</nav>
		</div>
	</div>
</header>

Options

Drop nav uses CSS variables
```
--control-bg
```
and
```
--control-color
```
for background/text color.

For natUIve typography features like baseline alignment, wrap the below elements inside an .n-type container

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

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

<picture class=n-aspect style='--width: 1600; --height: 681;'>
	<img src=images/lido.jpg alt='Lido'>
</picture>

Options

If the element has inline style --ratio, it is used instead of the --width/--height combination.
If the image is narrower than its parent, the aspect ratio container is inline and limited by --width.
The container can be a div and the content doesn't need to be an image.

Slider

Standard

One

Two

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

Controls on top

One

Two

Three

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

Vertical

One

Two

Three

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

Vertical with controls on the right

One

Two

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

Padded (controls outside of content)

One

Two

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

Peeking at neighboring slides

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

<div class='n-slider' data-peek='20%'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Fade in/out

One

Two

Three

<div class='n-slider--wrap n-pad'>
	<div class='n-slider n-slider--fade'>
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
</div>

Auto height

One

Two

taller than One

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

Slider with detached nav

Slider here...

Slide 1

Slide 2

...detached nav here

Options

Slide duration
```
<div class='n-slider' data-duration=1>
```
in seconds. Default is .2.
Detach the nav by adding an id to the slider and creating
```
<div class='n-slider--nav' data-for='slider-id'>
```
elsewhere
URI with hash matching a slide id in a slider, auto slides to it.
```
data-peek=20%
```
to peek at neighboring slides, where 20% becomes 20% horizontal padding

<div class='n-slider n-slider--fade-overlap'>

to overlap the two slides while fading out/in

Tabs

Tabs at the bottom

Tab 1

Content of Tab 1

Tab 2

The content of Tab 2

New line

<div class='n-slider n-tabs'>
	<div> ... </div>
	<div data-tab_title='Tab 1'> ... </div>
	<div> <h2 class='n-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='n-slider n-slider--top n-tabs n-slider--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='n-slider n-slider--vertical n-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='n-slider n-slider--vertical n-tabs n-slider--right'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Tabs at the bottom with detached nav

Tab 1

Content of Tab 1

Tab 2

The content of Tab 2

New line

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

<div class='n-slider--nav' data-for='detached-tabs'></div>

Options

Tab titles are taken from
```
data-tab_title
```
,
```
.n-tab-title
```
on a child or index by default
```
data-duration=2
```
for 2 seconds slide duration
Pre-fill the nav and put it together with the .n-slider inside .n-slider--wrap for seamless loading.

Lightbox

Standard

<div class='n-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='n-lightbox n-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='n-lightbox n-slider--vertical n-lightbox--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>

1.67:1 inline

<div class='n-lightbox n-lightbox--inline n-lightbox--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>

1.67:1 inline vertical

<div class='n-lightbox n-lightbox--inline n-lightbox--thumbnails n-slider--vertical'>
	<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 lightbox peeking at neighboring slides

<div class='n-lightbox n-lightbox--inline n-lightbox--thumbnails' data-peek=10%>
	<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 lightbox with detached nav

<div class='n-lightbox n-lightbox--inline n-lightbox--thumbnails' id='lightbox4'>
	<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>

<div class="n-slider--nav" data-for=lightbox4></div>

Inline lightbox with auto height

<div class="n-slider--wrap n-slider--auto-height n-slider--outside n-lightbox--thumbnails">
	<div class="n-slider n-lightbox n-lightbox--inline n-lightbox--thumbnails n-slider--vertical" data-duration="2">
		<div>
			<span class="n-aspect" style="--width: 685; --height: 1024;"> <!-- For seamless loading -->
				<img data-src="images/DSC_5823.jpg">
			</span>
			<p class="n-lightbox--caption">First Image</p>
		</div>
		...
	</div>
	<div class="n-slider--nav n-lightbox--thumbnails">
	   <a style="background-image: url(images/DSC_5823-t.jpg);">1</a>
	   ...
	</div>
</div>

<div class="n-slider--wrap n-slider--vertical n-slider--outside n-lightbox--thumbnails">
	<div class="n-slider n-lightbox n-lightbox--inline n-lightbox--thumbnails n-slider--vertical" data-duration="2">
		<div>
			<span class="n-aspect" style="--width: 685; --height: 1024;"> <!-- For seamless loading -->
				<img data-src="images/DSC_5823.jpg">
			</span>
			<p class="n-lightbox--caption">First Image</p>
		</div>
		...
	</div>
	<div class="n-slider--nav n-lightbox--thumbnails">
	   <a style="background-image: url(images/DSC_5823-t.jpg);">1</a>
	   ...
	</div>
</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 .n-aspect container will avoid page jump during init
Inline lightbox with thumbnails can have the thumbnails outside with .n-slider--outside
Lightbox with id provides links to individual slides
Use the
```
data-anim
```
parameter for custom animation (see Modal window)
Inline lightbox will jump when sliding to an image that hasn't been loaded yet. Avoid that by wrapping the lightbox in an .n-aspect container.
To avoid inline vertical lightbox jumping the unknown image height, add data-width and data-height to the anchors.
Set thumbnails size with --thumb-size.

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 class=n-table>
	<thead>
		<tr>
			<td>Head</td>
			...
		</tr>
	</thead>
	<tr>
		<td>First</td>
		...
	</tr>
	...
</table>

Headless

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

<table class=n-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 class=n-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

One

Two

Link.

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

Open by default

<div class='n-fold' aria-expanded='true'>
	<h3 class='n-fold--label'> Label </h3>
	<input type=checkbox class=n-trigger>
	<div class='n-fold--content'>
		<p> Content. </p>
	</div>
</div>

Truncated content

<div class='n-fold'>
	<h3 class='n-fold--label'> Label </h3>
	<input type=checkbox class=n-trigger>
	<div class='n-fold--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
```
.n-fold.n-fold--horizontal
```
needs extra wrapper inside
```
.n-content
```
.
Folded on mobile, always visible on desktop with
```
.n-fold.n-fold--mobile
```
.

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='n-tool'>
	<span class='n-tool--label'>Tool label.</span>
	<span class='n-tool--tip'>Tip content.</span>
</span>

Modal Window

Open a modal window inside this tab.

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

Show external domain content in a modal window. On error, it will be opened in a tab, browser permitting.

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

Open a modal window with custom animation.

<a href='external.html#content' class='n-modal' data-anim='0% { opacity: 0; } 100% { opacity: 1; }'>Open a modal window with custom animation.</a>

Limited modal window.

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

Options

Open a modal window with any content using

nui.componentModal.openFullWindow('Any content');

Modals with
```
id
```
matching the URI hash are opened automatically
```
#content
```
is recommended to avoid HTML head parts

nui.componentModal.openFullWindow(HTML, '0% { … } 100% { … }')

for custom animation, automatically reversed on close

```
a.n-modal[data-anim]
```
parameter specifies custom animation
```
a.n-modal.limited
```
for limited width/height modal window

Buttons

Normal button

Small button

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

Big button

<a href=# class='n-btn n-btn--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='n-btn--group'> ... </div>

Options

Both

<a href=# class='n-btn'>

and

<button class=n-btn>

supported.

Lists

Ordered

First item
1. First item sub item 1
2. First item sub item 2
Second itemSecond itemSecond itemSecond itemSecond itemSecond itemSecond itemSecond itemSecond 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 Second item's sub item 2 Second item's sub item 2
  1. Sub sub item
  2. Another sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub itemAnother sub sub item

Unordered

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

Options

ul.n-list--inline orders items on one line
ul.n-list--indent for margin on the left
ul.n-list--no-bullet for a clean list
Set colors by CSS variables --list-bg and --list-color.

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='n-form n-form--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 Text to check alignment with checkbox.

Datalist examples

<form class='n-form n-form--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='n-form--check'>
	<span>Global label</span>
	<label> 
		<input type='checkbox'> <b class=n-form--check-icon></b>
		Checkbox-specific label
	</label>
</div>

Radio buttons

<div class='n-form--check'>
	<span>Label for all buttons</span>
	<label> 
		<input type='radio' name='radiodemo'> <b class=n-form--check-icon></b>
		Label for this button
	</label>
	<label> 
		<input type='radio' name='radiodemo'> <b class=n-form--check-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='n-form--file'>
		<input type='file'>
		<span><span class=n-form--file-tag>Placeholder</span></span>
	</div>
</label>

Select

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

Optional sections

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

Options

Validation enabled by
```
<label class='n-form--mandatory'>
```
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.
```
data-digits=x
```
– required digits in a number input

Colors for input and textarea

.n-form input, .n-form textarea {
	
	--input-color: darkslateblue;
	--input-bg: aliceblue;	
	
}

Masonry (vertical track only)

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

Cell

Cell Cell

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

Cards

Standard

Card content.

Link.

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

Card with headline

Title

Card content.

Link.

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

Card with image

Card content.

Link.

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

Card with headline and image

Title

Card content.

Link.

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

Options

CSS variable
```
--card-bg
```
specifies the background colour.

Fixed background

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

takes up the full window and is visible only through the current section. Not fixed on IE/Edge.

Language selector

<form action=. method=get class='n-form n-form--language'>
	<label>
		<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='n-parallax'>
    <body>
        <div class='n-parallax--back'> ... </div>
        <div class='n-parallax--front'> ... </div>
    </body>
</html>

Scroll effects

Scroll to change a block's opacity, relative to body scroll.

<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='n-notify'> Message </div>
    ...
</body>

document.body.insertAdjacentHTML('afterbegin', '<div class=n-notify> Message </div>');

nui.componentNotify.notify('Message');

Options

Fixed on top:

<div class='n-notify n-notify--fixed'>

nui.componentNotify.notify('Message', 'fixed');

nui.componentNotify.notify('Text', 'timeout')

to hide it automatically after 2 seconds

Copy to clipboard

Text to be copied to clipboard.

nui.copyButton(document.getElementById('copybutton'), document.getElementById('copycontent'));

Options

Add a third parameter to echo the content in a notification bar

'Back to top' button

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

animate() function

nui.animate(document.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

Grid with inline popups

<div class='n-row grid-inline-popup'>
	
	<div class="_1/3" tabindex="0">1</div>
	<div class="grid-inline-popup--popup">Popup for #1</div>
	<div class="_1/3" tabindex="0">2</div>
	<div class="grid-inline-popup--popup">Popup for #2</div>
	<div class="_1/3" tabindex="0">3</div>
	<div class="grid-inline-popup--popup">Popup for #3</div>
	<div class="_1/3" tabindex="0">4</div>
	<div class="grid-inline-popup--popup">Popup for #4</div>
	<div class="_1/3" tabindex="0">5</div>
	<div class="grid-inline-popup--popup">Popup for #5</div>
	<div class="_1/3" tabindex="0">6</div>
	<div class="grid-inline-popup--popup">Popup for #6</div>

</div>

Dynamically add a component

nui.addComponent(host, '<div class=n-slider><div>New</div><div>Slider</div></div>');

WordPress theme

Demo. Download from the natUIve GitHub page.

Color scheme

.n-slider--arrow, .n-slider--nav a, .n-tool:after, .n-btn, .n-form input[type=submit], .n-form button[type=submit], .n-form button[type=reset], button.n-btn, a.n-btn[href], .n-type a.n-btn[href], .n-fold > .n-fold--label, .n-drop, .n-form, .n-fold span.n-burger {
	
	--control-bg: lightcoral;
	--control-color: #fff;		
	--control-active-bg: #cc7c7e;
	--control-active-color: #eee;
	--control-highlight: #bf2a2a;

}

.n-form input, .n-form textarea {
	
	--input-color: darkslateblue;
	--input-bg: aliceblue;	
	
}

.n-list {
	
    --list-bg: aquamarine;
    --list-color: darkmagenta;
	
}