apancutt/bsutils

JavaScript utilities for use with Twitter Bootstrap.

v0.0.2 2015-10-30 07:50 UTC

MIT

• Adam Pancutt

• bootstrap
• JS

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

Name	Type	Default	Description
container	HTMLElement	document.body	Container for generated version sniffer element.
tag	string	DIV	HTML element tag for generated version sniffer element.

Methods

get()

string

Returns the Twitter Bootstrap version.

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

Name	Type	Default	Description
container	HTMLElement	document.body	Container for generated viewport sniffer elements.
tag	string	DIV	HTML element tag for generated viewport sniffer elements.

Methods

all()	array	Returns all known viewports.
get()	string	Returns the current viewport.
is(string viewport)	boolean	Returns true if current viewport matches viewport.
lt(string viewport)	boolean	Returns true if current viewport is less than viewport.
lte(string viewport)	boolean	Returns true if current viewport is less than or equal to viewport.
gt(string viewport)	boolean	Returns true if current viewport is greater than viewport.
gte(string viewport)	boolean	Returns true if current viewport is greater than or equal to viewport.

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"