formstone
Version:
Library of modular front end components.
194 lines (187 loc) • 17.6 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Raw · Formstone</title>
<!-- Modernizer -->
<script src="../../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="raw">Raw</h1>
<script>
$(function() {
$(".js-demo_carousel").carousel({
theme: ""
});
$(".js-demo_checkbox").checkbox({
theme: ""
});
$(".js-demo_dropdown").dropdown({
theme: ""
});
$(".js-demo_number").number({
theme: ""
});
$(".js-demo_pagination").pagination({
theme: ""
});
$(".js-demo_range").range({
theme: ""
});
$(".js-demo_scrollbar").scrollbar({
theme: ""
});
$(".js-demo_tabs").tabs({
theme: ""
});
$(".js-demo_tooltip").tooltip({
theme: ""
});
$(".js-demo_upload").upload({
theme: ""
});
});
</script>
<!-- CAROUSEL -->
<div class="js-demo_carousel" data-carousel-options='{"show":{"740px":3}}'>
<div> <img src="http://spacehold.it/400x400/1.jpg" alt="" style="width: 100%;"> </div>
<div> <img src="http://spacehold.it/400x400/2.jpg" alt="" style="width: 100%;"> </div>
<div> <img src="http://spacehold.it/400x400/3.jpg" alt="" style="width: 100%;"> </div>
<div> <img src="http://spacehold.it/400x400/4.jpg" alt="" style="width: 100%;"> </div>
<div> <img src="http://spacehold.it/400x400/5.jpg" alt="" style="width: 100%;"> </div>
</div>
<!-- END: CAROUSEL -->
<!-- CHECKBOX -->
<div class="fs-row">
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third">
<h4>Checkbox</h4>
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset"> <input type="checkbox" value="1" id="checkbox-1" name="checkbox-1" class="js-demo_checkbox" checked> <label for="checkbox-1">One</label> </fieldset>
<fieldset class="form_fieldset"> <label for="checkbox-2"> <input type="checkbox" value="2" id="checkbox-2" name="checkbox-2" class="js-demo_checkbox"> Two </label> </fieldset>
<fieldset class="form_fieldset"> <input type="checkbox" value="3" id="checkbox-3" name="checkbox-3" class="js-demo_checkbox" disabled> <label for="checkbox-3">Three</label> </fieldset>
<fieldset class="form_fieldset"> <label> <span> <input type="checkbox" value="4" id="checkbox-4" name="checkbox-4" class="js-demo_checkbox" checked readonly> Four </span> </label> </fieldset>
</form>
</div>
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third">
<h4>Radio</h4>
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset"> <input type="radio" value="1" id="radio-1" name="radio-group" class="js-demo_checkbox" checked> <label for="radio-1">One</label> </fieldset>
<fieldset class="form_fieldset"> <label for="radio-2"> <input type="radio" value="2" id="radio-2" name="radio-group" class="js-demo_checkbox"> Two </label> </fieldset>
<fieldset class="form_fieldset"> <input type="radio" value="3" id="radio-3" name="radio-group" class="js-demo_checkbox" disabled> <label for="radio-3">Three</label> </fieldset>
<fieldset class="form_fieldset"> <label> <span> <input type="radio" value="4" id="radio-4" name="radio-group" class="js-demo_checkbox" checked readonly> Four </span> </label> </fieldset>
</form>
</div>
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third">
<h4>Toggle</h4>
<form action="#" method="GET" class="form demo_form">
<fieldset class="form_fieldset"> <input type="checkbox" value="One" id="toggle-1" name="toggle-1" class="js-demo_checkbox" data-checkbox-options='{"toggle":true}' checked> <label for="toggle-1">One</label> </fieldset>
<fieldset class="form_fieldset"> <input type="checkbox" value="Two" id="toggle-2" name="toggle-2" class="js-demo_checkbox" data-checkbox-options='{"toggle":true}'> <label for="toggle-2">Two</label> </fieldset>
<fieldset class="form_fieldset"> <input type="checkbox" value="Three" id="toggle-3" name="toggle-3" class="js-demo_checkbox" data-checkbox-options='{"toggle":true}' disabled> <label for="toggle-3">Three</label> </fieldset>
</form>
</div>
</div>
<!-- END: CHECKBOX -->
<!-- DROPDOWN -->
<form action="#" method="GET" class="form demo_form">
<div class="fs-row">
<div class="fs-cell fs-sm-full fs-md-half fs-lg-half">
<h4>Basic</h4>
<fieldset class="form_fieldset"> <label for="demo_basic" class="form_label">Label</label> <select name="demo_basic" id="demo_basic" class="js-demo_dropdown"> <option data-label="Option One">One</option> <option data-label="Option Two">Two</option> </select> </fieldset>
<h4>Option Groups</h4>
<fieldset class="form_fieldset"> <label for="demo_groups" class="form_label">Label</label> <select name="demo_groups" id="demo_groups" class="js-demo_dropdown"> <optgroup label="Group One"> <option value="1">One</option> <option value="2" disabled>Two</option> <option value="3">Three</option> </optgroup> <optgroup label="Group One"> <option value="4">Four</option> <option value="5">Five</option> <option value="6" disabled>Six</option> <option value="7">Seven</option> </optgroup> <optgroup label="Group Three"> <option value="8">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> </optgroup> </select> </fieldset>
<h4>Default Label</h4>
<fieldset class="form_fieldset"> <label for="demo_label" class="form_label">Label</label> <select name="demo_label" id="demo_label" class="js-demo_dropdown" data-dropdown-options='{"label":"Select A State"}' disabled> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX"> Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </fieldset>
</div>
<div class="fs-cell fs-sm-full fs-md-half fs-lg-half">
<h4>Multiple</h4>
<fieldset class="form_fieldset"> <label for="demo_multiple" class="form_label">Label</label> <select name="demo_multiple" id="demo_multiple" class="js-demo_dropdown" multiple> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> <option value="11">Eleven</option> <option value="12">Twelve</option> <option value="13">Thirteen</option> </select> </fieldset>
</div>
</div>
</form>
<!-- END: DROPDOWN -->
<!-- NUMBER -->
<fieldset class="form_fieldset"> <input type="number" class="form_input js-demo_number"></fieldset>
<fieldset class="form_fieldset"> <input type="number" class="form_input js-demo_number" disabled></fieldset>
<!-- END: NUMBER -->
<!-- PAGINATION -->
<nav class="js-demo_pagination"> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></nav>
<!-- END: PAGINATION -->
<!-- RANGE -->
<fieldset class="form_fieldset"> <input type="range" class="form_input js-demo_range"></fieldset>
<!-- END: RANGE -->
<!-- SCROLLBAR -->
<div class="js-demo_scrollbar" style="height: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet vel,
rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat massa, lacinia
adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.</p>
<p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc consequat
scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>
<p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam vulputate
mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>
<p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam ac erat
imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus porta consequat.
Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.</p>
<p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac, suscipit
sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien justo et ligula.
Proin vestibulum blandit fringilla. </p>
</div>
<!-- END: SCROLLBAR --><br>
<!-- TABS -->
<nav class="tabs clear clearfix" style="overflow: hidden;"> <a href="#tab-1-1" class="tab js-demo_tabs" data-tabs-group="tab-1">One</a> <a href="#tab-1-2" class="tab js-demo_tabs" data-tabs-group="tab-1" data-tabs-active="true">Two</a> <a href="#tab-1-3" class="tab js-demo_tabs" data-tabs-group="tab-1">Three</a></nav>
<div
class="tab_content" id="tab-1-1">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<div class="tab_content" id="tab-1-2">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</p>
</div>
<div class="tab_content" id="tab-1-3">
<p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<!-- END: TABS -->
<!-- TOOLTIP -->
<div class="tooltips">
<div class="js-demo_tooltip" data-title="Left Tooltip" data-tooltip-options='{"direction":"left"}'>Left</div>
<div class="js-demo_tooltip" data-title="Right Tooltip" data-tooltip-options='{"direction":"right"}'>Right</div>
<div class="js-demo_tooltip" data-title="Top Tooltip" data-tooltip-options='{"direction":"top"}'>Top</div>
<div class="js-demo_tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom"}'>Bottom</div>
</div>
<!-- END: TOOLTIP -->
<!-- UPLOAD -->
<form action="#" method="GET" class="form demo_form">
<div class="js-demo_upload" data-upload-options='{"action":"../extra/upload-target.php"}'></div>
</form>
<!-- END: UPLOAD -->
<div class="footer">
<div class="copyright">
<div>© undefined <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>