formstone
Version:
Library of modular front end components.
526 lines (471 loc) • 21.7 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>Grid · 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="grid-demo">Grid Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/grid">View Documentation</a></p>
<!-- START: DEMO -->
<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>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>