FacadeSelect

Description

A lightweight custom select dropdown.

Prerequisites

• Sass: This module contains a .scss file that needs to be imported and compiled with your other scss partials.
• ES6: This module uses ES6 javascript and requires that the user imports the main file to be compiled into javascript.
• jQuery

Example

Codepen

Usage

Javascript Import:

import FacadeSelect from 'facade-select';

Javascript Usage:

It will automatically apply to any select container with a class of select-facade. Applied defaults will be a 1024 breakpoint and false for skipFirst. If you want to apply different options per select container, you can do the following:

jQuery(document).ready(function() {
    new FacadeSelect(
        [
            { container: '.my-select-container', breakpoint: 1024, skipFirst: false },
            { container: '.my-select-container-2', breakpoint: 1200, skipFirst: true },
        ]
    );
});

Sass Import:

@import "~facade-select/dist/facade-select";

The styles will automatically be applied to any container with a class of select-facade. If you want to apply the styles to a different container you can do the following:

Sass Usage:

.my-select-container {
  @include facade-select($width, $height);
}

The facade-select mixin takes width and height parameters.