# matter-css

> A flexible framework for managing abstract elements of your design for multiple devices

Latest version **0.0.7** (published 2015-05-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install matter-css
pnpm add matter-css
yarn add matter-css
bun add matter-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2015-05-02 |
| First published | 2015-05-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sevenupcan |
| Maintainers | sevenupcan |
| Keywords | framework |

## Links

- npm: https://www.npmjs.com/package/matter-css
- Repository: https://github.com/sevenupcan/matter
- Issues: https://github.com/sevenupcan/matter/issues
- npm.io page: https://npm.io/package/matter-css

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2015-05-02
- 0.0.4 — 2015-05-02
- 0.0.3 — 2015-05-02
- 0.0.2 — 2015-05-01
- 0.0.1 — 2015-05-01
- 0.0.0 — 2015-05-01

## README

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).

```stylus
.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.

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

View the [Docs](https://nicehuman/matter/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
```

```stylus
@import matter
```


### Configure

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

```stylus
@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`.

---
_Source: https://npm.io/package/matter-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._