Matter

Matter is a very flexible and powerful yet simple framework which allows you to manage the layout, ~~colour, typography and animation~~ for multiple devices.

There are several features of Matter that make it unique however its the way characteristics of your design are managed that separate it apart from most other frameworks. Rather than thinking in fixed static values, Matter prefers relative values (although not a requirement). This allows you to build and alter your design in unprecedented yet predictable ways.

Usage

The example below shows how you can create a 4 column grid with gutters. The unit-less values known as amplitude are calculated by multiplying the base unit by the scale factor for that breakpoint (see further down).

.Block {
    layout: flex;
    guttering: 2;

    &__Item {
        padding: 2;
        width: 1/4;
    }
}

With Matter however you are not limited to using amplitude. If you need to you can combine any units necessary. For example.

.Block {
    padding: 100px 2 1em 40%;
}

View the Docs to see a list of other properties you can use and how they behave.

Installation

Install NodeJS

npm install -g stylus matter-css

cd ~/Project

@import matter

Configure

Configure the size of your base unit and then the scale factor for each breakpoint.

@import matter

unit = 4px

breakpoints = 200px   0.75   'watch',
              480px   1      'phone',
              768px   1.5    'tablet',
              980px   2      'desktop',
              2000px  2      'cinema'

Properties such as padding and guttering can use unit-less values known as amplitude. Amplitude is used to calculate the appropriate value for that property on each breakpoint.

For example an amplitude of 2 for phone equals 8px but an amplitude of 2 for desktop equals 16px.