formstone
Version:
Library of modular front end components.
430 lines (385 loc) • 12 kB
HTML
<script>
Formstone.Ready(function() {
var $body = $("body");
$gridSelect = $("#grid_select").on("change", function() {
var $target = $(this),
type = $target.val();
$body.removeClass("fs-grid-fluid fs-grid-adaptive")
.addClass(type);
});
});
</script>
<form action="#" method="GET" class="fs-row form demo_form">
<fieldset class="fs-cell fs-lg-third form_fieldset">
<label class="form_label" for="grid_select">Select Grid Type</label>
<select class="js-dropdown" name="grid_select" id="grid_select">
<option value="__grid-base">Base Grid</option>
<option value="fs-grid-adaptive">Full Adaptive Grid</option>
<option value="fs-grid-fluid">Full Fluid Grid</option>
</select>
</fieldset>
</form>
<!-- Bookmarklet -->
<h4>Bookmarklet</h4>
<p>Drag the bookmarklet to your bookmarks bar.</p>
<a href="javascript:(function(){if(typeof%20FSGridBookmarklet==='undefined'){document.body.appendChild(document.createElement('script')).src='//formstone.it/js/bookmarklet/grid.js';}else{FSGridBookmarklet();}})();" class="button bookmarklet">Formstone Grid</a>
<br class="clear">
<p>Or, include it on every page of your development site:</p>
<pre class="example"><code class="language-markup"><script>
(function(){if(typeof FSGridBookmarklet==='undefined'){document.body.appendChild(document.createElement('script')).src='//formstone.it/js/bookmarklet/grid.js';}else{FSGridBookmarklet();}})();
</script></code></pre>
<script>
(function(){if(typeof FSGridBookmarklet==='undefined'){document.body.appendChild(document.createElement('script')).src='//formstone.it/js/bookmarklet/grid.js';}else{FSGridBookmarklet();}})();
</script>
<br>
<h4>Asymmetrical</h4>
<!-- START: FIRSTDEMO -->
<style>
.button.bookmarklet { clear: both; }
.example { margin: 20px 0; }
.example .fs-row { background: #CFD8DC; border-radius: 2px; padding-top: 1.8%; }
.example [class*="fs-cell"] { background: #455a64; color: #fff; border-radius: 2px; margin-bottom: 1.8%; text-align: center; }
.example .tall { height: 100px; }
.example .highlight { background: #00bcd4; }
.example .nested { background: none; margin-top: 0; margin-bottom: 0; }
.example .nested .fs-row { padding-top: 0; }
.example [class*="label"] { display: block; padding-top: 15px; padding-bottom: 15px; }
/*.example .label,
.example .label_small,
.example .label_medium,
.example .label_large { background: #455a64; }*/
.example .label_small,
.example .label_medium,
.example .label_large { display: none; }
@media screen and (min-width: 0px) and (max-width: 739px) {
.example .label_small { display: block; }
}
@media screen and (min-width: 740px) and (max-width: 979px) {
.example .label_medium { display: block; }
}
@media screen and (min-width: 980px) {
.example .label_large { display: block; }
}
</style>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-sm-1 fs-md-2 fs-lg-4">
<span class="label_small">fs-sm-1</span>
<span class="label_medium">fs-md-2</span>
<span class="label_large">fs-lg-4</span>
</div>
<div class="fs-cell fs-sm-2 fs-md-4 fs-lg-8">
<span class="label_small">fs-sm-2</span>
<span class="label_medium">fs-md-4</span>
<span class="label_large">fs-lg-8</span>
</div>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Symmetrical</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-sm-3 fs-md-3 fs-lg-6">
<span class="label_small">fs-sm-3</span>
<span class="label_medium">fs-md-3</span>
<span class="label_large">fs-lg-6</span>
</div>
<div class="fs-cell fs-sm-3 fs-md-3 fs-lg-6">
<span class="label_small">fs-sm-3</span>
<span class="label_medium">fs-md-3</span>
<span class="label_large">fs-lg-6</span>
</div>
</div>
</div>
<h4>3 Column</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third">
<span class="label">fs-all-third</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">fs-all-third</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">fs-all-third</span>
</div>
</div>
</div>
<h4>Nested</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-md-4 fs-lg-8 nested">
<div class="fs-row">
<div class="fs-cell fs-md-half fs-lg-half">
<span class="label_small">fs-sm-full</span>
<span class="label_medium">fs-md-half</span>
<span class="label_large">fs-lg-half</span>
</div>
<div class="fs-cell fs-md-half fs-lg-half">
<span class="label_small">fs-sm-full</span>
<span class="label_medium">fs-md-half</span>
<span class="label_large">fs-lg-half</span>
</div>
</div>
</div>
<div class="fs-cell fs-md-2 fs-lg-4">
<span class="label_small">fs-sm-full</span>
<span class="label_medium">fs-md-2</span>
<span class="label_large">fs-lg-4</span>
</div>
</div>
</div>
<h4>Push</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-sm-2 fs-sm-push-1 fs-md-3 fs-md-push-3 fs-lg-8 fs-lg-push-4">
<span class="label_small">fs-sm-2 fs-sm-push-1</span>
<span class="label_medium">fs-md-3 fs-md-push-3</span>
<span class="label_large">fs-lg-8 fs-lg-push-4</span>
</div>
</div>
</div>
<h4>Contained</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell-contained fs-all-half">
<span class="label">fs-cell-contained</span>
</div>
<div class="fs-cell-contained fs-all-half">
<span class="label">fs-cell-contained</span>
</div>
</div>
</div>
<h4>Padded</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell-padded fs-all-half">
<span class="label">fs-cell-padded</span>
</div>
<div class="fs-cell-padded fs-all-half">
<span class="label">fs-cell-padded</span>
</div>
</div>
</div>
<h4>Cell Align Start</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-align-start fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third third">
<span class="label">3</span>
</div>
</div>
</div>
<h4>Cell Align Center</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-align-center fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third tall">
<span class="label">3</span>
</div>
</div>
</div>
<h4>Cell Align End</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-align-end fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third tall">
<span class="label">3</span>
</div>
</div>
</div>
<h4>Cell Justify Start</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third fs-all-justify-start">
<span class="label">1</span>
</div>
</div>
</div>
<h4>Cell Justify Center</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third fs-all-justify-center">
<span class="label">1</span>
</div>
</div>
</div>
<h4>Cell Justify End</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third fs-all-justify-end">
<span class="label">1</span>
</div>
</div>
</div>
<h4>Cell Order First</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third fs-first highlight">
<span class="label">3</span>
</div>
</div>
</div>
<h4>Cell Order Last</h4>
<div class="example">
<div class="fs-row">
<div class="fs-cell fs-all-third fs-last highlight">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">3</span>
</div>
</div>
</div>
<h4>Cell Width Auto</h4>
<div class="example">
<div class="fs-row fs-reverse">
<div class="fs-cell fs-all-auto">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-auto">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-auto">
<span class="label">3</span>
</div>
<div class="fs-cell fs-all-auto">
<span class="label">4</span>
</div>
</div>
</div>
<h4>Row Justify Around</h4>
<div class="example">
<div class="fs-row fs-all-justify-around">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Justify Between</h4>
<div class="example">
<div class="fs-row fs-all-justify-between">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Justify Start</h4>
<div class="example">
<div class="fs-row fs-all-justify-start">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Justify Center</h4>
<div class="example">
<div class="fs-row fs-all-justify-center">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Justify End</h4>
<div class="example">
<div class="fs-row fs-all-justify-end">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Align Start</h4>
<div class="example">
<div class="fs-row fs-all-align-start">
<div class="fs-cell fs-all-half tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-half">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Align Center</h4>
<div class="example">
<div class="fs-row fs-all-align-center">
<div class="fs-cell fs-all-half tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-half">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Align End</h4>
<div class="example">
<div class="fs-row fs-all-align-end">
<div class="fs-cell fs-all-half tall">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-half">
<span class="label">2</span>
</div>
</div>
</div>
<h4>Row Order Reverse</h4>
<div class="example">
<div class="fs-row fs-reverse">
<div class="fs-cell fs-all-third">
<span class="label">1</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">2</span>
</div>
<div class="fs-cell fs-all-third">
<span class="label">3</span>
</div>
</div>
</div>
<div class="fs-row">
<div class="fs-cell fs-all-full">
<div class="fs-row">
<div class="fs-cell fs-all-third fs-contained"><span class="label">1</span></div>
<div class="fs-cell fs-all-third fs-contained"><span class="label">2</span></div>
<div class="fs-cell fs-all-third fs-contained"><span class="label">3</span></div>
</div>
</div>
</div>