ab-mediaquery
Version:
AB-mediaQuery is the JavaScript side of media queries. It proposes you some very useful methods for your scripts
68 lines (60 loc) • 2.47 kB
HTML
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AB-mediaQuery example</title>
<link rel="stylesheet" href="styles.css">
<script defer src="../index.js"></script>
<script defer src="example.js"></script>
</head>
<body class="helvetica h-100">
<div class="mw8 center flex flex-column h-100">
<header class="pa2 pa4-ns bg-dark-blue flex-ns items-center justify-between">
<h1 class="white ma0">AB-mediaQuery</h1>
<p class="lightest-blue">
Demonstration page, details on <a class="b link no-underline underline-hover pink" href="https://github.com/lordfpx/AB-mediaQuery">GitHub</a>
</p>
</header>
<main>
<div class="pa2 pa4-ns bg-lightest-blue">
<p>
AB-mediaQuery is the JavaScript side of CSS Media Queries. It's a very simple, yet convenient tool for your developments.
</p>
</div>
<div class="demo-wrapper pa2 pa4-ns">
<h2 class="dark-pink">Informations</h2>
<p>AB-mediaQuery is initilized with:</p>
<pre><code class="language-javascript">
AB.plugins.mediaQuery({
bp: {
smallOnly: 'screen and (max-width: 767px)',
mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
medium: 'screen and (min-width: 768px)',
largeOnly: 'screen and (min-width: 1025px) and (max-width: 1280px)',
large: 'screen and (min-width: 1025px)'
}
});
</code></pre>
<p>Get current valid break points:</p>
<pre><code class="language-javascript">console.log(AB.mediaQuery.current);</code></pre>
<p>Condition your JS on break points:</p>
<pre><code class="language-javascript">
if (AB.mediaQuery.is('smallOnly')) {
// true if media query is 'screen and (max-width: 767px)'
}
</code></pre>
<h2 class="dark-pink">Example</h2>
<p>Here are some outputs that can be used on JavaScript side (resize window to see changes). You can also check your browser console:</p>
<div class="js-mediaquery"></div>
</div>
</main>
<footer class="pa2 pa4-ns bg-dark-blue">
<p class="lightest-blue tc">
© 2019, Thierry Philippe (<a class="b link pink no-underline underline-hover" href="https://twitter.com/lordfpx">@lordfpx</a>)
</p>
</footer>
</div>
</body>
</html>