anycode-components

<!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta charset="UTF-8"> <title>Anycode Components - Iconic Demo</title> <link href='https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="iconic.css"> <link rel="stylesheet" href="iconic-font.css"> </head> <body> <iconic class="not-ready"> <iconic-header> <ul class="u-pull-left"> <li class="restricted"> <iconic-dropdown> <yield to="trigger"><i class="icon-burger opener"></i></yield> <yield to="links"> <a href="#iconic-tip">Banana is funny</a> <div class="overflow"> <a href="#home/iconic-announcement" class="u-nd">iconic-announcement</a> <a href="#iconic-tip" class="u-nd">iconic-tip</a> <a href="#iconic-button" class="u-nd">iconic-button</a> </div> <a href="#" class="u-nd primary">Sign In</a> </yield> </iconic-dropdown> </li> </ul> <div class="brand"> <i class="icon-anycode-logo"></i><span>any<b>code</b></span> </div> <ul class="u-pull-right"> <li><a href="#iconic-menu" class="u-nd">iconic-menu</a></li> <li><a href="#iconic-tip" class="u-nd">iconic-tip</a></li> <li class="menu"> <iconic-dropdown> <yield to="trigger"><span>The Cat's Hat</span><i class="icon-menu opener"></i></yield> <yield to="links"> <a href="#iconic-tip">Thing 1</a> <a href="#iconic-button">Thing 2</a> </yield> </iconic-dropdown> </li> <li class="separator"></li> <li class="pinned"><a href="#" data-menu="menu-links" class="u-nd button button-extra-small button-primary">Sign-In</a></li> </ul> </iconic-header> <iconic-navigation name="nav" data-fixed="left" data-overflow="menu-links-overflow"> <div class="brand"> <i class="icon-anycode-logo"></i><span>any<b>code</b></span> </div> <ul class="navigation"> <li data-tip="navigation-tip"><a href="#home/iconic-announcement" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon" hotkey="aA "><i class="icon-announcement"></i></iconic-button> iconic-announcement</a></li> <li data-tip="navigation-tip"><a href="#iconic-navigation" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-navigation"></i></button> iconic-navigation</a></li> <li data-tip="navigation-tip"><a href="#iconic-tip" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-tip"></i></button> iconic-tip</a></li> <li data-tip="navigation-tip"><a href="#iconic-menu" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-menu"></i></button> iconic-menu</a></li> <li class="separator"></li> <li data-tip="navigation-tip"><a href="#iconic-button" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-button"></i></button> iconic-button</a></li> <li data-tip="navigation-tip"><a href="#iconic-well" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-well"></i></button> iconic-well</a></li> <li class="separator"></li> <li data-tip="navigation-tip"><a href="#not-even-on-the-page" class="u-nd"><button class="icon-extra-small icon-inverted navigation-icon"><i class="icon-browser"></i></button> no-content</a></li> </ul> </iconic-navigation> <div class="mega u-cf"> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <div class="u-well u-center-text"> <i class="icon-iconic"></i> </div> <h1>iconic <i class="icon-iconic" style="vertical-align: 3rem; color: rgba(0, 215, 180, 0.5); font-size: 5rem; line-height: 10rem;"></i></h1> <blockquote>Iconic theme and components for RiotJS</blockquote> <p>The <em>iconic</em> theme is built atop <a href="http://starve.me" title="Starveling - Responsive CSS boilerplate">Starveling</a> building out a minimal set of additional classes to support <em>iconic</em>'s button styles and the document's visual elements.</p> </div> </div> </div> </article> </div> <iconic-announcement name="warning" class="warning" icon="icon-announcement"> <em>WARNING</em><br>You are running on reserve inspiration. Be creative immediately! </iconic-announcement> <iconic-announcement name="manual" class="warning" icon="icon-tip"> <em>MANUALLY CLOSED</em><br>This announcement won't go away until the user dismisses it. </iconic-announcement> <iconic-announcement name="announcement" class="success" icon="{ opts.burgerIcon }"> <em>Congratulations</em><br>You've successfully clicked the <em>Show Announcement</em> button. </iconic-announcement> <a id="home/iconic-announcement"></a> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <h1 class="tag">iconic <em>announcement</em></h1> <blockquote><i class="icon-announcement icon"></i> iconic-<em>announcement</em> is a toaster style flash-message with cancellable automatic timeout. It's suitable for displaying short-lived announcements and notifications. </blockquote> </div> </div> <div class="row"> <div class="eight columns"> <h5>Announcement/General Notification</h5> <p>After clicking the <em>Announcement</em> button, you'll see a generic notification message. The message has been configured to show for <em>2 seconds</em> before automatically dismissing</p> <p>Try clicking on the announcement to interrupt the automatic dismissal, then click the close button to manually dismiss the announcement.</p> </div> <div class="four columns" style="margin:1rem; text-align: right;"> <button class="button-primary" onclick="{ opts.showAnnouncement }">Announcement</button> </div> </div> <div class="row u-cf"> <div class="eight columns"> <h5>Warnings</h5> <p>After pressing the Warning's <em>Warning</em> button, you'll see a hostile notification, informing the end-user of the imminent danger.</p> <p>The warning announcement has been configured to display for <em>6 seconds</em> before automatic dismissal. As a developer you can elect any number of milliseconds to display an iconic-<b>announcement</b></p> </div> <div class="four columns" style="margin:1rem; text-align: right;"> <button class="button-primary" onclick="{ opts.showWarning }">Warning</button> </div> </div> <div class="row u-cf"> <div class="eight columns"> <h5>Manual Dismissal</h5> <p>After pressing the <em>Manual</em> button, you'll see a hostile notification, informing the end-user of the imminent danger.</p> <p>The warning announcement has been configured to display <em>forever</em> so there is no automatic dismissal.</p> </div> <div class="four columns" style="margin:1rem; text-align: right;"> <button class="button-primary" onclick="{ opts.showManual }">Manual</button> </div> </div> <div class="row"> <div class="twelve columns"> <h3>Attributes</h3> <div class="attributes"> <ul> <li> <h5><span>name</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>A unique name by which a containing riot-tag can reference the iconic-announcement<br><code>this.tags.announcement</code></p></li> <li><label>Value</label> <p>announcement name</p></li> <li><label>Default</label> <p>not named</p></li> <li><label>Required</label></li> </ul> </li> <li> <h5><span>class</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>Control the visual style of the announcement</p></li> <li><label>Value</label> <p>success | warning</p></li> <li><label>Default</label> <p>none</p></li> <li><label>Required</label></li> </ul> </li> </ul> </div> </div> </div> <div class="row"> <div class="twelve columns"> <h3>Methods</h3> <div class="attributes"> <ul> <li> <h5><span>show</span><label>(milliseconds)</label></h5> <ul> <li><label>Purpose</label> <p>Display the announcement</p></li> <li><label>Arguments</label> <p><em>milliseconds</em> :: How many ms before the announcement is automatically dismissed</p></li> <li><label>Default</label> <p>Show's announcement for 10,000ms</p></li> <li><label>Example</label> <p><code> tag.show(6000) </code></p></li> </ul> </li> </ul> </div> </div> </div> </div> </article> <hr> <a id="iconic-navigation"></a> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <h1 class="tag">iconic <em>navigation</em></h1> <blockquote><i class="icon-navigation icon"></i> iconic-<em>navigation</em> is a highly discoverable, responsive left-hand & right-hand navigation bar with automatic link-anchor capturing. </blockquote> <p> iconic-<em>navigation</em> is designed to be more discoverable than the usual hamburger menu. iconic-<em>navigation</em> also provides automatic on-page anchor capturing helping make nagivation more intuitive.</p> <h5>Automatic disclosure @media width</h5> <p>By default iconic-<em>navigation</em> is closed. This behaviour can be configured so that the navigation is openend when the viewport width reaches an appropriate size. </p> <div class="u-well u-pad-below"><button class="button-small" onclick="{ opts.navigationManual }">Manual Behaviour</button><button class="button-small" onclick="{ opts.navigationAutomatic }">Automatic Behaviour</button></div> <h5>← As seen to the left</h5> <p>iconic-<em>navigation</em> is present on this page. Try resizing the browser window to see it in action.</p> <p>The hamburger is disclosed only when the navigation bar is iconized. This enables tap-to-read for mobile browsers and hover tool-tips for desktop browsers</p> </div> </div> <div class="row"> <div class="twelve columns"> <h3>Attributes</h3> <div class="attributes"> <ul> <li> <h5><span>data-fixed</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>specify if iconic-navigation should be fixed to the left or right of the viewport</p></li> <li><label>Value</label> <p>left | right | none</p></li> <li><label>Default</label> <p>none</p></li> </ul> </li> <li> <h5><span>data-effect</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>specify the expand effect</p></li> <li><label>Value</label> <p>slide | overlay</p></li> <li><label>Default</label> <p>overlay</p></li> </ul> </li> </ul> </div> </div> </div> </div> </article> <hr> <a id="iconic-tip"></a> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <h1 class="tag">iconic <em>tip</em></h1> <blockquote><i class="icon-tip icon"></i> iconic-<em>tip</em> is a multi-directional tooltip tied to a specific element, or set of elements. </blockquote> <p> iconic-<em>tip</em>'s content can be dynamically set shared amongst a group of elements. each element need's the iconic-<em>tip</em>'s name set in its data-tip property and the magic will happen.</p> <p>This visible tooltip will remain visible when receiving user-interactions shuch as mouse-hover or click actions enabling iconic-<em>tip</em> to double as a basic flyout control.</p> </div> </div> <div class="row"> <h5>Tooltip displays on-hover</h5> </div> <div class="row u-pad-below"> <div class="six columns"> <h6>Display above</h6> <button class="button-small" data-tip="tip-above">Hover over me</button> </div> <div class="six columns"> <h6>Display below</h6> <button class="button-small" data-tip="tip-below">Hover over me</button> </div> </div> <div class="row u-pad-below"> <div class="six columns"> <h6>Display to left</h6> <button class="button-small" data-tip="tip-left">Hover over me</button> </div> <div class="six columns"> <h6>Display to right</h6> <button class="button-small" data-tip="tip-right">Hover over me</button> </div> </div> <div class="row u-pad-below" style="height: 15rem;"> <h6>Absolute Positioning</h6> <div style="border: 1px dashed #222; position: absolute; left: 0; width: auto; height: 10rem; bottom: auto; right: 0;"> <div style="position: absolute; display: block; right: 5.5rem; top: 3.5rem;"> <iconic-button class="button-small" data-tip="tip-above" hotkey="jJ"><i class="icon-browser"></i></iconic-button> </div> </div> </div> <iconic-tip position="above" name="tip-above" delay="100"> <div style="padding: 1rem; max-width: 40rem;"> <h6><i class="icon-tip" style="color: rgba(0, 215, 180, 0.9); font-size: 5rem;"></i> Displayed above</h6> </div> <div style="margin-bottom: 1rem; height: 3rem; text-align: center;"> <button class="button-primary button-extra-small">LEARN MORE</button> </div> </iconic-tip> <iconic-tip position="left" name="tip-left" delay="100">I am displayed to the left</iconic-tip> <iconic-tip position="below" name="tip-below" delay="100">I am displayed below</iconic-tip> <iconic-tip position="right" name="tip-right" delay="100">I am displayed to the right</iconic-tip> <br> <div class="row"> <div class="twelve columns"> <h3>Attributes</h3> <div class="attributes"> <ul> <li> <h5><span>position</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>specify the position to the element at which the iconic-tip should appear</p></li> <li><label>Value</label> <p>above | right | below | left</p></li> <li><label>Default</label> <p>none</p></li> </ul> </li> </ul> </div> </div> </div> </div> </article> <hr> <a id="iconic-menu"></a> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <iconic-dropdown> <yield to="trigger"> Show Things </yield> <yield to="links"> <a href="#">Thing 1</a> <a href="#">Thing 2</a> <a href="#">Thing 3</a> </yield> </iconic-dropdown> <h1 class="tag">iconic <em>menu</em></h1> <blockquote><i class="icon-tip icon"></i> iconic-<em>menu</em> is a left-right hover menu styled consistently with iconic-tip. </blockquote> </div> </div> <div class="row"> <h5>Menu displays on-hover</h5> </div> <div class="row u-pad-below"> <div class="five columns"> <h6>Display to right</h6> <input tab-index="9" name="beforeFocal" value="tI9"><br> <input tab-index="10" name="focal" data-menu="menu-input" data-menu-show="focus" data-menu-hide="blur" value="Give Me Focus (tI10)"><br> <input tab-index="11" name="afterFocal" value="tI11"> </div> <div class="five columns"> <h6>Display to right</h6> <button class="button-small" data-menu="menu-left" data-menu-show="click" data-menu-hide="click">Click me</button> </div> <div class="two columns"> <h6>Display to left</h6> <button class="button-small" data-menu="menu-left">Hover</button> </div> </div> <div class="row u-pad-below"> <h6>Tiny Trigger Positioning</h6> <div class="u-cf" style="display: block; position: relative; border: 1px dashed #222; height: 20rem;"> <div class="u-cf" style="position: absolute; display: block; right: 5.5rem; top: 3.5rem;"> <i class="icon-browser" data-menu="menu-left" style="display: block; position: relative; height: 16px;"></i> </div> </div> </div> <iconic-menu name="menu-left" delay="100"><ul> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-browser"></i></iconic-button> First Menu Item</a></li> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-home"></i></iconic-button> Second Menu Item</a></li> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-burger"></i></iconic-button>  Third Menu Item</a></li> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-iconic"></i></iconic-button>  Fourth Menu Item</a></li> </ul></iconic-menu> <iconic-menu name="menu-right" delay="100"><ul> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-browser"></i></iconic-button> First Menu Item</a></li> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-home"></i></iconic-button> Second Menu Item</a></li> <li><a onclick="{ parent.opts.alert }" class="u-nd"><iconic-button class="icon-extra-small icon-inverted navigation-icon button"><i class="icon-burger"></i></iconic-button>  Third Menu Item</a></li> </ul></iconic-menu> <iconic-menu name="menu-input" delay="100"><div class="form"> <select> <option>First Option</option> <option>Second Option</option> <option>Third Option</option> </select> <input type="checkbox"> <input type="text"> </div></iconic-menu> </div> </article> <hr> <a id="iconic-button"></a> <article class="u-pt u-pn"> <div class="container"> <div class="row"> <div class="twelve columns"> <h1 class="tag">iconic <em>button</em></h1> <blockquote><i class="icon-button icon"></i> iconic-<em>button</em> is a standard button but it also responds to hotkey-focused keyboard user interaction. </blockquote> <p> By pressing <code>shift + ctrl</code> outside of a form element, all iconic-<em>button</em>'s will disclose their associated hotkey making it easy for users to learn new ways to interact with your application.</p> </div> </div> <div class="row"> <h5>Hotkey disclosure</h5> <p>Try holding down <code>shift + ctrl</code> to display the hotkey overlay on the <em>add</em> button <iconic-button class="button-primary" hotkey="Nn">+</iconic-button></p> </div> <div class="row u-pad-below"> <div class="six columns"> <h6>Plain text buttons</h6> <iconic-button onclick="{ opts.alert }" hotkey="aA">+</iconic-button> <iconic-button onclick="{ opts.alert }" hotkey="sS">-</iconic-button> <iconic-button onclick="{ opts.alert }" hotkey="tT">×</iconic-button> </div> <div class="six columns"> <h6>Icon font buttons</h6> <iconic-button onclick="{ opts.alert }" hotkey="bB"><i class="icon-browser"></i></iconic-button> <iconic-button onclick="{ opts.alert }" hotkey="hH"><i class="icon-home"></i></iconic-button> <iconic-button onclick="{ opts.alert }" hotkey="lL"><i class="icon-list"></i></iconic-button> </div> </div> <div class="row"> <div class="twelve columns"> <h3>Attributes</h3> <div class="attributes"> <ul> <li> <h5><span>name</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>A unique name by which a containing riot-tag can reference the iconic-button<br><code>this.tags.buttonName</code></p></li> <li><label>Value</label> <p>buttonName</p></li> <li><label>Default</label> <p>not named</p></li> </ul> </li> <li> <h5><span>class</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>Control the visual style of the button</p></li> <li><label>Value</label> <p>button-primary | button-inverted | none</p></li> <li><label>Default</label> <p>none</p></li> </ul> </li> <li> <h5><span>hotkey</span><label>attribute</label></h5> <ul> <li><label>Purpose</label> <p>A keyboard character that can be used to trigger the buttons onclick event</p></li> <li><label>Value</label> <p>a..z, 0..9</p></li> <li><label>Default</label> <p>none</p></li> <li><label>More Info</label> <p>By holding the <code>shift + ctrl</code> key all <b>iconic-button</b>'s with assigned hotkey's will transform to show their hotkey</p></li> </ul> </li> </ul> </div> </div> </div> </div> </article>  <iconic-footer product="Iconic"> <ul> <li><a href="#privacy-statement" class="u-nd">Privacy Statement</a></li> <li><a href="#terms-of-use" class="u-nd">Terms of Use</a></li> <li><a href="http://starve.me" target="_blank" class="u-nd">Starveling CSS</a></li> </ul> </iconic-footer> </iconic> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.15/riot+compiler.min.js"></script> <script src="../node_modules/classlist-polyfill/src/index.js"></script> <script src="./computedStyleHelper.js"></script> <script src="../anycode-components.js"></script> <script> riot.mixin('computedStyleHelper', { Style: Style }); riot.mount('iconic', { burgerIcon: "icon-burger", navigationAutomatic: function() { this.nav.classList.add("auto") this.nav.classList.add("fixed-left") }, navigationManual: function() { this.nav.classList.remove("auto") }, showWarning: function() { this.tags.warning.show(6000) }, showManual: function() { this.tags.manual.show() }, showAnnouncement: function() { this.tags.announcement.show(2000) }, alert: function(e) { console.log("YOU CLICKED", e.target.innerText); } }) </script> </body> </html>