CSS Utility Library

@sparkpost/matchbox-css is a utility library which can be used to include Matchbox styles in any front-end architecture. Matchbox components are built to be used within a React application, but when that isn't possible this library helps to bridge the gap and provide Matchbox styles to any front-end application.

This library is built on top of Matchbox design tokens.

Getting Started

Installation

npm install --save @sparkpost/matchbox-css

Usage

Import the utility file to the top level of your stylesheet.

@import '~@sparkpost/matchbox-css/dist/index.css';

  <div className="border-width-100 border-color-gray-300">
    <h2 className="font-size-400 line-height-400 font-weight-bold px-450 pt-450">
      Panel Title
    </h2>
    <div className="p-450">Panel Content</div>
    <div className="p-450 border-width-0 border-top-width-100 border-color-gray-300">
      <button 
        className="bg-blue-700 color-white px-400 h-650 mr-400 font-size-200 hover:bg-blue-600 motion-duration-medium motion-ease-in-out"
        style={{ border: 'none', outline: 'none' }}
      >
        Panel Action
      </button>
    </div>
  </div>

Interactions

The Matchbox CSS utility library provides different interaction states that can be used for the following: :hover, :focus, :focus-visible, :active, :visited, and :disabled

To create styles for these interactions, prefix your classes with .{interaction}:class-name

e.g. .hover:color-blue-700

Media Queries

The Matchbox CSS utility library provides a helper to apply different styles at the following media queries:

• xs: 448px
• sm: 720px
• md: 960px
• lg: 1200px
• xl: 1440px

To create styles for these breakpoints, prefix your classes with .{breakpoint}:class-name
e.g. .xs:mx-300 .md:mx-500

Available Classes