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

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 class 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 plugins.

Continually growing with every release.


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

  • Normalize
  • Base
  • Typography
  • Form
  • Code
  • Flex
  • Grid
  • Responsive

Common user interface concepts packaged as static HTML elements.

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

Element plugins 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>

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

Initialize JavaScript functionality for plugins using familiar syntax.

    animation: 'slide-up',
    autoCycle: true,
    stopOnHover: true,
    onCycle: function() {
        // Trigger logic

View Carousel Component