natUIve Guide

## guide

GitHub page

## Page structure

    <!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=no'>
    	<link rel=styleSheet href=natuive.min.css type=text/css media=screen>
    	<!--[if lte IE 9]>
    		<link rel=styleSheet href=ie.css type=text/css media=screen>
    		<script src=html5shiv.min.js></script>
    		<script src=ie-fallback.js type=text/javascript></script>
    	<![endif]-->
    </head>
    <body>
    	<div class=header-and-banner>
    		<header>
    			Header
    		</header>
    		<div class='banner'>
    			Banner
    		</div>
    	</div>
    	<main>
    		Main content
    	</main>
    	<footer>
    		Footer
    	</footer>
    	<script src=natuive.min.js type=text/javascript async></script>
    </body>
    </html>

### Options

-     .header-and-banner.viewport

  – full-height centered header and banner area
  - add

        .push-up

    to balance at 1/3 height, instead of 1/2
- Use

      section

  elements in

      main

  to clear inner margins at top/bottom

-     header.fixed

  for fixed header on top on narrow screens (below 600px threshold)

## Grid

1/5

    .col5

4/5

    .col45

1/4

    .col4

3/4

    .col34

1/3

    .col3

2/3

    .col23

2/5

    .col25

3/5

    .col35

1/2

    .col2

1/2

    .col2

1/1

    .col5

    <div class=row>
    	<div>
    		<div>...</div>
    	</div>
    	<div class=col3>
    		<div>...</div>
    	</div>
    </div>

## Grid alignment

Left Top

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

    <div class='row'>
    	<div>
    		<div>Left Top<p><br></p></div>
    	</div>
    	<div class='align-center'>
    		<div>Center Top</div>
    	</div>
    	<div class='align-right'>
    		<div>Right Top</div>
    	</div>
    	<div class='align-middle'>
    		<div>Left Middle</div>
    	</div>
    	<div class='align-bottom'>
    		<div>Left Bottom</div>
    	</div>
    	<div class='align-center align-middle'>
    		<div>Center Middle</div>
    	</div>
    	<div class='align-right align-middle'>
    		<div>Right Middle</div>
    	</div>
    	<div class='align-center align-bottom'>
    		<div>Center Bottom</div>
    	</div>
    	<div class='align-right align-bottom'>
    		<div>Right Bottom</div>
    	</div>
    	<div>ThisLineIsTooLongAndMustBeClippedByTheContainerEvenThoughOverflowXandYDontWorkAsExpected</div>
    </div>

### Grid without column padding

Only for CSS variables supporting browsers.

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='row no-padding'>
    	<div>
    		<div>...</div>
    	</div>
    </div>

### Grid without column margin (gutter)

Only for CSS variables supporting browsers.

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='row no-margin'>
    	<div>
    		<div>...</div>
    	</div>
    </div>

### Grid without spacing

Only for CSS variables supporting browsers.

1
2
3

    <div class='row no-spacing'>
    	<div>
    		<div>...</div>
    	</div>
    </div>

### Embedded grid

Child grid column
Child grid column
Parent grid column

    <div class='row'>
    	<div>
    		<div class='row'>
    			<div>Child grid column</div>
    			<div>Child grid column</div>
    		</div>
    	</div>
    	<div class='col3'>
    		<div>Parent grid column</div>
    	</div>
    </div>

### Embedded grid without extra spacing

Child grid column
Child grid column
Parent grid column

    <div class='row'>
    	<div>
    		<div class='row unpad'>
    			<div>Child grid column</div>
    			<div>Child grid column</div>
    		</div>
    	</div>
    	<div class='col3'>
    		<div>Parent grid column</div>
    	</div>
    </div>

### Grid with borders

Left
Middle
Full width
Top
Center Bottom
Right
Right

    <div class='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
1/5

    <div dir='rtl'>
    	...
    </div>

### Options

- Column class not mandatory. Minimum width 20%.

-     .row > .vertical-row

  – a vertical row as tall as the parent row with equal-height full-width children.

## Navigation

### Standard navigation

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

### Big navigation

    <nav>
    	<ul class='inline 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=scroll>
    	<ul>
    		<li> <a href=#buttons>Buttons</a> </li>
    	</ul>
    </nav>

## Drop navigation

    <nav class=drop>
    <form id='level1'> </form>
    <form id='level2'> </form>
    <input type='checkbox' class='trigger burger'>
    <ul>
    	<li>
    		<input type='radio' class='trigger' form='level1' name='level1'>
    		<input type='reset' form='level1'>
    		<a>First item</a>
    		<b class='sub'></b>
    		<ul>
    			<li>
    				<input type='radio' class='trigger' form='level2' name='level2'>
    				<input type='reset' form='level2'>
    				<a>First item's second level item 1</a>
    				<b class='sub'></b>
    				<ul>
    					<li>
    						<a href='asd'>First item's second level item 1 third level item 1</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    </nav>

## Headlines

# Headline 1

## Headline 2

### Headline 3

#### Headline 4

##### Headline 5

###### Headline 6

## 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='drop-cap'>
    	...
    </p>

## Quote

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

    <q>
    	...
    </q>

## Links

Here is a link.

## Paragraph

All elements except images are baseline-aligned with height divisible by the default line height.

## Aspect ratio container

While the image is loading, the layout is already solid and the page doesn't jump after loading.

    <picture class=aspect style='--ratio: 2.35;'>
    	<img src=images/lido.jpg alt='Lido'>
    </picture>

## Lightbox

### Standard

    <div class='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='lightbox 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='lightbox vertical 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>

### Inline

    <div class='lightbox inline 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>

### 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 .aspect container will avoid page jump during initialisation
- Inline lightbox with thumbnails can have the thumbnails outside with .outside
- Lightbox with id provides links to individual slides
- Use the

      data-anim

  parameter for custom animation (see Modal window)

## Video

Limited to container width.

//s3.amazonaws.com/gado/Outlying-Teaser.mp4

    <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>
    	<thead>
    		<tr>
    			<td>Head</td>
    			...
    		</tr>
    	</thead>
    	<tr>
    		<td>First</td>
    		...
    	</tr>
    	...
    </table>

### Headless

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

    <table>
    	<tr>
    		<td>First</td>
    		...
    	</tr>
    	...
    </table>

### Sortable

First | Second | Third
Bee | 3 | 7
Candy | 1 | 6
Asteroid | 4 | 9
Edgar | 0 | 8
Due | 2 | 5

    <table>
    	<thead>
    		<tr>
    			<td data-sort>Head</td>
    			...
    		</tr>
    	</thead>
    	<tr>
    		<td>First</td>
    		...
    	</tr>
    	...
    </table>

### Options

- Topmost row column with attribute

      data-sort

  makes a sortable column by number/character.

- Ascending by default, descending with

      data-sort=desc

## Fold (foldable content, accordion)

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

    <div class='fold'>
    	<h3 class=label> Label </h3>
    	<input type=checkbox class=trigger>
    	<div class='content'>
    		<p> Content. </p>
    	</div>
    </div>

### Open by default

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='fold open'>
    	<h3 class=label> Label </h3>
    	<input type=checkbox class=trigger>
    	<div class='content'>
    		<p> Content. </p>
    	</div>
    </div>

### Truncated content

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='fold'>
    	<h3 class=label> Label </h3>
    	<input type=checkbox class=trigger>
    	<div class='content' style='--height: 6em;'>
    		<p> Content. </p>
    	</div>
    </div>

### Nested Accordions

### About Inner 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### About Inner Accordion 2

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.

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

    <span class='tool'>
    	Tool content.
    	<span class='tip'>Tip content.</span>
    </span>

## Modal Window

Open a modal window inside this tab.

    <a href='external.html#content' class='modal'>Open a modal window here.</a>

Show external domain content in a modal window. (On PHP enabled host).

    <a href='http://natuive.net/external.html#content' class='modal'>Open a modal window with external content.</a>

Open a modal window with custom animation.

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

### Options

- Open a modal window with any content using openFullWindow('Any content');

## Buttons

### Normal button

Small button

    <a href=# class='button'>Small button</a>
    <button disabled>Disabled button</button>

### Big button

Big button

    <a href=# class='button 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
Features Showcase Guide Get it from GitHub

    <div class='group'> ... </div>

### Options

- Both

      <a href=# class='button'>

  and

      <button>

  supported.

## Lists

### Ordered

1. First item
   1. First item sub item 1
   2. First item sub item 2

2. #### Second item

   An in-house study at Walmart.com came out with the results that saw an up to 2% increase in conversions on the site for every single second of improvement on the load time. The accumulative growth of revenues went up to 1% for every 100 milliseconds of load time improvement.

   1. Second item's sub item 1
   2. Second item's sub item 2
      1. Sub sub item
      2. Another sub sub item

### Unordered

- Unordered one
- Unordered two
  - Nested one
  - Nested two
- Unordered three

## Slider

### Standard

One

Two

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

### Controls on top

One

Two

Three

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

### Vertical

One

Two

Three

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

### Vertical with controls on the right

One

Two

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

### Padded (controls outside of content)

One

Two

    <div class='slider pad'>
    	<div>Slide 1</div>
    	<div>Slide 2</div>
    </div>

### Fade in/out

One

Two

    <div class='slider fade'>
    	<div>Slide 1</div>
    	<div>Slide 2</div>
    </div>

### Auto height

One

Two
taller than One

    <div class='slider auto-height pad'>
    	<div>Slide 1</div>
    	<div>Slide 2</div>
    </div>

### Options

- Full window:

      <div class='slider full-window'>

- Full screen:

      <div class='slider full-screen'>

- Slide duration

      <div class='slider' data-duration=1>

  in seconds. Default is .2.
- Vertically center slides' content with

      <div class='slider align-middle'>

## Tabs

### Tabs at the bottom

### Tab 1

Content of Tab 1

### Tab 2

The content of Tab 2

New line

New line

    <div class='slider tabs'>
    	<div> ... </div>
    	<div data-tab_title='Tab 1'> ... </div>
    	<div> <h2 class='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='slider top tabs 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='slider vertical 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='slider vertical tabs right'>
    	<div data-tab_title='Tab 1'> ... </div>
    	...
    </div>

### Options

- Tab titles are taken from

      data-tab_title

  ,

      .tab-title

  on a child or index by default

-     data-duration=2

  for 2 seconds slide duration

## Forms

### Default

Submit this to Google Forms

### Mast

Excepteur sint occaecat cupidatat non proident
Please choose: First option Second option Third option
Email Enter text here Website Range Select a file
Drop or browse
Country of residence
Telephone
Check this I accept the Terms and Conditions.
Telephone

    <form class='mast'>
    	...
    </form>

### Wide

Excepteur sint occaecat cupidatat non proident Number input (5 digits)
A very long piece of label text which wraps to another line First option Second option has very long text which wraps to the next line Third option
Email Enter text here Website Range Select a file
Drop or browse
Country of residence
Telephone
Check this I accept the Terms and Conditions.
Telephone
Open disabled fieldset below
Datalist examples Afghanistan Aland Islands Albania 2013-07-04 2013-09-02 2013-10-14

    <form class='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='checkbox'>
    	<span>Global label</span>
    	<label>
    		<input type='checkbox'> <b class=checkbox-icon></b>
    		Checkbox-specific label
    	</label>
    </div>

#### Radio buttons

    <div class='checkbox'>
    	<span>Label for all buttons</span>
    	<label>
    		<input type='radio' name='radiodemo'> <b class=checkbox-icon></b>
    		Label for this button
    	</label>
    	<label>
    		<input type='radio' name='radiodemo'> <b class=checkbox-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='file'>
    		<input type='file'>
    		<span>Placeholder</span>
    	</div>
    </label>

#### Select

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

#### Optional sections

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

### Options

- Validation enabled by

      <label class='mandatory'>

- Dynamic submit without page reload:

      <form class='dynamic'>

  . Requires PHP host.
- Optional fieldsets are ignored by validation when disabled.

## Masonry

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

    <div class='masonry'>
    	<div>Item</div>
    	...
    </div>

## Cards

### Standard

Card content.

Link.

    <div class='card'>
    	<div class='content'> Content </div>
    </div>

### Card with headline

### Title

Card content.

Link.

    <div class='card'>
    	<div class='head'> Headline </div>
    	<div class='content'> Content </div>
    </div>

### Card with image

Card content.

Link.

    <div class='card'>
    	<img src=image.jpg alt=Image>
    	<div class='content'> Content </div>
    </div>

### Card with headline and image

### Title

Card content.

Link.

    <div class='card'>
    	<div class='head image' style='background-image: url(image.jpg)'> Headline </div>
    	<div class='content'> Content </div>
    </div>

## Fixed background

    <div class='fixed-bg' style='background-image: url(image.jpg);'>
    	<div class='fixed-bg-image'></div>
    	...
    </div>

takes up the full window and is visible only through the current section.

## Language selector

    <form action=. method=get class=language>
    	<label class='select'>
    		<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

Open demo page.

    <html class='parallax'>
        <body>
            <div class='parallax-back'> ... </div>
            <div class='parallax-front'> ... </div>
        </body>
    </html>

## Scroll effects

Scroll to change this block's opacity.

    <style>
    	div[data-threshold] {
    		opacity: calc(1 - var(--threshold)); transition: all 0.1s linear;
    	}
    </style>

### Options

- Adds CSS variable

      --threshold

  showing how much of the element height has been scrolled up outside of the viewport, 0.0 ~ 1.0

-     --height

  is the element height, used for calculations
- When all of it is above the viewport, the element gets a

      .threshold

  class

## Notification bar

    <body>
        <div class='notify'> Message </div>
        ...
    </body>

or

    notify('Message');

### Options

- Fixed on top:

      <div class='notify fixed'>

  or

      notify('Message', 'fixed');

-     notify('Text', 'timeout')

  to hide it automatically after 2 seconds

## Copy to clipboard

Text to be copied to clipboard

    copyButton(q('#copybutton'), q('#copycontent'));

## 'Back to top' button

    <a class='backtotop' href="#">↑</a>

## animate() function

    animate(q('body'),
    	'0% { opacity: 1; transform: translateX(0); }
    	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