Using Styles

At the core of stylings are style style composers.

Style composers are objects that collect desired styles and can be used to generate CSS.

There are several built-in style composers: $flex, $grid, $animation, $colors, $frame, $font, $shadow, $common, $transition.

import { $flex } from "stylings";
 
$flex.horizontal.alignCenter.gap(2);
 
// This represents the following CSS:
// display: flex;
// flex-direction: row;
// align-items: center;
// gap: 1rem;

Chaining style composers

Style composers are infinitely chainable using their modifiers.

Some modifiers can be used without arguments, e.g.,

$flex.horizontal.center;

Some modifiers require arguments, e.g.,

$flex.gap(2).horizontal.center;

You can use the same modifier multiple times (new modifiers will override previous ones), e.g.,

$flex.horizontal.center.horizontal.center;

is technically valid and is the same as

$flex.horizontal.center;

Using style composers with styled-components

Style composers can be directly passed to styled components.

import { $flex } from "stylings";
 
function Items() {
  return <ListOfItems>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </ListOfItems>
}
 
const ListOfItems = styled.div`
  ${$flex.vertical.gap(2)}
`;

Naming conventions

All composers are named with a $ prefix. This is to make them easily recognizable and clearly indicate that they are chainable.

If you’re exporting composers from a file, it is recommended to also add a $ prefix to the name of the variable.

export const $formField = $flex.horizontal.alignStretch.gap(2);

Manually getting final CSS out of style composers

To read values from composers, you can:

• call its composer.compile() method
• or call the composer as a function, e.g composer() (styled-components does this automatically)

const $styles = $flex.horizontal.alignCenter.gap(2);
 
$styles.compile();
// above is equivalent to:
$styles();
 
// both will output:
[
  "display: flex",
  "flex-direction: row",
  "align-items: center",
  "gap: 1rem",
]