rogue

An un-opinionated, lightweight library for super fast web apps

Rogue

Rogue is an extremely flexible and lightweight library of fast, un-opinionated modules that make building web apps a breeze. The modules and tools in this library do NOT make any assumptions about how you want to use them and only provides javascript logic that is necessary to save you time and then gets out of your way.

This library is built using native vanilla javascript. This means things will process a lot faster than other front-end libraries like jQuery and Dojo and contain a lot less bloat. It also supports IE9+ and all modern browsers (including mobile).

You can use NPM's npm install, Bower's bower install to install this project, or use the built files directly with any module loader of your choosing.

The source files all use Browserify and the CommonJS format, so feel free to add to your browserify bundle.

RequireJS can be used by simple requiring any of the the built modules in your require definition, like so:

require(['path/to/built/rogue/module/file'], function (Module) {
    // use Module variable here 
});

You can also use any of the the built modules in a script tag:

<script src="path/to/built/rogue/module.js" async="true" />

Documentation can be found here.

Detailed usage and specific examples can be found in the Examples.

Create a carousel based off of a set of predetermined markup. Assuming, you have your html in the DOM and CSS set up correctly. You can do:

var carousel = new Carousel({
    panels: document.getElementsByClassName('carousel-panel'),
    thumbnails: document.getElementsByClassName('carousel-thumbnail')
});
 
carousel.goTo(1); // go to second carousel item 

Details on how to create a carousel can be found here.

Create one or more modals with a few lines of javascript. With your html and css setup correctly, you can do:

var modal = new Modal({
    el: $('<div class="my-modal">My Modal Content</div>')[0],
    containerEl: $('modals-container')[0],
    activeClass: 'modal-active'
});
 
modal.setup(); // inject the modal's html into the modal container 
modal.show(); // show the modal 
modal.hide(); // hide the modal 
 

A more advanced example of how to create a modal can be found here.

To contribute to Rogue, check out the Contributing readme.

  • 2015-24-01   v3.2.0   New TabView.
  • 2015-03-01   v2.6.0   New Event Manager (as of 3.2.0, Event Manager has been moved as a standalone package under the new name of Event Handler.
  • 2014-12-29   v2.2.0   New Carousel.
  • 2014-07-12   v2.1.0   Official release.