Content

to clear inner vertical margins * body.n-sticky-footer for a sticky footer and vertical space taken by

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

...

Alignment Left Top Center Top Right Top Left Middle Left Bottom Center Middle Right Middle Center Bottom Right Bottom ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected

Left Top

Center Top

Right Top

Left Middle

Left Bottom

Center Middle

Right Middle

Center Bottom

Right Bottom

ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected

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.

...

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.

...

Grid without spacing 1 2 3

...

Embedded grid Child grid column Child grid column Parent grid column

Child grid column

Parent grid column

Embedded grid without extra spacing Child grid column Child grid column Parent grid column

Child grid column

Parent grid column

Grid with borders Grid with borders Middle Full width

...

Grid with all borders Middle Full width Top Center Bottom Right Right

...

Right to left layout Bottom-aligned 1/2 wide column Right-aligned 1/2 wide column. Top part of a vertical row in a normal column. Bottom part of a vertical row. 1/5 centered 1/5 ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected 1/5 1/5

...

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 * Buttons * Drop-down nav * Lightbox * Buttons * Drop-down nav * Lightbox * Accordion * Modal Big * Grid * Carousel * Form Vertical * Grid * Carousel * Form Vertical wide * Grid * Carousel * Form Scroll * Buttons * Drop-down nav * Lightbox * Accordion * Modal * Video * Aspect ratio * Masonry * Tables * Tabs * Lists * Cards * WordPress theme * Showcase Drop * [ ] + [ ] o First item's second level item 1 third level item 1 o First item's second level item 1 third level item 2 First item's second level item 1 + [ ] o First item's second level item 2 third level item 1 o First item's second level item 2 third level item 1 First item's second level item 2 First item * [ ] + [ ] o Second item level two item 1 third level item 1 o Second item level two item 1 third level item 1 Second item level two item 1 Second item which is a link with long text * [ ] + Third item second level item 1 + Third item second level item 2 Third item with one sub level * [ ] + Fourth item second level item 1 + Fourth item second level item 2 Fourth item with one sub level * Last item without a sub level * [ ] + [ ] o First item's second level item 1 third level item 1 o First item's second level item 1 third level item 2 First item's second level item 1 + [ ] o First item's second level item 2 third level item 1 o First item's second level item 2 third level item 1 First item's second level item 2 First item (reprise) Drop (right-to-left) * [ ] + [ ] o mwrd wl sTH dwm 1 mwrd sTH swm 1 o mwrd dwm sTH wl 1 mwrd sTH swm 2 mwrd wl sTH dwm 1 + [ ] o mwrd wl sTH dwm 2 mwrd sTH swm 1 o mwrd wl sTH dwm 2 mwrd sTH swm 1 mwrd dwm sTH dwm 2 mwrd wl * [ ] + [ ] o mwrd dwm sTH dw mwrd 1 mwrd sTH swm 1 o mwrd dwm sTH dw mwrd 1 mwrd sTH swm 1 mwrd dwm sTH dw mwrd 1 mwrd dwm khh pywndy b mtn Twlny st * [ ] + mwrd swm sTH dwm 1 + mwrd swm mwrd dwm sTH 2 mwrd swm b ykh sTH fr`y * [ ] + mwrd chhrm mwrd sTH dwm 1 + mwrd chhrm mwrd dwm sTH 2 mwrd chhrm b ykh sTH fr`y * mwrd akhr bdwn sTH zyr * [ ] + [ ] o mwrd wl sTH dwm 1 mwrd sTH swm 1 o mwrd dwm sTH wl 1 mwrd sTH swm 2 mwrd wl mwrd sTH dwm 11 + [ ] o mwrd wl sTH dwm 2 mwrd sTH swm 1 o mwrd wl sTH dwm 2 mwrd sTH swm 1 mwrd dwm sTH dwm 2 mwrd wl (tkhrr) Rich select A rich select with links instead of buttons Go to page... Home Forms

Home Forms

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

...

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 Portrait ... To avoid shifting on page load, add niui-preload.min.js in . Aspect ratio container As the image is loading, the layout is already solid and the page doesn't jump after the download. Lido

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 Previous Next

Slide 1

Slide 2

Index One Two Previous Next 1 2

Slide 1

Slide 2

Vertical One Two Previous Next 1 2

Slide 1

Slide 2

Vertical with controls on the right One Two Previous Next 1 2

Slide 1

Slide 2

Controls outside of content One Two Previous Next 1 2

Slide 1

Slide 2

Peeking at neighboring slides One Two Previous Next 1 2

Slide 1

Slide 2

Auto height One Two Previous Next

Slide 1

Slide 2

Carousel with detached nav Carousel here... One Two

Slide 1

Slide 2

...detached nav here Previous Next 1 2 Options * Custom slide duration

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 Tab 1 Tab 2 Tab 3

Tab 1

Tab 2

Tabs on top with auto height * Tab 1 Content of Tab 1 * Tab 2 The content of Tab 2 New line New line * Three Tab 1 Tab 2 Tab 3

Tab 1

Tab 2

Vertical tabs * Tab 1 Content of Tab 1 * Tab 2 The content of Tab 2 New line New line * Three Tab 1 Tab 2 Tab 3

Tab 1

Tab 2

Vertical tabs on the right * Tab 1 Content of Tab 1 * Tab 2 The content of Tab 2 New line New line * Three Tab 1 Tab 2 Tab 3

Tab 1

Tab 2

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

Tab 1

Tab 2

Tab 1 Tab 2 Tab 3 Options * This component inherits the carousel Lightbox Full info on standalone component home page Inline * Taipei photo First Taipei photo * Demo Image 1 First Taipei photo * Demo Image 1 First Taipei photo Previous Next 1 2 3 Toggle full screen Close Modal Inline vertical * Demo Image 1 First photo from Japan * Demo Image 1 Second photo from Japan * Demo Image 1 Third photo from Japan Previous Next 1 2 3 Toggle full screen Close Modal 1.67:1 * Demo Image 1 First photo from Riga * Demo Image 1 Second photo from Riga * Demo Image 1 Third photo from Riga Previous Next 1 2 3 Toggle full screen Toggle modal window 1.67:1 vertical * Demo Image 1 First photo from Paris * Demo Image 1 Square * Demo Image 1 Second photo from Paris * Demo Image 1 Third photo from Paris Previous Next 1 2 3 3 Toggle full screen Detached nav * Demo Image 1 First photo from Corsica * Demo Image 1 Second photo from Corsica * Demo Image 1 Third photo from Corsica

Previous Next Peeking at neighboring slides * Demo Image 1 First photo from San Francisco * Demo Image 1 Second photo from San Francisco * Demo Image 1 Third photo from San Francisco Previous Next 1 2 3 Toggle full screen Auto height * Demo Image 1 First Toronto photo * Demo Image 1 Second Toronto photo * Demo Image 1 Third Toronto photo * Previous Next 1 2 3 5 Toggle full screen Auto height - vertical * Demo Image 1 First New York photo * Demo Image 1 Second New York photo * Demo Image 1 Third New York photo * Demo Image 1 Fourth New York photo Previous Next 1 3 2 3 Toggle full screen Options * This component inherits the carousel Tables Default One Second TheTableWillBeScrollableOnNarrowScreensBecauseOfWideCell Time Long Three Four col B 3 [?] [?] [?] Row Two with Long Headline to Test Table on Narrow 1 [?] [?] [?] Screens A 2 [?] [?] [?] ... ... ...

Head
First

Wide First Second Third [?] [?] [?] [?] [?] [?] ... ...

First

Sortable First Second Third Bee 3 7 Candy 1 6 Asteroid 4 9 Emily 0 8 Due 2 5 ... ... ...


First

Accordion Full info on standalone component home page. [ ] Accordion Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

...

[*] Open by default Content.

...

[ ] Accordion 1 Content 1 Link fourth. [ ] Accordion 2 Content 2 Link fifth. [ ] Accordion 3 Content 3 Link sixth.

...

[ ] Nested Accordions [ ] Nested Accordions 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 seventh. [ ] Nested Accordions 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 eighth.

...

Popin 1 Content for 1 2 Content for 2 3 Content for 3 4 Content for 4 5 Content for 5 6 Content for 6 7 Content for 7 8 Content for 8 9 Content for 9 10 Content for 10

...

Mobile accordion [ ] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

...

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. 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. Options * Use .n-tooltip__content { --nui-border-radius: .5em; } for rounded edges. Modal Full info on standalone component home page Open a modal with content from a text/HTML string Open a modal from a link. Open a modal with custom animation. Full Modal. Shadow Blur Close a modal with nui.modal.close(element). Buttons Normal button Small button Disabled button Small button Big button Big button Big button 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 Features Showcase Guide Get it from GitHub

...

Border Border Shadow Shadow Ripple effect Ripple Ripple Ripple button Options * Both and

Optional section

Enable fieldset below

...

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 * Set the placeholder colour with CSS variable --nui-placeholder-color. *

to position the submit button absolutely on the right/center. *

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

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

A photo of red taxi

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.

Lido beach

Fixed background

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

Parallax scrolling

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");

Notify me now Fixed notification bar

Options

* Fixed on top:

nui.notify("Message", "fixed");

* nui.notify("Text", "timeout")

to hide it automatically after 2 seconds

Copy to clipboard

Text to be copied to clipboard.

Copy the above text

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;

[<div class="n-carous]
Add the above component
[<div class="n-accord]
Add the above component
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

Color scheme ( ) Light (default) ( ) Dark (*) Auto
: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.