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
.