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
Developed by Radoslav Sharapanov since 2014
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>
Recommended
<!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
- add
- Use
.n-section
containers inmain
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
<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
<div class="n-row n-row__no-padding">
<div>
<div>...</div>
</div>
</div>
Grid without column margin (gutter)
<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
<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
<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
Grid with borders
<div class="n-row n-row__border">
<div>...</div>
</div>
Grid with all borders
<div class="n-row n-row__border-all">
<div>...</div>
</div>
Right to left layout
centered
<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
<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...
...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
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
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
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 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
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

First photo from Rīga

Second photo from Rīga

Third photo from Rīga
<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

First image from Toronto

Second image from Toronto

Third image from Toronto

Fourth image from Toronto
<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>

First photo from New York

Second photo from New York

Third photo from New York

Fourth photo from New York
<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>
Fold (foldable content, accordion)
One
Two
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.
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>
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-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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="n-fold--group">
<div class="n-fold">
...
</div>
<div class="n-fold">
...
</div>
...
</div>
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.
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>
<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 partsnui.componentModal.openFullWindow(HTML, "0% { … } 100% { … }")
for custom animation, automatically reversed on closea.n-modal[data-anim]
parameter specifies custom animationa.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>
Buttons in paragraph
Here is an Inline button inside a paragraph.
Groups of buttons
Needed for proper spacing when wrapped
<div class="n-btn--group"> ... </div>
Options
- Both
<a href=# class="n-btn">
and<button class=n-btn>
supported.
Lists
Ordered
- First item
- First item sub item 1
- 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.
- Second item's sub item 1
-
Second item's sub item 2
Second item's sub item 2
Second item's sub item 2
- Sub sub item
- 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
<form class="n-form n-form__mast">
...
</form>
Wide
<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)
<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>
or
document.body.insertAdjacentHTML("afterbegin", "<div class=n-notify> Message </div>");
or
nui.componentNotify.notify("Message");
Options
- Fixed on top:
<div class="n-notify n-notify__fixed">
ornui.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
break
break
<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>");
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;
}