d1-web

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>d1-web / documentation</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <script> d1 = null; var checkApi = function() { // check availability of JSON placeholder var re = [ ['data-href-alt', 'href'], ['data-list-alt', 'data-list'], ['data-lookup-alt', 'data-lookup'], ['data-cap-alt', 'data-cap'] ]; var u ='https://restcountries.eu/rest/v2/alpha/nz'; var data = null; fetch(u) .then(d => d.json()) .then(d => data = d) .finally(() => { console.log('API', data?.name ? 'OK' : 'FAILED'); if(!data?.name) { re.forEach(r => d1.e('[' + r[0] + ']', n => n.setAttribute(r[1], n.getAttribute(r[0])))) } re.forEach(r => { d1.e('[' + r[0] + ']', n => n.removeAttribute(r[0])) }); }); } var injectIcon = function() { d1.plugins.icons.icons['js-injected'] = [5, 'M1 1v3h3z']; } var demoIcons = function(){ if (d1.plugins.icons){ var d = d1.q('#demo-all-icons'); if(d && d1.plugins.icons){ var icons = Object.keys(d1.plugins.icons.icons); for (i=0; i<icons.length; i++) { var dd = d1.ins('a', icons[i], {title: i+1, className: 'pad hover'}, d); dd.style.width = '6.4em'; d1.plugins.icons.addIcon(icons[i], dd, 0); } } } } var testHtml = '<hr><form>' + '<p>Date: <input class="calendar" type="datetime-local">' + '<p>Lookup: <input value="NZ" data-lookup="https://restcountries.eu/rest/v2/name/{q}##alpha2Code#name#languages.0.name" data-cap="https://restcountries.eu/rest/v2/alpha/{q}#name">' + '<p>File: <input type="file" class="pick">' + '<p><textarea class="edit -adjust"></textarea>' + '</form>'; document.addEventListener('DOMContentLoaded', e => { console.log('d1 = ', d1); if (d1.plugins.icons) { d1.listen('start', injectIcon); d1.listen('ready', demoIcons); } checkApi(); // d1.listen('init', checkApi); }); </script>  <link href="../src/index.css" rel="stylesheet"> <script src="../src/index.js" type="module"></script> <noscript> <link href="../dist/d1-icons.css" rel="stylesheet"> </noscript>  <style> /* Roboto, Open Sans, Georgia, PT Sans, PT Serif, PT Mono */ @import url('https://fonts.googleapis.com/css?family=PT+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap'); /* @import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap'); @import url('https://fonts.googleapis.com/css?family=PT+Mono&display=swap'); */ </style> </head> <body class="js-theme swipe" data-swipe-right="#menu" data-swipe-left="#theme-config" data-d1='{"hOk":"#yes","debug":false,"disable":[ "-scroll","-theme","-valid","-icons"],"plug":{"toggle":{"keepHash":true},"gallery":{"idPrefix":"image-"},"theme":{"fonts":["sans-serif","serif","monospace","PT Sans","Roboto Slab"]},"-scroll":{"qHideOnScroll":".drawer[id]"},"-icons":{"pSvg":"icon-"}}}'>  <div class="stick toggle hide"></div> <div id="topline" class="-topbar stick toggle let shade row -let -center fit hide-print"> <div> <a href="#menu" class="pad -let hide-desktop icon-menu empty" title="Menu"><span>Menu</span></a> <a href="#" class="pad -let"><b>d1</b></a> <code class="-pad -nobr hide-mobile">npm i d1-web</code> <a class="shift pad text-n">v0.0.0</a> </div> <div class="col-0"> <a target="_blank" rel="noopener noreferrer" href="https://github.com/vvvkor/d1-web" title="GitHub" class="pad -let">GitHub</a> <a href="https://github.com/vvvkor/d1-web/archive/master.zip" class="pad -let icon-download empty" ><span>Download</span></a> </div> </div> <div class="-pad row -fit -wrap -center flip"> <div class="stick pad target-mobile hide-print" data-class-mobile="drawer toggle off pad hide-print scroller" data-class-desktop="stick pad hide-print scroller" id="menu" > <div class="hide-desktop pad"> <a href="#cancel" class="close pad text-n">✕</a> <b>d1 front-end framework</b> </div> <div class="pad hide-mobile"></div> <ul class="fit mar pad --toggle tree mem -accordion"> <li><a href="#get-started">Get started</a>  <li><a href="#typography">Typography</a>  <li><a href="#n-grid">Grid</a> &rsaquo; <ul id="n-grid" class="-toggle"> <li><a href="#grid-fractional">Fractional</a>  <li><a href="#grid-regular">Regular</a> </ul> <li><a href="#n-list">Lists</a> &rsaquo; <ul id="n-list" class="-toggle"> <li><a href="#list-basic">Basic</a> <li><a href="#list-tree">Tree</a> </ul> <li><a href="#n-table">Tables</a> &rsaquo; <ul id="n-table" class="-toggle"> <li><a href="#table-basic">Basic</a> <li><a href="#table-responsive">Responsive</a> <li><a href="#table-interactive">Interactive</a> </ul> <li><a href="#n-forms">Forms</a> &rsaquo; <ul id="n-forms" class="-toggle"> <li><a href="#buttons">Buttons</a> <li><a href="#form-inline">Inline form</a> <li><a href="#form-stacked">Stacked form</a> <li><a href="#form-grid">Form as grid</a> <li><a href="#form-table">Form as table</a> <li><a href="#form-init">Initial values</a> <li><a href="#input-boxes">Checkboxes</a> <li><a href="#input-color">Color input</a> <li><a href="#input-set">Set value</a> <li><a href="#calendar">Calendar</a> <li><a href="#edit">Edit</a> <li><a href="#lookup">Lookup</a> <li><a href="#pickfile">File picker</a> <li><a href="#validate">Validation</a> <li><a href="#store">Form storage</a>  </ul> <li><a href="#n-components">Components</a> &rsaquo; <ul id="n-components" class="-toggle"> <li><a href="#components">Overview</a> <li><a href="#target">Target</a> <li><a href="#popup">Popup</a> <li><a href="#nav">Navigation</a> <li><a href="#tabs">Tabs</a> <li><a href="#dlg">Modal</a> <li><a href="#dlg-full">Fullscreen</a> <li><a href="#dialog">Dialog</a> <li><a href="#galleries">Gallery</a> <li><a href="#drawer">Drawer</a> <li><a href="#topbar">Topbar</a> <li><a href="#details">Details</a> </ul> <li><a href="#n-util">Utilities</a> &rsaquo; <ul id="n-util" class="-toggle"> <li><a href="#fetch">Fetch</a> <li><a href="#responsive-class">Responsive class</a> <li><a href="#conditional-link">Conditional link</a> <li><a href="#toggle-class">Toggle class</a> <li><a href="#filters">Filter</a> <li><a href="#items">Items</a> <li><a href="#icons">Icons</a> <li><a href="#code-highlight">Code highlight</a> <li><a href="#code-sample">Code sample</a> <li><a href="#swipe">Swipe</a> <li><a href="#theme">Theme</a> </ul> <li><a href="#n-style">Style</a> &rsaquo; <ul id="n-style" class="-toggle"> <li><a href="#colors">Colors</a> <li><a href="#boxes">Boxes</a> <li><a href="#tags">Tags</a> <li><a href="#bars">Bars</a> <li><a href="#tips">Tooltips</a> <li><a href="#scroller">Custom scrollbar</a> <li><a href="#customize">Customization</a> </ul>  <li><a href="#events">Events</a> <li><a href="#n-ref">Reference</a> &rsaquo; <ul id="n-ref" class="-toggle"> <li><a href="#reference-categories">Categories</a> <li><a href="#reference-classes">Classes</a> <li><a href="#reference-plugins">Plugins</a> </ul> </ul> <p class="pad hide-mobile"></p> </div> <div class="col-3 -pad" id="top1"> <div class="read pad" data-class-mobile="pad" data-class-desktop="read pad" id="top2"> <h1 id="top">d1 <span class="text-n">front-end framework</span></h1> <hr>  <h2 id="get-started">Get started</h2> <p> <b>d1</b> is a lightweight responsive front-end framework with interactive components and utilities. Neutral default style can be customized with CSS variables. Most components are usable without JavaScript.<br> <p class="c"> <a href="test.html" class="btn hover bord">Test page</a> <a href="demo.html" class="btn hover bord">Demo page</a> </p> <h3 id="install-npm">Install with NPM</h3> <p>Install to your repository: <pre>npm install d1-web</pre> <p>Then use in your CSS file (<code>d1-icons.css</code> is optional): <pre><code class="language-css-x">@import "../node_modules/d1-web/dist/d1.min.css"; @import "../node_modules/d1-web/dist/d1-icons.min.css";</code></pre> <p>And optionally bundle into your JavaScript file: <pre><code class="language-js">require("../node_modules/d1-web/dist/d1.min.js");</code></pre> <p>or build from source: <pre><code class="language-js">const d1 = require("../../d1-web/src/module.js").default; d1.b([document], 'DOMContentLoaded', e => d1.init(/* options */));</code></pre>  <h3 id="install-manually">Install manually</h3> <p>Add the <a href="https://github.com/vvvkor/d1-web/archive/master.zip">distributed</a> CSS and JavaScript to the <code>head</code> of your document.<br> Inclusion of <code>d1.js</code> and <code>d1-icons.css</code> is optional. </p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/css/d1.min.css"> <script src="/js/d1.min.js"></script> <noscript> <link href="/js/d1-icons.min.css" rel="stylesheet"> </noscript> </head> <body> </body> </html> </code></pre> <h3 id="use-cdn">CDN</h3> <p>Add CDN links to the <code>head</code> of your document.<br> Inclusion of <code>d1.js</code> and <code>d1-icons.css</code> is optional. <ul class="nav tabs roll hover rad"> <li><a href="#cdn-jsdelivr">jsDelivr</a> <li><a href="#cdn-unpkg">unpkg</a> <li><a href="#cdn-unpkg-short">unpkg (short)</a> <li><a href="#cdn-unpkg-page">unpkg (page)</a> </ul> <div> <div id="cdn-jsdelivr"> <pre><code class="language-html"><link href="https://cdn.jsdelivr.net/npm/d1-web@0.0.0/dist/d1.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/d1-web@0.0.0/dist/d1.min.js"></script> <noscript> <link href="https://cdn.jsdelivr.net/npm/d1-web@0.0.0/dist/d1-icons.min.css" rel="stylesheet"> </noscript> </code></pre> </div> <div id="cdn-unpkg"> <pre><code class="language-html"><link href="https://unpkg.com/d1-web@0.0.0/dist/d1.min.css" rel="stylesheet"> <script src="https://unpkg.com/d1-web@0.0.0/dist/d1.min.js"></script> <noscript> <link href="https://unpkg.com/d1-web@0.0.0/dist/d1-icons.min.css" rel="stylesheet"> </noscript&gt </code></pre> </div> <div id="cdn-unpkg-short"> <pre><code class="language-html"><link href="https://unpkg.com/d1-web" rel="stylesheet"> <script src="https://unpkg.com/d1-web/dist/d1.min.js"></script> <noscript> <link href="https://unpkg.com/d1-web/dist/d1-icons.min.css" rel="stylesheet"> </noscript></code></pre> </div> <div id="cdn-unpkg-page"> <pre class="scroller"><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/d1-web"> <script src="https://unpkg.com/d1-web/dist/d1.min.js"></script> <noscript> <link href="https://unpkg.com/d1-web/dist/d1-icons.min.css" rel="stylesheet"> </noscript> </head> <body> </body> </html></code></pre> </div> </div> <h2 id="typography">Typography</h2> <p> Mostly, default styling is kept. <h3 id="inline">Inline</h3> <b>Bold</b> <i>Italic</i> <s>Strike</s> <br> <ins>Insert</ins> <del>Delete</del> <sub>Sub</sub> <span>Span</span> <sup>Super</sup> <br> <time datetime="1970-01-01">Time</time> <abbr title="Abbreviation">Abbr</abbr> <q>Quote</q> <cite>Cite</cite> <mark>Mark</mark> <dfn>Dfn</dfn> <br> <code>Code</code> <var>Var</var> <kbd>Kbd</kbd> <samp>Samp</samp> <br> <a href="#x">Link</a> <a>Link without href</a> <h3 id="blocks">Blocks</h3> <p>Paragraph<br>New line</p> <p>Paragraph</p> <pre>Preformatted <code>code</code></pre> <blockquote>Blockqoute</blockquote> <h3 id="headings">Headings</h3> <table class="let mar opts-h1"> <tr><td><code>h1..h6</code><td>Default margins<td><input name="demo-h" type="radio" data-nodes="#heads>*" value="" checked> <tr><td><code>.mar</code><td>Smaller margins<td><input name="demo-h" type="radio" data-nodes="#heads>*" value="mar"> <tr><td><code>.fit</code><td>No margins<td><input name="demo-h" type="radio" data-nodes="#heads>*" value="fit"> </table> <div id="heads" class="code"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <h2 id="grid" class="-let">Grid</h2> <h3 id="grid-fractional">Fractional grid</h3> <p> Grid row container <code>div.row</code>. Direct descendants of the container are columns. By default, they all have equal width. </p> <fieldset class="mar pad bord"> <legend>Options</legend> <label><input name="grid-flip" type="checkbox" data-nodes="#cols" data-set="flip"> Stack on small screen <code>.flip</code></label><br> <label><input name="grid-center" type="checkbox" data-nodes="#cols" data-set="center"> Center columns vertically <code>.center</code></label><br> <label><input name="grid-mar" type="checkbox" data-nodes="#cols" data-set="fit"> Remove horizontal gaps <code>.fit</code></label><br> <label><input name="grid-mar" type="checkbox" data-nodes="#cols" data-set="mar"> Add vertical margins and gaps <code>.mar</code></label><br> <label><input name="grid-main-over" type="checkbox" data-nodes="#col-main-over" data-set="" data-unset="hide"> Overflow content</label><br> <label><input name="grid-let" type="checkbox" data-nodes="#cols" data-set="let"> Allow columns wrapping <code>.let</code></label> (disables column width modifiers, auto width)<br> <label><input name="grid-roll" type="checkbox" data-nodes="#cols" data-set="roll scroller"> Allow horizontal scrollbar <code>.roll</code></label> </fieldset> <fieldset class="mar pad bord"> <legend>Column width options (applied on central column here)</legend> <label><input name="grid-main" type="radio" data-nodes="#col-main" value="pad bg-y col-0"> Auto <code>.row > .col-0</code></label><br> <label><input name="grid-main" type="radio" data-nodes="#col-main" value="pad bg-y"> Single <code>.row > div</code></label><br> <label><input name="grid-main" type="radio" data-nodes="#col-main" value="pad bg-y col-2" checked> Double <code>.row > .col-2</code></label><br> <label><input name="grid-main" type="radio" data-nodes="#col-main" value="pad bg-y col-3"> Triple <code>.row > .col-3</code></label><br> </fieldset>  <div class="code"> <div class="row flip" id="cols"> <div class="pad bg-w">Left col</div> <div class="pad bg-y col-2" id="col-main"> Central<br> column <div id="col-main-over" class="bg text-e pad mar nobr"> Very wide content — required to overflow available column width </div> </div> <div class="pad bg-i">Right col</div> </div> <p>Paragraph after grid</p> </div> <fieldset class="mar pad bord"> <legend>Column position options (applied on central column here)</legend> <label><input name="grid-pos" type="radio" data-nodes="#col-center" value="pad bg-y"> Fill <code>.row > div</code></label><br> <label><input name="grid-pos" type="radio" data-nodes="#col-center" value="pad bg-y col-0"> Auto <code>.row > .col-0</code></label><br> <label><input name="grid-pos" type="radio" data-nodes="#col-center" value="pad bg-y col-0 center" checked> Centrify <code>.row > .col-0.center</code></label><br> <label><input name="grid-pos" type="radio" data-nodes="#col-center" value="pad bg-y col-0 shift"> Shift right <code>.row > .col-0.shift</code> (with subsequent columns)</label> </fieldset> <div class="code"> <div class="row" id="cols2"> <div class="pad bg-w col-0" id="col-left">Left</div> <div class="pad bg-y col-0 center" id="col-center">Central<br>column</div> <div class="pad bg-i col-0" id="col-right">Right</div> </div> </div>  <h3 id="grid-regular">Regular grid</h3> <p> Grid rows container <code>.grid-N</code>, where <var>N</var> is number of columns (1, 2, 3, 4, 6). Direct descendants of the container are cells. Cells do wrap, forming a regular grid. </p> <div class="row"> <div> <fieldset class="mar pad bord"> <legend>Grid options</legend> <label><input name="grids-flip" type="checkbox" data-nodes="#grid-reg" value="flip"> Stack on small screen <code>.flip</code></label><br> <label><input name="grids-bord" type="checkbox" data-nodes="#grid-reg>*" value="bord"> Cell borders <code>.bord</code></label><br> <label><input name="grids-gap" type="radio" data-nodes="#grid-reg" value=""> No gaps (default)</label><br> <label><input name="grids-gap" type="radio" data-nodes="#grid-reg" value="let" checked> Regular gaps <code>.let</code></label><br> <label><input name="grids-gap" type="radio" data-nodes="#grid-reg" value="shift"> Large gaps <code>.shift</code></label> </fieldset> <fieldset class="mar pad bord"> <legend>Columns on desktop screen</legend> <label><input name="grids-desk" type="radio" data-nodes="#grid-reg" value="grid-1"> 1 column <code>.grid-1</code></label><br> <label><input name="grids-desk" type="radio" data-nodes="#grid-reg" value="grid-2"> 2 columns <code>.grid-2</code></label><br> <label><input name="grids-desk" type="radio" data-nodes="#grid-reg" value="grid-3"> 3 columns <code>.grid-3</code></label><br> <label><input name="grids-desk" type="radio" data-nodes="#grid-reg" value="grid-4" checked> 4 columns <code>.grid-4</code></label><br> <label><input name="grids-desk" type="radio" data-nodes="#grid-reg" value="grid-6"> 6 columns <code>.grid-6</code></label> </fieldset> </div> <div> <fieldset class="mar pad bord"> <legend>Columns on tablet screen (if not <code>.flip</code>)</legend> <label><input name="grids-tablet" type="radio" data-nodes="#grid-reg" value=""> As on desktop</label><br> <label><input name="grids-tablet" type="radio" data-nodes="#grid-reg" value="grid-1-mobile"> 1 column <code>.grid-1-mobile</code></label><br> <label><input name="grids-tablet" type="radio" data-nodes="#grid-reg" value="grid-2-mobile"> 2 columns <code>.grid-2-mobile</code></label><br> <label><input name="grids-tablet" type="radio" data-nodes="#grid-reg" value="grid-3-mobile" checked> 3 columns <code>.grid-3-mobile</code></label><br> <label><input name="grids-tablet" type="radio" data-nodes="#grid-reg" value="grid-4-mobile"> 4 columns <code>.grid-4-mobile</code></label><br> </fieldset> <fieldset class="mar pad bord"> <legend>Columns on phone screen (if not <code>.flip</code>)</legend> <label><input name="grids-phone" type="radio" data-nodes="#grid-reg" value=""> As on tablet</label><br> <label><input name="grids-phone" type="radio" data-nodes="#grid-reg" value="grid-1-phone"> 1 columns <code>.grid-1-phone</code></label><br> <label><input name="grids-phone" type="radio" data-nodes="#grid-reg" value="grid-2-phone" checked> 2 columns <code>.grid-2-phone</code></label><br> <label><input name="grids-phone" type="radio" data-nodes="#grid-reg" value="grid-3-phone"> 3 columns <code>.grid-3-phone</code></label><br> </fieldset> </div> </div> <div class="code"> <div class="grid-4 grid-3-mobile grid-3-phone let" id="grid-reg"> <div class="pad bg-n">#1<br>line</div> <div class="pad bg-i">#2</div> <div class="pad bg-y">#3</div> <div class="pad bg-w">#4</div> <div class="pad bg-e">#5</div> <div class="pad bg-n -invert">#6</div> <div class="pad bg-i -invert">#7</div> <div class="pad bg-y -invert">#8</div> <div class="pad bg-w -invert">#9</div> <div class="pad bg-e -invert">#10</div> <div class="pad bg">#11</div>  </div> </div> <h2 id="lists">Lists</h2> <h3 id="list-basic">Basic lists</h3> <fieldset class="mar pad bord"> <legend>Options</legend> <label><input name="ul-demo" type="radio" data-nodes="#demo-lists>*" value="" checked> Default</label><br> <label><input name="ul-demo" type="radio" data-nodes="#demo-lists>*" value="fit"> Remove margins and list style <code>.fit</code></label><br> <label><input name="ul-demo" type="radio" data-nodes="#demo-lists>*" value="row"> Wide horizontal <code>.row</code></label><br> <label><input name="ul-demo" type="radio" data-nodes="#demo-lists>*" value="row let"> Compact horizontal <code>.row.let</code></label> </fieldset> <div id="demo-lists" class="code"> <ul> <li>Unordered <li>List <ol> <li>Ordered <li>Sub-list </ol> </ul> <dl> <dt>Term</dt> <dd>Definition</dd> <dd>Another definition</dd> <dt>Another term</dt> <dd>Another definition</dd> </dl> </div> <h3 id="list-tree">Tree</h3> <p> Expandable nested lists <code>ul.tree</code>. <p> Inside list items, use links pointing at nested lists, or links without <code>[href]</code>. When no such link is found, it is generated. <p> For accordion behaviour, use <code>.accordion</code>.<br> To remember state, use <code>.mem</code>. </p> <div class="code"> <ul class="tree accordion mem fit"> <li><a href="#ul1">Computer</a> <ul id="ul1"> <li>Programming <ul class="small"> <li>JavaScript</li> <li>PHP</li> </ul> </li> <li>Markup <ul class="small"> <li>HTML</li> <li>CSS</li> </ul> </li> </ul> </li> <li><a>Human</a> <ul id="ul2"> <li>English</li> <li>Spanish</li> </ul> </li> </ul> </div> <h2 id="tables">Tables</h2> <h3 id="table-basic">Basic table</h3> <table class="let mar opts-table"> <tr><td> <td><code>table</code><td>By default, table is styled with border <tr><td> <td><code>form > table</code><td>No borders if table is a direct descendant of form <tr><td><input type="checkbox" name="demo-table-bord" data-set="bord" data-nodes="#demo-table" checked> <td><code>.bord</code><td>Show borders <tr><td><input type="checkbox" name="demo-table-let" data-set="let" data-nodes="#demo-table"> <td><code>.let</code><td>Row dividers <tr><td><input type="checkbox" name="demo-table-hover" data-set="hover" data-nodes="#demo-table" checked> <td><code>.hover</code><td>Highlight row on hover <tr><td><input type="checkbox" name="demo-table-shift" data-set="shift" data-nodes="#demo-table" checked> <td><code>.shift</code><td>Full width <tr><td><input type="checkbox" name="demo-table-fit" data-set="fit" data-nodes="#demo-table"> <td><code>.fit</code><td>No cell padding <tr><td><input type="checkbox" name="demo-roll" data-set="roll" data-nodes="#demo-roll" checked> <td><code>.roll > table</code><td>Scroll overflowing width <tr><td> <td><code>.l1 .r2 .c3</code><td>Align specific columns to the left/right/center </table>  <div class="code"> <div class="roll" id="demo-roll"> <table class="hover shift r1 c4 c5 c6 replace" id="demo-table"> <caption>Table caption</caption> <thead> <tr><th>#<th>Component<th>Code<th>Remember state<th>Fix position<th>Close on Esc </thead> <tbody> <tr><td>1 <th>Dropdown <td><code>.nav</code> <td>- <td>+ <td>+ <tr><td>2 <th>Tree <td><code>.tree</code> <td><code>.mem</code> <td>- <td>- <tr><td>3 <th>Toggle <td><code>.target</code><td><code>.mem</code> <td>- <td>- <tr><td>4 <th>Popup <td><code>.pop</code> <td>- <td>+ <td>+ <tr><td>5 <th>Tabs <td><code>.tabs</code> <td><code>.mem</code> <td>- <td>- <tr><td>6 <th>Modal <td><code>.dlg</code> <td>- <td>- <td>+ <tr><td>7 <th>Drawer <td><code>.drawer</code><td>- <td>- <td>+ <tr><td>8 <th>Gallery <td><code>.gal</code> <td>- <td>- <td>+ <tr><td>9 <th>Topbar <td><code>.stick.toggle</code><td>- <td>- <td>-  </tbody> </table> </div> </div>     <h3 id="table-responsive">Responsive table <small class="btn bg-i inact" title="Uses plugin: fliptable">fliptable</small> </h3> <p>Turn rows into cards on small screen <code>table.flip</code>. <div class="code"> <table class="flip let -bord"> <caption>Web languages</caption> <thead> <tr><th>Language</th><th>Type</th><th>Year</th></tr> </thead> <tbody> <tr><td>HTML</td><td>Markup</td><td>1993</td></tr> <tr><td>JavaScript</td><td>Programming</td><td>1995</td></tr> <tr><td>CSS</td><td>Style</td><td>1996</td></tr> </tbody> </table> </div> <h3 id="table-interactive">Interactive table <small class="btn bg-i" title="Uses plugin: tablex">tablex</small> </h3> <p>Sort table rows <code>table.sort</code>.<br> <p>Initial sort column number can be set in <code>[data-s]</code> attribute, or (with higher priority) in URL query string parameter with the name defined in <code>[data-qs]</code> attribute (one-based indexing, negative values for descending order). <p>Filter field query selector in <code>table[data-filter]</code> or add filter field automatically <code>table.filter</code>. <p>Initial filter value can be set in <code>[data-f]</code> attribute, or (with higher priority) in URL query string parameter with the name defined in <code>[data-qf]</code> attribute. <p>Automatic dynamic totals (<i>sum</i> for numbers, <i>max</i> for dates, <i>count</i> for strings) <code>table.totals</code>. <p>Custom dynamic totals in <code>tfoot span</code>: <code>[data-total="count|sum|avg|min|max"]</code>, decimal digits <code>[data-dec]</code> (default 2), mode <code>[data-mode="s|n|b|i|d"]</code> (default "n"), where "s" is string, "n" is numeric, "b" is byte size, "i" is time interval, "d" is datetime. <p>To enable page navigation set <code>[data-limit]</code> to number of rows per page and optionally set <code>[data-pages]</code> to maximum number of page links to show (default is 10). Page navigation is placed before table by default. To place it after table add <code>[data-pages-after]</code> attribute. <p>Initially shown page can be set in <code>[data-p]</code> attribute, or (with higher priority) in URL query string parameter with the name defined in <code>[data-qp]</code> attribute.   <div class="code"> <div class="roll"> <table class="sort totals bord filter" data-filter-cols="0 2 4" data-case data-limit="2" data-pages="10" data-f="" data-qf="q"> <thead> <tr><th>String<th>Number<th>Bytes<th>Interval<th>Date </thead> <tbody> <tr><td>HTML</td><td>4</td><td>900 B</td><td>1min 125s</td><td>1993-07-09 08:05:01</td></tr> <tr><td>JavaScript</td><td>10.1</td><td>1 MB</td><td>5m</td><td>12/4/1995</td></tr> <tr><td>CSS</td><td>3</td><td>350 KB</td><td>1y</td><td>17.12.1996</td></tr> </tbody> <tbody class="bg"> <tr class="nobr"> <td> Count: <span data-total="count"></span> <td> Sum: <span data-total="sum" data-dec="3"></span><br> Avg: <span data-total="avg" data-dec="3"></span> <td>Sum: <span data-total="sum" data-mode="b"></span> <td>Sum: <span data-total="sum" data-dec="3" data-mode="i"></span> <td> Avg: <span data-total="avg" data-mode="d" data-dec="0"></span><br> Min: <span data-total="min" data-mode="d" data-dec="0"></span><br> Max: <span data-total="max" data-mode="d" data-dec="0"></span> </tbody> </table> </div> </div> <h2 id="forms">Forms</h2> <h3 id="buttons">Buttons</h3> <p> <code>Button</code> and <code>input</code> of type <code>submit</code> have button styling by default.<br> Add <code>.btn</code> class to the element (usually a link) to make it look like a button <i>(which is not recommended from accessibility point of view)</i>. For color options see <a href="#colors-buttons">Colors</a> section. </p> <div class="code"> <input type="submit" value="Submit"> <input type="submit" value="Disabled" disabled> <button type="submit">Button</button> <button type="submit" class="bg-e icon-ok">Icon</button> <button type="submit" class="bg-e icon-ok"></button> <a href="#x" class="btn icon-ok"> Link</a> <br> <input type="submit" value="Submit">  <span class="btn bg-n">Span</span> <b class="btn bg-w">B</b> <a href="#x" class="pad bord rad hover">Link-pad-bord</a> <a href="#x" class="pad rad hover">Link-pad</a> <a href="#x">Link</a> </div> <h3 id="form-inline">Inline form</h3> <div class="code"> <form> <input type="search" size="10" title="search string"> <input type="submit" value="Find"> </form> </div> <h3 id="form-stacked">Stacked form</h3> <div class="code"> <form> <p> <label for="name">Name</label><br> <input type="text" name="name" id="name" required> </p> <p> <label for="age">Age</label><br> <input type="number" name="age" id="age"> </p> <p> <input type="submit" value="OK"> <a href="#x" class="pad hover">Link</a> </p> </form> </div> <h3 id="form-grid">Form as grid</h3> <div class="code"> <form> <div class="row flip"> <label for="i1">Label one</label> <div class="-col-3"><input type="text" name="i1" id="i1"></div> </div> <div class="row flip"> <div aria-hidden="true"></div> <div class="-col-3"> <input type="checkbox" name="i2" id="i2"> <label for="i2">Box</label> </div> </div> <fieldset class="pad"> <legend><a href="#fs0">Fieldset</a></legend> <div id="fs0" class="--hide --toggle target "> <div class="row flip"> <label for="i3">Label two</label> <div class="-col-3"><input type="text" name="i3" id="i3"></div> </div> </div> </fieldset> <div class="row flip"> <div aria-hidden="true"></div> <div class="-col-3"><input type="submit" value="Submit"></div> </div> </form> </div> <h3 id="form-table">Form as table</h3> <p> For aligned form, <code>table</code> may be used, which is arguably not semantic, but very convenient. In this case, <code>table</code> must be a direct descendant of <code>form</code>. Table will become stacked on small screen. <div class="code"> <form class="store restore"> <table class="flip shift"> <tr> <td><label for="nm">Name</label> <td><input type="text" name="nm" id="nm" required pattern="[A-Za-z]{2,}" title="Two up to four letters" data-hint="%minlength% up to %maxlength% letters" autocomplete="off" minlength="2" maxlength="4"> <div> <a href="#nm" data-value="test">Test</a>, <a href="#nm" data-value="">Reset</a> </div> <tr><td colspan="2"> <fieldset> <legend class="mar"><a href="#fs1">Input types</a></legend> <table id="fs1" class="target mem flip shift"> <tr> <td><label for="lng">Select</label> <td> <select name="lng" id="lng" required> <option value="" selected>-</option> <option value="en">English</option> <option value="ru">Russian</option> </select> <tr> <td><label for="rdo">Readonly</label> <td><input type="text" name="rdo" id="rdo" readonly value="read only"> <tr> <td><label for="dis">Disabled</label> <td><input type="text" name="dis" id="dis" disabled value="not sent"> <tr> <td><label for="dt">Date</label> <td><input type="date" name="dt" id="dt"> <tr> <td><label for="tm">Time</label> <td><input type="time" name="tm" id="tm"> <tr> <td><label for="dtl">Datetime</label> <td><input type="datetime-local" name="dtl" id="dtl"> <tr> <td><label for="num">Number</label> <td><input type="number" name="num" id="num" min="1" max="10" step="0.1" data-info="some info" data-hint="Enter number between %min% and %max%, step %step% (%data-info%)."> <tr> <td><label for="rng">Range</label> <td><input type="range" name="rng" id="rng"> <tr> <td><label for="clrn">Color</label> <td><input type="color" name="clrn" id="clrn" value="#ff0000"> <tr> <td><label for="eml">E-mail</label> <td><input type="email" name="eml" id="eml" value=""> <tr> <td><label for="ur">URL</label> <td><input type="url" name="ur" id="ur" value=""> <tr> <td><label for="msg">Textarea</label> <td><textarea class="edit adjust" data-tools="/*@xbi_.pqf" name="msg" id="msg" cols="20" rows="5" required></textarea> <tr> <td>Upload <td><label class="drop" title="Drop image" for="up"><input id="up" type="file" name="up[]" multiple></label> <tr> <td>Box <td><label for="bx0"><input id="bx0" type="checkbox" required class="" name="bx0" value="1" title="You need to check the box to continue"> Required box</label> </table> </fieldset> <fieldset> <legend class="mar"><a href="#fs2">Switches</a></legend> <table id="fs2" class="target mem flip shift"> <tr> <td>Box <td> <label for="bx1"><input id="bx1" type="checkbox" class="" name="colors" value="1" data-group="colors"> <b>All</b></label><br> <label for="bx2"><input id="bx2" type="checkbox" class="colors" name="color[]" value="red"> Red</label><br> <label for="bx3"><input id="bx3" type="checkbox" class="colors" name="color[]" value="green"> Green</label><br> <label for="bx4"><input id="bx4" type="checkbox" class="colors" name="color[]" value="blue"> Blue</label><br> <tr> <td>Radio <td> <label for="rd1"><input id="rd1" type="radio" name="ra1" required value="sun"> Sun</label><br> <label for="rd2"><input id="rd2" type="radio" name="ra1" value="moon"> Moon</label><br> </table> </fieldset> <tr> <td> <td> <input type="submit" value="Submit"> <input type="submit" value="Disabled" disabled> <input type="submit" value="Confirm" class="bg-w dialog" name="btn2" title="Confirm?"> </table> </form> </div> <h3 id="form-init">Initial values</h3> <p>Initial values for all inputs in a form can be set in URL query string parameter with the name defined in form's <code>[data-q]</code> attribute. <p>Initial input value can be set in URL query string parameter with the name defined in input's <code>[data-q]</code> attribute. This takes precenence over form's initial values. <div class="code"> <a href="?name=John&age=33#form-init">Set initial values from URL params (directly)</a> <form data-q="" action="#form-init"> Name: <input name="name" size="5" data-q="nm"> Age: <input name="age" size="2"> <input type="submit" value="Submit"> </form> <hr> <a href="?person[name]=Paul&person[age]=32#form-init">Set initial values from URL params (as array)</a> <form data-q="person" action="#form-init"> Name: <input name="name" size="5" data-q="nm"> Age: <input name="age" size="2"> <input type="submit" value="Submit"> </form> <hr> <a href="?nm=George#form-init">Set initial name in both forms from URL param</a> </div> <h3 id="input-boxes">Checkbox group <small class="btn bg-i" title="Requires plugin: form">form</small> </h3> <div class="code"> <form> <label for="b1"><input id="b1" type="checkbox" name="colors" data-group="colors"> <b>All</b></label><br> <label for="b2"><input id="b2" type="checkbox" class="colors" name="color[]" value="red"> Red</label><br> <label for="b3"><input id="b3" type="checkbox" class="colors" name="color[]" value="green"> Green</label><br> <label for="b4"><input id="b4" type="checkbox" class="colors" name="color[]" value="blue"> Blue</label><br> </form> </div> <h3 id="input-color">Color input <small class="btn bg-i" title="Requires plugin: form">form</small> </h3> <div class="code"> <label for="demo-color">Color</label> <input type="color" name="c" id="demo-color" value="#ff0000"> </div> <h3 id="input-set">Set input value <small class="btn bg-i" title="Requires plugin: form">form</small> </h3> <div class="code"> <label for="nm-set">Name</label> <input type="text" name="n" id="nm-set"> <a href="#nm-set" data-value="test">Test</a>, <a href="#nm-set" data-value="">Reset</a> </div> <h3 id="calendar">Calendar <small class="btn bg-i inact" title="Uses plugin: calendar">calendar</small> </h3> <p>Replacement of standard HTML date inputs.  <div class="code"> <form action="?" id="form-cld"> <table class="flip"> <tr><td>Text<td><input name="txt" type="text"> <tr><td>Date<td><input name="dt" class="calendar" type="date"> <tr><td>Datetime<td><input name="dtm" class="calendar datetime" type="datetime-local" data-def="2001-02-03T04:05:06" min="2001-02-02T10:00" max="2001-02-15T20:00" data-mode="m"> <tr><td><td><input type="submit" value="OK">  </table> </form> </div> <h3 id="edit">Edit <small class="btn bg-i" title="Requires plugin: edit">edit</small> </h3> <p> Auto-adjust <code>textarea</code> height to content <code>.adjust</code>. <p> Turn <code>textarea</code> into WYSIWYG editor <code>.edit</code>.<br> Optionally define initial mode in <code>[data-mode]</code> attribute ("w" for WYSIWYG, "t" for source editing). If absent, mode is defined automatically based on whether HTML tags are contained in text.<br> Optionally define custom <a href="#editor-commands">set of tools</a> in <code>[data-tools]</code>. Example: <code>data-tools="/bi_."</code>. </p> <div id="editor-commands" class="target mar pad bg"> <table class="let shift sort hover"> <caption>Editor tools</caption> <thead> <tr><th>Code<th>Command<th>Description </thead> <tbody> <tr><td>/<td><i>src</i><td>View source <tr><td>*<td>insertimage<td>Image <tr><td>@<td>createlink<td>Link <tr><td>x<td>unlink<td>Unlink <tr><td>b<td>bold<td>Bold <tr><td>i<td>italic<td>Italic <tr><td>_<td>removeformat<td>Remove format <tr><td>.<td>insertUnorderedList<td>Unordered list <tr><td>#<td>insertOrderedList<td>Ordered list <tr><td>1<td>formatblock<td>Heading 1 <tr><td>2<td>formatblock<td>Heading 2 <tr><td>3<td>formatblock<td>Heading 3 <tr><td>p<td>formatblock<td>Paragraph <tr><td>|<td><i>tools</i><td>Expand toolbar <tr><td>c<td>inserthtml<td>Code <tr><td>,<td>inserthtml<td>Abbreviation <tr><td>s<td>strikeThrough<td>Strike through <tr><td>^<td>subscript<td>Subscript <tr><td>v<td>superscript<td>Superscript <tr><td>d<td>formatblock<td>Div <tr><td>q<td>formatblock<td>Block quote <tr><td>f<td>formatblock<td>Preformatted <tr><td>~<td>inserthorizontalrule<td>Horizontal ruler <tr><td>T<td>inserthtml<td>Table <tr><td>(<td>justifyLeft<td>Justify left <tr><td>=<td>justifyCenter<td>Justify center <tr><td>)<td>justifyRight<td>Justify right <tr><td>j<td>justifyFull<td>Justify full <tr><td>+<td>indent<td>Increase indent <tr><td>-<td>outdent<td>Decrease indent  </tbody> </table> </div> <div class="code"> <label for="wys">Label</label> <textarea id="wys" name="wys" class="edit adjust" data-tools-x="/*@xbi_.pqf" data-mode="w" cols="50" rows="5">Write formatted text.</textarea> </div> <h3 id="lookup">Lookup <small class="btn bg-i" title="Requires plugin: lookup">lookup</small> </h3> <p>Autocomplete lookups with data from XHTTP request. <div class="code"> <label for="lkp">Label</label> <input required type="text" name="id" id="lkp" value="ru" placeholder="search" data-lookup-alt="data.json?q={q}" data-cap-alt="data-cap.json?q={q}" data-lookup="https://restcountries.eu/rest/v2/name/{q}##alpha2Code#name#languages.0.name" data-cap="https://restcountries.eu/rest/v2/alpha/{q}#name" data-label-x="Country One" data-cache="10" data-url="#country-{id}" data-goto-x="#goto-country-{id}"> </div>  <p>Chained selects. <div class="code"> <select name="country" data-cha