flexi-js
Version:
A responsive and flexible css scheme.
231 lines (210 loc) • 7.09 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Flexi</title>
<link rel="stylesheet" type="text/css" href="../build/css/all.css">
<link rel="stylesheet" type="text/css" href="css/flexi-js-debug.css">
<style>
code {
display: block;
}
</style>
<!-- shim for loading -->
<script>
window.module = {};
</script>
<script src="./flexi.js"></script>
<script>
window.addEventListener('load', module.exports);
// some extra junk for the example only..
var resizer = () => {
let w = window;
let x = w.innerWidth;
let y = w.innerHeight;
document.getElementById('debug').innerHTML = '' + x + 'x' + y;
};
window.addEventListener('resize', resizer);
window.addEventListener('load', resizer);
</script>
</head>
<body>
<div id="debug"></div>
<p>Welcome.. this serves as a really crappy sample page for the various
features. One day i'll come back to this and make it purdy.
</p>
<section>
<h1>flexi</h1>
<description>
<p>
Flexi gives you flexible column controls, similar to bootstrap, except
with more control over vertical alignment, flow-over, responsive reordering,
and more. @TODO
</description>
<div class="flexi collapse-xs collapse-sm">
<div class="xs-visible sm-visible xs-pos-0 sm-pos-0">
Menu
</div>
<div class="lg-6">
A
</div>
<div class="lg-12">
<divs class="flexi">
<div class="xs-6">
A1
</div>
<div class="xs-6">
A2
</div>
</divs>
</div>
<div class="lg-12">
C
</div>
<div class="lg-4 md-pos-0">
D
</div>
<div class="lg-8 sm-pos-0 sm-hidden">
E
</div>
<div class="md-visible">
F
</div>
</div>
</section>
<br><hr><br>
<section>
<h1>shift / push / squish</h1>
<description>
<p>These give you the ability to offset columns.
<ul>
<li>Shifting adds leading space
<li>Pushing adds trailing space.
<li>Squish adds leading AND trailing (both of the above).
</ul>
<ul>
<li>
<code>{breakpoint}-shift-{x}</code>
<code>{breakpoint}-push-{x}</code>
<code>{breakpoint}-squish-{x}</code>
<ul>
<li>Example: <code>md-shift-12</code> would add a 50 margin-left at the MD breakpoint only</li>
<li>this does NOT cascade, and only applies to the targeted breakpoint</li>
<li>breakpoint specific shift/push/squish will always trump non specified.</li>
</ul>
</li>
<li>
<code>shift-{x}</code>
<code>push-{x}</code>
<code>squish-{x}</code>
<ul>
<li><code>shift-12</code> would add a 50% margin-left for ALL breakpoints</li>
<li>this DOES cascade to everybreakpoint, unless overriden.</li>
</ul>
</li>
</ul>
</description>
<sample>
<div class="flexi">
<div class="xs-shift-1 sm-shift-1 md-shift-1 xl-shift-1 xxl-shift-1"><p>all specified, except for lg<p>xs-shift-1 sm-shift-1 md-shift-1 xl-shift-1 xxl-shift-1</div>
<div class="shift-4 push-4">
<p>set a shift & push to center an element to use the remaining space</p>
<p>shift-4 push-4</p>
</div>
<div class="shift-12">.shift-12</div>
<div class="shift-8 md-shift-16">shift-8 md-shift-16</div>
<div class="squish-4"><p>squish-4</div>
<div class="xs-push-2 xs-20 xs-shift-2 sm-24"><p>full width, unless at XS size<p>xs-push-2 xs-20 xs-shift-2 sm-24</div>
<div>new line</div>
<div class="xs-4 push-8">xs-4, push-8</div><div class="xs-12"><p>and a gap beside this appears</p></div>
<div class="shift-12 lg-shift-0">
<p>set a common shift, but remove for one breakpoint</p>
<p>shift-12 lg-shift-0</p>
</div>
<div class="shift-4 xs-16">
<p>A more traditional example, centered box</p>
<p>shift-4 xs-16
</div>
</div>
<p>v-align</p>
<div class="flexi valign-bottom">
<div class="xs-6"><p>line 1<p>line 2</div>
<div class="xs-18">bottom aligned</div>
</div>
</sample>
</section>
<br><hr><br>
<section>
<h1>modal</h1>
<description>
<p>gives us the ability to define a domNode as modal - with a simple to use
triggering system
</p>
<ol>
<li>Define an element as modal by adding a `modal` class:
<code><div class="modal"></code>
<ul>
<li>You may need to add an `id` or, ensure that this can be uniquely identified
via a `document.querySelectorAll` (like jquery)
<li>They are hidden by default
</ul>
<li>Attach your show/hide/toggle somewhere, or to something...
<ul>
<li>Create a `hard` trigger with a dom node:<code><a href="#" data-modal-[show/hide/toggle]="#id_or_query_string">Click here</a></code>
<ul><li>If using the above, and you embed the button inside the modal, there is no need to define the value of the data-modal[show/hide/toggle], as it will automatically find the closest modal ancestor:<code><a href="#" data-modal-hide>Click here to hide</a></code></ul>
<li>Trigger in JS<code>document.getElementById('show_my_modal').addEventListener('click', function() { modal('#id_or_query_string', 'show');});</code>
<ul><li>The above wasnt tested, but you get the picture</li></ul>
<li>trigger manually with an inline onclick event<code><span onclick="modal('#id_or_query_string', ['show'/'hide'/'toggle'])">Click here</span></code>
<ul>
<li>this is not a recommended way, but it does work
<li>unlike the above, you must specify the query selector
</ul>
</ul>
</li>
</ol>
</description>
<sample>
<a href="#" data-modal-show="#id_or_query_string">Click Here</a>
or
<a href="#" data-modal-toggle="#id_or_query_string">Toggle</a>
<div id="id_or_query_string" class="modal">
<div class="squish-4 xs-squish-0" style="background:orange;border:5px solid green;">
<p>how shoudl this be positioned?</p>
<h1>MODAL!!!</h1>
<p>I'm in a modal container...
<p>Put whatever you want in here
<p>
<a href="#" data-modal-hide>Click here to hide</a>
</p>
<p><button onclick="modal('#id_or_query_string', 'hide')">or click here to hide</button></p>
</div>
</div>
</sample>
</section>
<hr>
<h1>.container</h1>
<div class="container" style="background-color: pink; padding: 25px;">
<p>this should max out at `$container-size` (1200px), then center itself automatically
</div>
<hr>
<h1>Headers: h1, h2, h3, h4, h5, h6</h1>
<h1 class="xs-h5 sm-h4 md-h3 lg-h2 xl-h1">
h1 - shrink to xs-5
</h1>
<h2 class="xs-h5 sm-h5">
h2 - 5 @ xs and sm
</h2>
<h3>
h3
</h3>
<h4>
h4
</h4>
<h5>
h5
</h5>
<h6>
h6
</h6>
Normal font
</body>