README

JavaScript utilities for use with Twitter Bootstrap.

Requirements

• Twitter Bootstrap 3.0+

Installation

Ensure bsutils-core.min.js is included at the bottom of your page then initalize a new BsUtils instance:

    <!-- ... -->

    <script src="bsutils-core.min.js"></script>

    <script>
        (function() {

            var bsutils = new BsUtils();
            // ...

        }) ();
    </script>

  </body>
</html>

Modules

Out-of-the-box, bsutils doesn't do much. The juice comes from modules. You'll need to manually include the module(s) you required into your page in order to use them.

<script src="bsutils-core.min.js"></script>
<script src="bsutils-module-mymodule.min.js"></script>

<script>
    (function() {

        var bsutils = new BsUtils({
            mymodule_options = {}
        });

        var mymodule = bsutils.module("mymodule"); // Will be initialized with mymodule_options

        // ...

    }) ();
</script>

version Detect Bootstrap CSS version

Support for this functionality is currently not provided by Bootstrap so you will need to compile your own Bootstrap LESS/SASS files for it to work.

LESS Installation

In variables.less add:

@version: "3.3.1"; // Replace with the version that you are using

In utilities.less add:

.bootstrap-version {
  &:extend(.hidden);
  &:after {
    content: $version
  }
}

SCSS Installation

In _variables.scss add:

$version: "3.3.1"; // Replace with the version that you are using

In _utilities.scss add:

.bootstrap-version {
  @extend .hidden;
  &:after {
    content: $version
  }
}

Options

Methods

Examples

var bsutils = new BsUtils();

// Get the Bootstrap version (e.g. "3.3.1")
console.log(bsutils.module("version").get());

viewport Detect the active viewport

Options

Methods

Examples

var bsutils = new BsUtils();

// Get the current viewport (e.g. "xs", "md", etc.)
console.log(bsutils.module("viewport").get());

// Test the current viewport
console.log(bsutils.module("viewport").is("xs")); // TRUE only if current viewport is "xs"
console.log(bsutils.module("viewport").lt("md")); // TRUE only if current viewport is "xs" or "sm"
console.log(bsutils.module("viewport").lte("md")); // TRUE only if current viewport is "xs" or "sm" or "md"
console.log(bsutils.module("viewport").gt("md")); // TRUE only if current viewport is "lg"
console.log(bsutils.module("viewport").gte("md")); // TRUE only if current viewport is "lg" or "md"