Reimplemented real world examples

Navigation

Standard navigation

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

Big navigation

<nav class='n-nav'>
	<ul class='n-list--inline n-big-text'>
		<li class='active'> <a href='#grid'>Grid</a> </li>
		<li> <a href='#slider'>Slider</a> </li>
		<li> <a href='#form'>Form</a> </li>
	</ul>
</nav>

Scroll navigation

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

Drop navigation

Drop navigation right-to-left

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

Mobile navigation behind a burger

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

The header fixed-positioning is optional

Options

• Drop nav uses CSS variables

  --control-bg

  and

  --control-color

  for background/text color.

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

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Quote

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

* Using ResizeObserver, as of August 2019 working in Chrome and under development in Firefox (69) and Safari.

Slider

Standard

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

Controls on top

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

Vertical

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

Vertical with controls on the right

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

Padded (controls outside of content)

<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

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

Fade in/out

<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

<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

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

<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

<div class='n-slider n-slider--top n-tabs n-slider--auto-height'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Vertical tabs

<div class='n-slider n-slider--vertical n-tabs'>
	<div data-tab_title='Tab 1'> ... </div>
	...
</div>

Vertical tabs on the right

<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

<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

1.67:1 inline

First photo from Rīga

Second photo from Rīga

Third photo from Rīga

123

<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

1 2 3 4 5

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

First photo from New York

Second photo from New York

Third photo from New York

Fourth photo from New York

1 2 3 4 5

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

Options

• Open automatically by URI: https://site.com?image=DSC00193.jpg#lightboxid or https://site.com?slide=3#lightboxid
• Captions from link title
• An inline lightbox inside an .n-aspect container will avoid page jump during init
• Inline lightbox with thumbnails can have the thumbnails outside with .n-slider--outside
• Lightbox with id provides links to individual slides
• Use the

  data-anim

  parameter for custom animation (see Modal window)
• Inline lightbox will jump when sliding to an image that hasn't been loaded yet. Avoid that by wrapping the lightbox in an .n-aspect container.
• To avoid inline vertical lightbox jumping the unknown image height, add data-width and data-height to the anchors.
• Set thumbnails size with --thumb-size.

Tables

Fold (foldable content, accordion)

Modal Window

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

Options

• Both

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

  and

  <button class=n-btn>

  supported.

Lists

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

<label>
	<span>Label</span>
	<input type='text'>
</label>

<label>
	<span>Label</span>
	<input type='number' data-digits='5'>
</label>

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

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

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

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

<label>
	<span>Label</span>
	<div class='n-form--file'>
		<input type='file'>
		<span><span class='n-form--file-tag'>Placeholder</span></span>
	</div>
</label> 

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

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

Options

• Validation enabled by

  <label class='n-form--mandatory'>

• Optional fieldsets are ignored by validation when disabled.
• Set the placeholder colour with CSS variable --placeholder_color.

• <form class='sticky-submit'>

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

• <textarea data-auto>

  for automatically adjusted textarea height.

• data-digits=x

  – required digits in a number input

Colors for input and textarea

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

Cards

Options

• CSS variable

  --card-bg

  specifies the background colour.