Giter Club home page Giter Club logo

bootstrap.native's Introduction

Native Javascript for Bootstrap

This is a set of scripts developed with native Javascript for Bootstrap 3 series, and featuring superior performance compared to the original jQuery Plugins. Thanks to Ingwie Phoenix for contributing with npm/RequireJS/CommonJS compatibility. See demo for scripting examples and instructions.

CDN

New releases will be available automatically on jsdelivr CDN repositories here.

Bower and NPM

You can install this package by using either Bower or NPM.

$ npm install --save bootstrap.native
# Or
$ bower install --save bootstrap.native

Subsystem compatibility

bootstrap.native is compatible with the CommonJS/RequireJS spec (exporting itself to module.exports). It thus can fall back to adding its exports to the window object.

Usage

You can use the scripts either using a traditional script-tag like so:

<!-- Using a CDN -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/0.9.6/bootstrap-native.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/bootstrap.native.min.js"></script>
<!-- Or using Bower? -->
<script type="text/javascript" src="/bower_components/bootstrap.native/dist/bootstrap-native.min.js"></script>

But it's also possible to use any module loader that supports the RequireJS or CommonJS syntax. An example is RequireJS itself:

<script type="text/javascript">
    var bsn = require("bootstrap.native");
    // Create a button:
    var btn = new bsn.Button(...);
</script>

If you are working in a virtual browser environment, the properties of the returned exports are all functions, that expect both, a global window and a global document variable to exist before calling. An example case is during tests, where you may use NodeJS to run front-end tests. These usually will create a virtual Window and Document object. Once these exist, bootstrap.native will function properly.

An example of this would look like this:

var bsn = require("bootstrap.native");
var browser = require("mock-browser");
global.window = browser.createWindow();
global.document = browser.createDocument();

// Now it's safe to use bootstrap.native and expecting the properties to be the actual component classes.
var Button = btn.Button(); // Create the button class and return it.

var $btn = document.createElement("button");
var myButton = new Button(... $btn and options ...); // Create a button and do a test.

Note About the Factory Methods

As mentioned above, the object properties of the exported object, when using require(), are actual classes when document and window are given - in which case we are sure to be facing an actual browser - and if absent, will be factory methods.

So when using bootstrap.native inside of a NodeJS app, make sure you create a proper Browser-like environment first to avoid unexpected behaviour.

Browser Support

The scripts are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills IE8-IE9 will thank you.

Custom Builds

You can clone the repository, install gulp and run gulp --ignore component,... ex: gulp --ignore carousel,scrollspy

Contributors

  • Ingwie Phoenix: RequireJS/CommonJS compatibility and usability with common package managers. Was glad to help!
  • Full contributors list here. Thanks so much!

License

The scripts are released under the MIT license.

bootstrap.native's People

Contributors

alexwilson avatar hellogravity avatar janpanschab avatar malexdev avatar paulbgd avatar soda0289 avatar thednp avatar troyk avatar zandaqo avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.