Toolkit

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

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 JS
  • Typography
  • Form
  • Code
  • Responsive
Effects

Additional visual aesthetics for other Toolkit components.

  • Visual
  • Oval
  • Pill
  • Skew
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
Classes

MooTools classes to solve specific use cases.

  • Cache JS
  • Timers JS
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
  • Tabs 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">
    <div class="carousel-items">
        <ul>
            <li><a href=""><img src="slide-1.jpg"></a></li>
            <li><a href=""><img src="slide-2.jpg"></a></li>
        </ul>
    </div>

    <a href="javascript:;" class="carousel-prev">
        <span class="arrow-left"></span>
    </a>

    <a href="javascript:;" class="carousel-next">
        <span class="arrow-right"></span>
    </a>
</div>

Initialize JavaScript functionality for components using familiar plugin syntax.

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

View Carousel Component