^2.2

Native Internet User Interface

lightweight, feature-heavy web front-end

Lightweight, ~10+~10 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

Reimplemented real world examples

Developed by Radoslav Sharapanov since 2014

Buy me a beer

Get niui.min.css, niui.min.js and index.html and edit the latter.

Or install with NPM and include the niui files in your app

npm install --save-dev niui-npm

require("./node_modules/niui-npm/index.js");

Lite version available at niui-lite.min.css, niui-lite.min.js without the following components:

Slider (Carousel)
Tabs
Lightbox
Grid with inline popups
Notify
Fold (Accordion)
Tooltip
Parallax

Page structure

Minimal

<!DOCTYPE html>
<html>
<head>
	<link rel="styleSheet" href="niui.min.css" type="text/css" media="screen">
	<script src="niui.min.js" type="module" defer></script>
</head>
<body>

</body>
</html>

<!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=yes">
	<link rel="styleSheet" href="niui.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="niui.min.js" type="module" defer></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 niui-lite.min.css and niui-lite.min.js without Slider, Tabs, Lightbox, Cards, Grid with Inline Popups, Modal, Notify, Parallax, Tooltip.

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-row__border">
	<div>...</div>
</div>

Grid with all borders

Middle

Full width

Top

Center Bottom

Right

<div class="n-row n-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 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.
By default, all images inside a grid are limited to 100% width.
A column with
```
.n-full-mobile-width
```
will take the full mobile width.

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="n-nav-current"> <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

Drop navigation right-to-left

<nav class="n-nav n-nav__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-header__fixed-mobile n-header">
	<div class="n-fold n-fold__mobile">
		<button class="n-fold--label"> <span class="n-burger"></span> </button>
		<input type="checkbox" class="n-trigger">
		<div class="n-fold--content">
			<nav class="n-nav">
				<ul class="n-list__inline">
					<li class="n-nav-current"> <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>

The header fixed-positioning is optional

Rich select navigation

Home Forms

<div class="n-select">
	<div class="n-select__options">
		<button>Go to page...</button>
		<a href="#home">Home</a>
		<a href="#form">Forms</a>
	</div>
</div>

Options

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

For niui 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

Quote

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

<q>
	...
</q>

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>

Links

Here is a link.

Paragraph

All elements except images are baseline-aligned with height divisible by the default line height. 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.

Height compensation according to line height

<span class="n-adjust-height">
	...
</span>

To avoid shifting on page load, add niui-preload.min.js in <head>.

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, the --width/--height combination is ignored.
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">
	   <button style="background-image: url(images/DSC_5823-t.jpg);">1</button>
	   ...
	</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">
	   <button style="background-image: url(images/DSC_5823-t.jpg);">1</button>
	   ...
	</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


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

<table class="n-table">
	<thead>
		<tr>
			<td><button class="n-table-sort">Head</button></td>
			...
		</tr>
	</thead>
	<tr>
		<td>First</td>
		...
	</tr>
	...
</table>

Fold (foldable content, accordion)

One

Two

Link.

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

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

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

Content 1

Content 2

Content 3

<div class="n-fold--group">

	<div class="n-fold">
	
		...
	
	</div>
	
	<div class="n-fold">
	
		...
	
	</div>
	
	...

</div>

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
```
.
```
.n-fold.n-fold__defocus
```
to close the fold on focus out.

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.

The tip will appear on the side of the tool with the most space available and won"t be affected by overflow: hidden around the tool.

<span class="n-tool">
	Tool label.
	<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>

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.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 Country of residence (rich select)

Country of residence (native select)

Please choose: First option Second option Third option

Email Enter text here Website Range Select a file

Drop or browse

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>

Rich select

<label>
	<span>Label</span>
	<div class="n-select">
		<select name="select1"> <!-- Optional -->
			<option>Option 1</option>
			<option value="2">Option 2</option>
			<option>Option 3</option>
		</select>
		<div class="n-select__options" data-name="select1">
			<button>Option 1</button>
			<button value="2">Option 2</button>
			<button>Option 3</button>
		</div>
	</div>
</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
The rich select can be used outside of a form without label. It can also contain links instead of option buttons.
Rich select with shadow via .n-select__options.n-select--shadow.
Rich select theme CSS variables: --control-color, --control-bg, --control-selected-color, --control-selected-bg, --control-active-color, --control-active-bg, --control-highlight.

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

<div class="n-parallax">
	<div class="n-parallax--content"> ... </div>
</div>

Above

Offset relative either to scrolling parent or body.

Below

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, 
	"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 1

Demo 2

Download

Note: Image gallery currently not supported in the Block Editor. Please use the Classic Editor for galleries.

Color scheme

.n-slider--arrow, .n-slider--nav *, .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-nav__drop, .n-form, .n-fold span.n-burger, .n-select__options {
	
	--control-bg: lightcoral;
	--control-color: #fff;		
	--control-active-bg: #cc7c7e;
	--control-active-color: #eee;
	--control-highlight: #bf2a2a;

}

nav li[aria-haspopup][aria-expanded="true"], nav li[aria-haspopup]:hover {
	
    transition: background-color .2s ease-in-out;
    --control-bg: #d47171;

}

nav li li[aria-haspopup][aria-expanded="true"], nav li li[aria-haspopup]:hover {
	
    --control-bg: #b76262;

}

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

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

Native Internet User Interface

lightweight, feature-heavy web front-end

Reimplemented real world examples

Get niui.min.css, niui.min.js and index.html and edit the latter.

Or install with NPM and include the niui files in your app

Lite version available at niui-lite.min.css, niui-lite.min.js without the following components:

Page structure

Minimal

Recommended

Options

Grid

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

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

Drop navigation right-to-left

Mobile navigation behind a burger

Rich select navigation

Options

For niui 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

Quote

Drop cap

Links

Paragraph

Height compensation according to line height

Aspect ratio container

Options

Slider

Standard

Controls on top

Vertical

Vertical with controls on the right

Padded (controls outside of content)

Peeking at neighboring slides

Fade in/out

Auto height

Slider with detached nav

Slider here...

...detached nav here

Options

Tabs

Tabs at the bottom

Tab 1

Tab 2

Tabs on top with auto height

Tab 1

Tab 2

Vertical tabs

Vertical tabs on the right

Tabs at the bottom with detached nav

Tab 1

Tab 2

Options

Lightbox

Standard

Full screen

Vertical with thumbnails

1.67:1 inline

1.67:1 inline vertical

Inline lightbox peeking at neighboring slides