formstone
Version:
Library of modular front end components.
247 lines (231 loc) • 13.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>Equalize · 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="equalize-demo">Equalize Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/equalize">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.equalize_target {
background: #CFD8DC;
margin-bottom: 10px;
padding: 15px;
}
.equalize_target p {
margin: 0;
}
.equalize_child {
background: #B0BEC5;
}
.equalize_group {
padding-bottom: 15px;
}
.equalize_two {
font-size: 12px;
font-style: italic;
}
.equalize img {
max-width: 100%;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row equalize js-equalize">
<div class="fs-cell fs-all-third equalize_target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id
elit non mi porta gravida at eget metus.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="equalize">
	<p>Vivamus sagittis lacus.</p>
</div>
<div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div></code></pre>
<pre><code class="language-javascript">$(".equalize").equalize();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Min Width</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row equalize js-equalize" data-equalize-options='{"minWidth":"740px"}'>
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="equalize">
	<p>Vivamus sagittis lacus.</p>
</div>
<div class="equalize">
	<p>Lorem ipsum dolor sit amet.</p>
</div></code></pre>
<pre><code class="language-javascript">$(".equalize").equalize({
minWidth: "740px"
});</code></pre>
</div>
</div>
<h4>Children</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row equalize js-equalize" data-equalize-options='{"target":".equalize_child"}'>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_child">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id
elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="equalize">
	<p class="equalize_child">Lorem ipsum dolor sit amet.</p>
</div>
<div class="equalize">
	<p class="equalize_child">Vivamus sagittis lacus.</p>
</div>
<div class="equalize">
	<p class="equalize_child">Lorem ipsum dolor sit amet.</p>
</div></code></pre>
<pre><code class="language-javascript">$(".equalize").equalize({
target: ".equalize_child"
});</code></pre>
</div>
</div>
<h4>Groups</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row equalize js-equalize" data-equalize-options='{"target":[".equalize_one",".equalize_two"]}'>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_one equalize_group">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="equalize_two">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_one equalize_group">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p class="equalize_two">Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="fs-cell fs-all-third equalize_target">
<p class="equalize_one equalize_group">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id
elit non mi porta gravida at eget metus.</p>
<p class="equalize_two">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="equalize">
	<p class="equalize_1">Lorem ipsum dolor sit amet.</p>
	<small class="equalize_2">Footer Text.</small>
</div>
<div class="equalize">
	<p class="equalize_1">Vivamus sagittis lacus.</p>
	<small class="equalize_2">Footer Text.</small>
</div>
<div class="equalize">
	<p class="equalize_1">Lorem ipsum dolor sit amet.</p>
	<small class="equalize_2">Footer Text.</small>
</div></code></pre>
<pre><code class="language-javascript">$(".equalize").equalize({
target: [
".equalize_1",
".equalize_2"
]
});</code></pre>
</div>
</div>
<h4>Images</h4>
<div class="demo_container">
<div class="demo_example">
<div class="fs-row equalize js-equalize">
<div class="fs-cell fs-all-third equalize_target">
<img src="https://spacehold.it/400x300/1.jpg" alt="">
</div>
<div class="fs-cell fs-all-third equalize_target">
<img src="https://spacehold.it/400x200/2.jpg" alt="">
</div>
<div class="fs-cell fs-all-third equalize_target">
<img src="https://spacehold.it/400x400/3.jpg" alt="">
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="equalize">
	<img src="example.jpg" alt="">
</div>
<div class="equalize">
	<img src="example.jpg" alt="">
</div>
<div class="equalize">
	<img src="example.jpg" alt="">
</div></code></pre>
<pre><code class="language-javascript">$(".equalize").equalize();</code></pre>
</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>