Sign upLogin

getninjas/dhalsim-js

View on GitHub
Star
index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">

<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>Dhalsim media query on JS</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/themes/prism.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/plugins/line-numbers/prism-line-numbers.css"
    data-noprefix />
  <link href="demo.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/prism.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/plugins/line-numbers/prism-line-numbers.js"></script>
  <script src="./dist/dhalsim.min.js"></script>
</head>

<body>
  <h1>Dhalsim</h1>
  <br>
  <div class="title">
    <h3>To use this module, you need to js files from the "dist/" folder</h3>
  </div>
  <br>

  <div class="title">
    <h3>Breakpoints</h3>
  </div>
  <pre>
    <code class="language-javascript line-numbers">dhalsim.init();
    dhalsim.isMobile();
    // use breakpoint < 768px

    dhalsim.isTablet();
    // use breakpoint >= 768px

    dhalsim.isDesktop();
    // use breakpoint >= 960px

    dhalsim.isWide();
    // use breakpoint >= 1200px

    dhalsim.beyondTablet();
    // use >= 900px || >= 1200px

    dhalsim.beyondMobile();
    // use >= 768px || (>= 900px || >= 1200px)</code></pre>
  <br>
  <div class="title">
    <h3>Global</h3>
  </div>

  <pre>
    <code class="language-javascript line-numbers">var dhalsim = new window.dhalsim.default();
    dhalsim.init();

    dhalsim.isMobile();</code></pre>
  <br>

  <div class="title">
    <h3>Init (ES6)</h3>
  </div>

  <pre>
  <code class="language-javascript line-numbers">import dhalsim from 'dhalsim-js';

  const dhalsim = new Dhalsim();
  dhalsim.init();

  dhalsim.isMobile();</code></pre>
  <br>

  <div class="title">
    <h3>Init (CommonJs)</h3>
  </div>

  <pre>
    <code class="language-javascript line-numbers">var Dhalsim = require('dhalsim-js');

    const dhalsim = new Dhalsim();
    dhalsim.init();

    dhalsim.isMobile();</code></pre>

    <br>
  <div class="title">
    <h3>Init (AMD)</h3>
  </div>

  <pre>
    <code class="language-javascript line-numbers">define(['dhalsim-js'], function(Dhalsim){
      var dhalsim = new Dhalsim();
      dhalsim.init();

      dhalsim.isMobile();
    });</code></pre>
</body>

</html>