Toolkit

Extensible front-end HTML, CSS, and JavaScript user interface components for the responsive, mobile, and modern web.
HTML5
CSS3 Sass
JavaScript Gulp
jQuery

Feature rich for modern applications.

Engineered for both developers and designers.

  • Mobile First

    Optimized for mobile and touch devices by designated them as first-class priorities.

  • Responsive Design

    Fluid by design to work seamlessly in all resolutions. No more pixel perfect designs — unless that's your thing.

  • Semantic Markup

    Structured using semantically valid HTML tags to relay information alongside presentation.

  • Flexible Styles

    Provides no visual CSS styles allowing for easier integration and customization. No more tedious style overriding!

  • Accelerated Animations

    Improves animations and transitions with CSS3 and the GPU. Older browsers will fall back to simple display toggling.

  • Extensible Configuration

    Encourages a configuration over convention approach. Customizable options, templates, builds, and more.

  • Scalable Spacing

    Fonts, margins, and padding scaled with em and rem measurements. Eases responsive rendering.

  • Reusable Code

    Easier code re-use through the CSS block-element-modifier (BEM) methodology, and an advanced JavaScript component system.

  • Progressive Enhancement

    Enables shiny new features if a users device supports it. Further increases accessibility and portability.

  • Graceful Degradation

    Increases adaptability of legacy browsers by disabling or removing advanced features and providing bare bones functionality.

  • Stable Codebase

    Tested in a wide array of browsers, operating systems, and devices. Primed and ready for the modern age.

Powerful user interface components.

Continually growing with every release.

Layout

Helper classes, mixins, functions, and visual styles for built-in HTML tags.

  • Normalize
  • Base
  • Typography
  • Form
  • Code
  • Responsive
Elements

Common user interface concepts packaged as static HTML elements.

  • Breadcrumb
  • Button
  • Button Group
  • Divider
  • Grid
  • Icon
  • Input Group
  • Label
  • Loader
  • Notice
  • Pagination
  • Progress
  • Step
  • Switch
  • Table
Modules

Element components empowered with JavaScript for advanced functionality.

  • Accordion JS
  • Blackout JS
  • Carousel JS
  • Drop JS
  • Flyout JS
  • Input JS
  • Lazy Load JS
  • Mask JS
  • Matrix JS
  • Modal JS
  • Off Canvas JS
  • Pin JS
  • Popover JS
  • Showcase JS
  • Stalker JS
  • Tab JS
  • Toast JS
  • Tooltip JS
  • Type Ahead JS

Easy to integrate.

Even easier to understand.

Define your own markup or roll with the suggested Toolkit structure.

<div class="carousel" data-carousel>
    <div class="carousel-items">
        <ul data-carousel-items>
            <li><a href=""><img src="slide-1.jpg"></a></li>
            <li><a href=""><img src="slide-2.jpg"></a></li>
        </ul>
    </div>

    <button type="button" class="carousel-prev" data-carousel-prev></button>
    <button type="button" class="carousel-next" data-carousel-next></button>
</div>

Initialize JavaScript functionality for components using familiar plugin syntax.

$('.carousel').carousel({
    animation: 'slide-up',
    autoCycle: true,
    stopOnHover: true,
    onCycle: function() {
        // Trigger logic
    }
});

View Carousel Component