Native Internet User Interface 3.0

Lightweight, featureful front end for the web

GitHub repo

niui.min.css
niui.min.js
Lightweight
ES module
Accessible
Feature-packed
Dozens of demo pages
Progressive enhancement
WordPress theme
No dependencies
Style agnostic
Prefixed BEM CSS classes
Nestable components
Dynamic init
RTL ready
Unbreakable

Reimplemented real world examples

Developed by Radoslav Sharapanov since 2014.

Contribute at OpenCollective or buy me a beer at Revolut or PayPal.

Usage

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

Or install with NPM and include the niui files

npm i --save-dev niui-npm

<link rel="styleSheet" href="./node_modules/niui-npm/dist/niui.min.css" type="text/css">

<script src="./node_modules/niui-npm/dist/niui.min.js" type="module"></script>

import nui from './node_modules/niui-npm/js/niui.js';

To customize the bundle, remove anything unnecessary from components/ and run

npm i --legacy-peer-deps
./build.sh

Page structure

Minimal

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5, user-scalable=yes, viewport-fit=cover">
		<link rel="styleSheet" href="niui.min.css" type="text/css" media="screen">
		<script src="niui.min.js" type="module" defer></script>
	</head>
	<body class="n-type">
		<header class="n-header">
			Header
		</header>
		<main>
			Content
		</main>
		<footer class="n-footer">
			Footer
		</footer>
	</body>
</html>

Options

```
.n-viewport
```
– full viewport height section
Use
```
.n-section
```
containers in
```
<main>
```
to clear inner vertical margins
```
body.n-sticky-footer
```
for a sticky footer and vertical space taken by
```
<main>
```
.
```
html.n-vertical-page
```
blocks horizontal overflow.

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

<nav class="n-nav">
	<ul>
		<li> <a href="#buttons">Buttons</a> </li>
	</ul>							
</nav>

Big

<nav class="n-nav n-big-text">
	<ul>
		<li> <a aria-current="page" href="#grid">Grid</a> </li>
		<li> <a href="#carousel">Carousel</a> </li>
		<li> <a href="#forms">Form</a> </li>
	</ul>
</nav>

Vertical

<nav class="n-nav n-nav--vertical">
	<ul>
		<li> <a aria-current="page" href="#grid">Grid</a> </li>
		<li> <a href="#carousel">Carousel</a> </li>
		<li> <a href="#forms">Form</a> </li>
	</ul>
</nav>

Vertical wide

<nav class="n-nav n-nav--vertical n-nav--vertical">
	<ul>
		<li> <a aria-current="page" href="#grid">Grid</a> </li>
		<li> <a href="#carousel">Carousel</a> </li>
		<li> <a href="#forms">Form</a> </li>
	</ul>
</nav>

Scroll

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

Drop

Drop (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>

Rich select

A rich select with links instead of buttons

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>

Typography

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

Headlines use padding instead of margin, to take up vertical space divisible by page line height.

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 first link.

Paragraph

Text elements 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.

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>.

Fixed background

<div class="n-fixed-bg">
			<picture class="n-fixed-bg__backdrop"><img></picture>
			...
		</div>

The background image takes up the full browser window and is visible only through the .n-fixed-bg section.

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" width="1600" height="681">
</picture>

Options

If the element has inline style --ratio, the --width/--height combination is ignored.
The container can be a div and the content doesn't need to be an image.

Carousel

Full info on standalone component home page.

Standard

One

Two

<div class="n-carousel">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
</div>

Index

One

Two

<div class="n-carousel">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
	<div class="n-carousel__index">
		<button><span>1</span></button>
		<button><span>2</span></button>
	</div>	
</div>

Vertical

One

Two

<div class="n-carousel n-carousel--vertical">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
	<div class="n-carousel__index">
		<button><span>1</span></button>
		<button><span>2</span></button>
	</div>	
</div>

Vertical with controls on the right

One

Two

<div class="n-carousel n-carousel--vertical n-carousel--index-end">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
	<div class="n-carousel__index">
		<button><span>1</span></button>
		<button><span>2</span></button>
	</div>	
</div>

Controls outside of content

One

Two

<div class="n-carousel n-carousel--controls-outside">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
	<div class="n-carousel__index">
		<button><span>1</span></button>
		<button><span>2</span></button>
	</div>	
</div>

Peeking at neighboring slides

One

Two

<div class="n-carousel n-carousel--peek">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
	<div class="n-carousel__index">
		<button><span>1</span></button>
		<button><span>2</span></button>
	</div>	
</div>

Auto height

One

Two

<div class="n-carousel n-carousel--auto-height">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
</div>

Carousel with detached nav

Carousel here...

One

Two

<div class="n-carousel" id="detached-carousel">
	<div class="n-carousel__content">
		<div>Slide 1</div>
		<div>Slide 2</div>
	</div>
</div>

<div class="n-carousel__previous" data-for="detached-carousel">
	<button><span>Previous</span></button>
</div>
<div class="n-carousel__next" data-for="detached-carousel">
	<button><span>Next</span></button>
</div>
<div class="n-carousel__index" data-for="detached-carousel">
	<button><span>1</span></button>
	<button><span>2</span></button>
</div>

...detached nav here

Options

Custom slide duration

<div class="n-carousel" data-duration="1">

in seconds..

URI with hash matching a slide ID in a carousel, auto slides to it.
```
--peek: 20%
```
to peek at neighboring slides, where 20% becomes 20% horizontal padding
```
.n-carousel.n-carousel--auto-slide
```
auto slides the carousel. Use
```
data-interval="4"
```
to specify the interval between slides, in seconds.
Vertical carousels require either
```
--max-height
```
(defaulting at 75vh) or
```
.n-carousel--auto-height
```
.

Tabs

Full info on standalone component home page

Tabs at the bottom

Tab 1

Content of Tab 1
Tab 2

The content of Tab 2

New line

New line
Three

<div class="n-carousel n-carousel--tabs n-carousel--controls-outside">
	<div class="n-carousel__content">
		<div> Tab 1 </div>
		<div> Tab 2 </div>
	</div>
	<div class="n-carousel__index">
		<button><span>Tab 1</span></button>
		<button><span>Tab 2</span></button>
	</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
Three

<div class="n-carousel n-carousel--tabs n-carousel--auto-height n-carousel--index-start n-carousel--controls-outside">
	<div class="n-carousel__content">
		<div> Tab 1 </div>
		<div> Tab 2 </div>
	</div>
	<div class="n-carousel__index">
		<button><span>Tab 1</span></button>
		<button><span>Tab 2</span></button>
	</div>
</div>

Vertical tabs

Tab 1

Content of Tab 1
Tab 2

The content of Tab 2

New line

New line
Three

<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--controls-outside">
	<div class="n-carousel__content">
		<div> Tab 1 </div>
		<div> Tab 2 </div>
	</div>
	<div class="n-carousel__index">
		<button><span>Tab 1</span></button>
		<button><span>Tab 2</span></button>
	</div>
</div>

Vertical tabs on the right

Tab 1

Content of Tab 1
Tab 2

The content of Tab 2

New line

New line
Three

<div class="n-carousel n-carousel--tabs n-carousel--vertical n-carousel--index-end n-carousel--controls-outside">
	<div class="n-carousel__content">
		<div> Tab 1 </div>
		<div> Tab 2 </div>
	</div>
	<div class="n-carousel__index">
		<button><span>Tab 1</span></button>
		<button><span>Tab 2</span></button>
	</div>
</div>

Tabs at the bottom with detached nav

Tab 1

Content of Tab 1
Tab 2

The content of Tab 2

New line

New line
Three

<div class="n-carousel n-carousel--tabs" id="detached-tabs">
	<div class="n-carousel__content">
		<div> Tab 1 </div>
		<div> Tab 2 </div>
	</div>
</div>
<div class="n-carousel__index n-carousel--tabs" data-for="detached-tabs">
	<button><span>Tab 1</span></button>
	<button><span>Tab 2</span></button>
</div>

Options

This component inherits the carousel

Lightbox

Full info on standalone component home page

Inline

<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

Inline vertical

<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails n-carousel--vertical">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

1.67:1

<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails" style="--ratio: 1">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

1.67:1 vertical

<div class="n-carousel n-carousel--lightbox n-carousel--aspect n-carousel--thumbnails n-carousel--vertical" style="--ratio: 1.67">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

Detached nav

<div class="n-carousel n-carousel--lightbox" id="carousel-detached">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
</div>
<div class="n-carousel__previous" data-for="carousel-detached">
	<button><span>Previous</span></button>
</div>
<div class="n-carousel__next" data-for="carousel-detached">
	<button><span>Next</span></button>
</div>

Peeking at neighboring slides

<div class="n-carousel n-carousel--lightbox n-carousel--peek n-carousel--thumbnails">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

Auto height

<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

Auto height – vertical

<div class="n-carousel n-carousel--lightbox n-carousel--auto-height n-carousel--thumbnails n-carousel--vertical">
	<ul class="n-carousel__content">
		<li>
			<figure>
				<picture>
					<img width="1365" height="2048" src="DSC00756.jpg" loading="lazy">
				</picture>
				<figcaption>A city skyline</figcaption>
			</figure>
		</li>
		...
	</ul>
	<div class="n-carousel__index">
		<button><img src="DSC00756-88x88.jpg" alt="Thumbnail of a city skyline"></button>
		...
	</div>
</div>

Options

This component inherits the carousel

Tables

Default

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>

Wide

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

<div class="n-table--wide">
	<table class="n-table">
		<tr>
			<td>First</td>
			...
		</tr>
		...
	</table>
</div>

Sortable


Bee	3	7
Candy	1	6
Asteroid	4	9
Emily	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>

Accordion

Full info on standalone component home page.

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-accordion">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label"> <button id="accordion-1-button" aria-controls="accordion-1-content"> Accordion </button></h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		...
	</div>
</div>

Open by default

Content.

<div class="n-accordion">
	<input type="checkbox" checked="true">
	<h2 class="n-accordion__label"> <button id="accordion-1-button" aria-controls="accordion-1-content" aria-expanded="true"> Accordion </button></h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		...
	</div>
</div>

Content 1

Link fourth.

Content 2

Link fifth.

Content 3

Link sixth.

<div role="group">
	<div class="n-accordion">
		...
	</div>
	<div class="n-accordion">
		...
	</div>
	...
</div>

Link seventh.

Link eighth.

<div class="n-accordion">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label">
		<button id="accordion-1-button" aria-controls="accordion-1-content">Title</button>
	</h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		<div class="n-accordion">
			...
		</div>	
	</div>
</div>

Popin

Content for 1

Content for 2

Content for 3

Content for 4

Content for 5

Content for 6

Content for 7

Content for 8

Content for 9

Content for 10

<div class="n-accordion__popin" role="group">
	<div class="n-accordion">
		...
	</div>
	...
</div>

Mobile accordion

<div class="n-accordion">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label"> <button id="accordion-1-button" aria-controls="accordion-1-content"> Accordion </button></h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		...
	</div>
</div>

Tooltip

This text has a tooltip.

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-tooltip" aria-describedby="tooltip1">This text has a tooltip.<span class="n-tooltip__icon"></span></span>
<span class="n-tooltip__content" id="tooltip1" role="tooltip">Explanation</span>

Options

Use

.n-tooltip__content { --nui-border-radius: .5em; }

for rounded edges.

Modal

Full info on standalone component home page

<button onclick="nui.modal('Content')" class="n-btn n-btn--big">Open a modal</button>

Open a modal from a link.

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

Open a modal with custom animation.

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

Full Modal.

<a href="external.html#content" class="n-modal-link n-modal--full">Open a modal here.</a>

<button data-href="external.html#content?4" class="n-modal-link n-modal--shadow n-btn n-btn--big">Shadow</button>

<button data-href="external.html#content?5.html" class="n-modal-link n-modal--blur n-btn n-btn--big">Blur</button>

Close a modal with nui.modal.close(element).

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" role="group"> ... </div>

Border

<button class="n-btn" style="--nui-border-size: 1px; --nui-border-color: rebeccapurple;">Border</button>

Shadow

<button class="n-btn" style="--nui-shadow-size: 1px; --nui-shadow-blur: 3px; --nui-shadow-color: rebeccapurple;">Shadow</button>

Ripple effect

Ripple

<a href="#" class="n-btn n-btn--ripple">Ripple button</a>

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 item with a longer headline which shows what happens when there isn't enought space

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 --nui-list-bg and --nui-list-color.

Forms

Default

Mast

Excepteur sint occaecat cupidatat non proident Country of residence (rich select)

Country of residence (native select)

Please choose an option First option Second option Third option

Email Enter text here Website Range Select a file

Drop or browse

Telephone

Check this (Fieldset) 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 (Fieldset) I accept the Terms and Conditions.

Telephone

Disabled fieldset Open disabled fieldset below.

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="text" inputmode="numeric" pattern="[0-9]*" data-digits="5">
</label>

Checkbox

<label> 
	<input type="checkbox"> <b class="n-form__check-icon"></b>
	Checkbox-specific label
</label>

Radio buttons

<fieldset>
	<legend>Label for all buttons</legend>
	<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>
	...
</fieldset>

Textarea

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

Range input

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

File input

<label>
	<span>Select a file</span>
	<div class="n-form__file">
		<input name="file" type="file">
		<span><span class="n-form__file-tag">Drop or browse</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

Full info on standalone component home page.

<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 section

<div class="n-form__check n-form__condition" data-for="conditional_fieldset">
	<span>Enable fieldset below</span>
	<label>
		<input type="checkbox"> <b class="n-form__check-icon"></b>
	</label>
</div>
<fieldset id="conditional_fieldset" disabled>
	...
</fieldset>

Optional fieldsets are ignored by validation when disabled.

Options

```
.n-form__condition
```
's optional
```
fieldset
```
is selected either by a
```
data-for/id
```
match or as a following sibling.
Validation enabled by
```
<label class="n-form--mandatory">
```
Set the placeholder colour with CSS variable --nui-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. More info.

Colors for input and textarea

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

Masonry

Vertical track only.

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

A very long cell which demonstrates

Masonry arranges cells A very long cell which demonstrates how Masonry arranges cells Cell

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

Cards

Standard

Card content.

Link ninth.

<div class="n-card">
	<div class="n-card__content"> Content </div>
</div>

Card with headline

Title

Card content.

Link tenth.

<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 eleventh.

<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 twelfth.

<div class="n-card">
	<div class="n-card__head n-card__head--image" style="background-image: url(image.jpg)"> Headline </div>
	<div class="n-card__content"> Content </div>
</div>

Options

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

Parallax scrolling

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

Offset relative either to scrolling parent or body.

Notification bar

<body>
    <div class="n-notify"> Message </div>
    ...
</body>

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

nui.notify("Message");

Options

```
nui.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

Dynamic components

nui.addComponent(host, `<div class="n-carousel">
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div><div class="n-carousel__content"><div>New</div><div>Carousel</div></div>
</div>`);

Dynamically added component HTML will be automatically initialised by a mutation observer, which can be disabled by

nui.dynamicInit = false;

WordPress theme

Rado.bg
Demo site

Download

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

Gallery Settings: 9 columns means a default lightbox, other values mean inline with thumbnails only.

Theme

:root {
	--nui-bg: black;
	--nui-color: white;

	--nui-control-bg: lightcoral;
	--nui-control-color: white;		
	--nui-control-active-bg: #cc7c7e;
	--nui-control-active-color: #eee;
	--nui-control-highlight: #bf2a2a;

	--nui-input-color: darkslateblue;
	--nui-input-bg: aliceblue;	

    --nui-list-bg: aquamarine;
    --nui-list-color: darkmagenta;

	--nui-bg-dark: white;
	--nui-color-dark: black;

	--nui-control-bg-dark: lightcoral;
	--nui-control-color-dark: white;		
	--nui-control-active-bg-dark: #cc7c7e;
	--nui-control-active-color-dark: #eee;
	--nui-control-highlight-dark: #bf2a2a;
	
	--nui-input-color-dark: darkslateblue;
	--nui-input-bg-dark: aliceblue;	
	
	--nui-list-bg-dark: aquamarine;
	--nui-list-color-dark: darkmagenta;
	
	--nui-border-radius: .5em;

	--nui-border-size: 1px;
	--nui-border-color: darkgreen;
	--nui-border-color-dark: lightgreen;

	--nui-shadow-size: 1px;
	--nui-shadow-blur: 3px;
	--nui-shadow-color: red;
	--nui-shadow-color-dark: pink;
}

The default scheme is Light
```
.n-scheme-dark
```
uses Dark scheme
```
.n-scheme-auto
```
uses Auto scheme
Borders are done with box shadow, to avoid layout difference between elements with and without borders.

Native Internet User Interface 3.0

Lightweight, featureful front end for the web

Reimplemented real world examples

Usage

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

Or install with NPM and include the niui files

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

Big

Vertical

Vertical wide

Scroll

Drop

Drop (right-to-left)

Rich select

Typography

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Quote

Drop cap

Links

Paragraph

Height compensation according to line height

Fixed background

Aspect ratio container

Options

Carousel

Standard

Index

Vertical

Vertical with controls on the right

Controls outside of content

Peeking at neighboring slides

Auto height

Carousel with detached nav

Carousel 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

Tab 1

Tab 2

Vertical tabs on the right

Tab 1

Tab 2

Tabs at the bottom with detached nav

Tab 1

Tab 2

Options

Lightbox

Inline

Inline vertical

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