Lone Wolf UI Kit

Important: Bootstrap Plugins

Remember that we use Bootstrap as the base! Extend the functionality of your projects using the plugins that come with Bootstrap, as well as some additional plugins we've decided to feature on our platform products. Make sure you review Bootstrap's JavaScript section that covers all the plugins that come with the framework. We will not be covering the plugins that come with Bootstrap, please refer to their documentation to learn how to use ScrollSpy, Collapse and more!

Bootstrap Plugins (Open in new tab)

Non-Bootstrap Plugins

The remaining items that appear on this page use either fucntioanlity we have baked into our primary JS file; or they use a third party plugin. Items that require JS dependencies are indicated. See the Required JavaScript section for more information.

Selectize.js

Selectize.js is a robust plugin for dynamically changing select and input fields into something more powerful.

View Accessibility Notes

PLUGIN SCRIPTS REQUIRED. At this itme, both the CSS and the JS need to be called in the head of your document.

<!-- selectize.bootstrap3.css -->
<link rel="stylesheet" href="UNIVERSAL URL PENDING SORRY/selectize.bootstrap3.css"/>
<!-- selectize.js -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/selectize.js"></script>

ComboBox (Fancy Select)

Selectize.js transforms a plain select into an Combo Box (text input + dropdown + auto-suggest)—just place a .selectize class on the select element!

Standard Select

Select One:

<!-- ComboBox Select -->
<div class="form-group">
<label for="REPLACE ME" class="control-label">Select a Beast:</label>
<select id="REPLACE ME" class="form-control selectize">
	<option value="coyote">Coyote</option>
	<option value="uni">Unicorn</option>
	...
</select>
</div>

Using Option Grouping

Select One:

<!-- ComboBox Select Using Option Groups -->
<div class="form-group">
<label for="REPLACE ME" class="control-label">Using Option Groups:</label>
<select id="REPLACE ME" class="form-control selectize" placeholder="Select gear...">
	<option value="">Select gear...</option>
	<optgroup label="Climbing">
		<option value="pitons">Pitons</option>
		<option value="cams">Cams</option>
		...
	</optgroup>
	<optgroup label="Skiing">
		<option value="skis">Skis</option>
		<option value="skins">Skins</option>
		...
	</optgroup>
</select>
</div>

Multi-Select (Multiple Tags)

Multi-select elements are text inputs that can hold multiple values (or "tags".) There are two ways to add tags into the input area:

User creates on the fly. A user types their own tags into the input area (use the create: '...' setting).
Provide a dropdown to select from. Use the options: '...' setting to render an array of items as a dropdown that the user can choose from.

You can transform any standard input into a multi-select by initializing customized Selectize.js API on it. The Selectize.js multi-select is fairly robust and comes with alot of options. There are a few examples of this below, however please see Selectize Website and Selectize Documentation for much more in-depth information.

IMPORTANT! Because the multi-selects require custom setup, do not use the .selectize class on them, like you would normally when initializing selectize.js. They require a unique ID to initialize the script with.

Variation 1. Multi-Selects with Create Enabled

Add the .create class to the input and be sure to include create: function(input) {...}, delimiter: '...', and persist: false in your script.

Limited Number of Tags

Use maxItems: # to restrict how many tags can be added.

Type Max Three Tags:

<div class="form-group">
<label for="REPLACE ME" class="control-label">Type Max Three Tags:</label>
<input type="text" id="REPLACE ME" class="form-control create" value="Uno">
</div>
<!-- Create Tags, With Limit Script -->
<script>
Selectize.define('accessibility', function(options){
    var self = this;
    self.setup = (function(){
        var original = self.setup;
        return function(){
            original.apply(self, arguments);
            self.$wrapper.attr({'role': 'application'});
            self.$dropdown.attr({'id': 'REPLACE ME TOO', 'role': 'listbox'});
            self.$control_input.attr({
                'aria-owns'        : 'REPLACE ME TOO',
                'aria-haspopup'    : 'true',
                'role'             : 'combobox',
                'aria-autocomplete': 'list',
                'id' : 'I ALSO SHOULD BE UNIQUE'
            });
        };
    })();
});
$('#REPLACE ME').selectize({
    maxItems: 3,
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    },
    plugins: {'accessibility': {}},
});
</script>

Clear All Tags

Use the clear() event to remove all tags from a multiselect.

Clear The Tags:

<div class="form-group">
<label for="REPLACE ME" class="control-label">Clear The Tags:</label>
<input type="text" id="REPLACE ME" class="form-control create" value="One, Two, Three" >
</div>
<input type="button" value="clear()" id="BUTTON ID" class="btn btn-primary btn-sm btn-raised">

<script>
Selectize.define('accessibility', function(options){
    var self = this;
    self.setup = (function(){
        var original = self.setup;
        return function(){
            original.apply(self, arguments);
            self.$wrapper.attr({'role': 'application'});
            self.$dropdown.attr({'id': 'REPLACE ME TOO', 'role': 'listbox'});
            self.$control_input.attr({
                'aria-owns'        : 'REPLACE ME TOO',
                'aria-haspopup'    : 'true',
                'role'             : 'combobox',
                'aria-autocomplete': 'list',
                'id' : 'I ALSO SHOULD BE UNIQUE'
            });
        };
    })();
});
var $select = $('#REPLACE ME').selectize({
	delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    },
	plugins: {'accessibility': {}},
});

//clear button
var control = $select[0].selectize;
$('#BUTTON ID').on('click', function() {
	control.clear();
});
</script>

Variation 2. Multi-Selects with Options Array

Use options: [...] to build an array of items for the dropdown. The render: {...}, valueField: '...', labelField: '...', and searchField: ['...'] are important here too.

Pssst: Need more vertical space for your multi-select? Check out the expanding class options.

Remove Individual Tags

Selectize.js has a few plugins to extend functionality. Append an "x" remove button to each tag by adding plugins: {'remove_button'} to your script.

Select Up To Three Condos

<div class="form-group">
<label for="REPLACE ME" class="control-label">Select Up To Three Condos</label>
<input type="text" id="REPLACE ME" class="form-control" value="">
</div>
<!-- Select Multi Tags, Expandable Script -->
<script>
Selectize.define('accessibility', function(options){
    var self = this;
    self.setup = (function(){
        var original = self.setup;
        return function(){
            original.apply(self, arguments);
            self.$wrapper.attr({'role': 'application'});
            self.$dropdown.attr({'id': 'REPLACE ME TOO', 'role': 'listbox'});
            self.$control_input.attr({
                'aria-owns'        : 'REPLACE ME TOO',
                'aria-haspopup'    : 'true',
                'role'             : 'combobox',
                'aria-autocomplete': 'list',
                'id': 'I SHOULD ALSO BE UNIQUE'
            });
        };
    })();
});
$('#REPLACE ME').selectize({
	delimiter: ',',
	persist: false,
	maxItems: 3,
    valueField: 'project',
    labelField: 'project',
    searchField: ['project'],
    options: [
        {project: '123 Condos'},
        ...
        {project: '333 Condos'}
    ],
    render: {
        item: function(item, escape) {
            return '<div>' +
                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
            '</div>';
        },
        option: function(item, escape) {
            return '<div role="option" aria-label="' + escape(item.project) + '">' +
                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
            '</div>';
        },
    },
    plugins: {
        'accessibility': { },
        'remove_button': { }
    }
});
</script>

Custom Render Patterns

Specify the markup of both the tag and the dropdown items using render: {...} Notice that this multi-select accepts two option name values: project and name.

Select Up To Three Condos

<div class="form-group">
<label for="REPLACE ME" class="control-label">Select Up To Three Condos</label>
<input type="text" id="REPLACE ME" class="form-control" value="">
</div>
<script>
Selectize.define('accessibility', function(options){
    var self = this;
    self.setup = (function(){
        var original = self.setup;
        return function(){
            original.apply(self, arguments);
            self.$wrapper.attr({'role': 'application'});
            self.$dropdown.attr({'id': 'OH HI REPLACE', 'role': 'listbox'});
            self.$control_input.attr({
                'aria-owns'        : 'OH HI REPLACE',
                'aria-haspopup'    : 'true',
                'role'             : 'combobox',
                'aria-autocomplete': 'list',
                'id': 'I TOTALLY NEED AN ID'
            });
        };
    })();
});
$('#REPLACE ME').selectize({
	delimiter: ',',
	persist: false,
	maxItems: 3,
    valueField: 'project',
    labelField: 'name',
    searchField: ['project', 'name'],
    options: [
        {project: '123 Condos', name: 'The Helix Group'},
        ...
        {project: '1 Young Street', name: 'Tesla Designs'}
    ],
    render: {
    	//tag markup
        item: function(item, escape) {
            return '<div>' +
                (item.project ? '<span class="project"><span class="small"> Condo: </span>' + escape(item.project) + '</span>' : '') +
            '</div>';
        },
        //dropdown item markup
        option: function(item, escape) {
            return '<div role="option" aria-label="' + escape(item.project) + '"><span class="small"><i class="material-icons">location_city</i></span>&nbsp;' +
                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
                (item.name ? '<span class="name">,&nbsp;' + escape(item.name) + '</span>' : '') +
            '</div>';
        },
      },
    plugins: {'accessibility': {}},
    });

</script>

Make An Vertically Expanding Multi-Select

If you require your multi-select input to contain multiple tags and expand a bit to accommodate that, use the .form-group-expand class on the containing .form-group. If you need the .form-group to expand (almost) indefinitely, use .form-group-expand-fully instead. Try out the expanding inputs below to see how this affects elements lower on the page.

Expand Up To 85px

Select As Many As You Like:

<div class="form-group form-group-expand">
...
</div>

Expand Infinitely

Select As Many As You Like:

<div class="form-group form-group-expand-fully">
...
</div>

Yes, Selectize Works With Active/Floating Label

For forms that use the .form-active-labels class, selectize elements will become styled.

PS: What are Active/Floating Labels?

Datepicker.js

We are using this plug-in: Bootstrap Datepicker.
There are several variations on the datepicker for Bootstrap Datepicker, check their Sandbox Developer Tool to configure the Datepicker how ever you require. (Ie: open on month or year, weekends disabled, format, date ranges etc. ) It will generate the proper variables for you automatically.

View Accessibility Notes

PLUGIN SCRIPTS REQUIRED. You will need to call bootstrap-datepicker.js in the head fo yoru document.

<!-- https://github.com/eternicode/bootstrap-datepicker -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/bootstrap-datepicker.js"></script>

Default Input With Datepicker

<fieldset class="form-group">
<label for="REPLACE ME" class="control-label">Select a Date:</label>
<input id="REPLACE ME" class="datepicker form-control" type="text" value="03/12/2016" aria-expanded="false" aria-haspop="true"/>
</fieldset>

Active/Floating Label Input With Datepicker

<form class="form-active-labels">
<div class="form-group">
	<input id="REPLACE ME" class="datepicker form-control" type="text" value="03/12/2016" aria-expanded="false" aria-haspop="true"/>
	<label for="REPLACE ME">With Floating Label</label>
</div>
</form>

Smooth Scroll

Instantly add a smooth scroll to anchor tags on any page using the .smooth-scroll class.

The Smooth Scroll requires LW-universal.js. If you are starting a project from scratch, you can find the file here.

View Accessibility Notes

Oh, Scroll Me

<a href="#REPLACE" class="btn btn-primary btn-raised smooth-scroll" data-focus="REPLACE" role="button">Oh, Scroll Me</a>

Nice Scrollbars

Containers with overflow:scroll should use the .scrollable class to replace default browsers scrollbars. This evokes the SlimScroll.js plug-in.

Place the .scrollable class on a plain container div with no other classes. The container div MUST have a px or % height specified to work properly.

Add depth to your overflowing content inside a scrollable area by adding a .fadeout area immediately after your .scrollable div.

The Nice Scrollbars required files are jquery.slimscroll.min.js and LW-universal.js. If you are starting a project from scratch, you can find the files here and here.

View Accessibility Notes

SlimScroll.js in action!

width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none

height - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px

size - Width in pixels of the scrollbar. Default: 7px

position - left or right. Sets the position of the scrollbar. Default: right

alwaysVisible - Disables scrollbar hide. Default: false

distance - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px

start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.

wheelStep - Integer value for mouse wheel delta. Default: 20

railVisible - Enables scrollbar rail. Default: false

railColor - Sets scrollbar rail color, Default: #333333

railOpacity - Sets scrollbar rail opacity. Default: 0.2

allowPageScroll - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false

scrollTo - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollTo: '50px' });

scrollBy - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollBy: '60px' });

disableFadeOut - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false

touchScrollStep - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200

Scrollable With Fadeout