Styles in Visage are defined by simple objects of CSS attributes to their respective values. If you are familiar with CSS-in-JS solutions like emotion or styled-components they allow you to define styles as objects, see emotion and their object styles or styled-component and their style objects.

Responsive styles

Visage supports two ways of writing responsive styles which can be combined.

Responsive CSS attributes

Visage supports a concept of responsive CSS attributes where each CSS attribute can be written as an array. Each item in array has it's corrensponding breakpoint so you can target multiple devices in just one line from smallest to largest one.

If you want to omit (turn off) a value on some device, use null as a value.

You can also repeat a value from previous breakpoint by setting it to undefined.

In case you used less values than breakpoints available to your application a last matched value is used.

Media queries

Media queries are also supported. You can use jsut media queries or combine them with responsive CSS attributes too.

PreviousDesign systemNextColor palette