ratyo v0.1.2

ratyo

Inline style utilities for Radium. It had no dependencies so it should work with other similar libraries. Primarily focused on typography and responsive design.

Media Queries

Ratyo has a media utility function to define a media query.

import { media, em } from 'ratyo';

const desktop = em(50);

export const myStyle = {
  fontSize: em(1),

  [media(desktop)]: {
    fontSize: em(1.2),
  },
},

It will generate the following object for myStyle.

{
  fontSize: '1em',
  '@media all and (min-width: 50em)': {
    fontSize: '1.2em',
  },
}

Typography

Ratyo includes several typography utilities. It is heavily inspired by typi.

Modular Scale

import { modularScale, em } from 'ratyo';

const base = 1;
const ratio = 1.618; // golden ratio

const ms = (value) => em(moduleScale(value, base, ratio));

export const myStyle = {
  fontSize: ms(1), // 1.618em
};

Vertical Rhythm

import { verticalRhythm } from 'ratyo';

const baseLine = 1.5;

const vr = (value) => verticalRhythm(value, baseLine);

export const myStyle = {
  margin: vr(1.5), // 1.5 baselines == 2.25rem
};

Font maps

import { fontSizes, em, modularScale } from 'ratyo';

const base = 1;
const ratio = 1.618;
const ms = (value) => modularScale(value, base, ratio);

const mediaQueries = {
  small: em(25),
  large: em(50),
};

export const rules = fontSizes(mediaQueries, {
  base,
  small: 1.125,
  large: 1.25,
});

It will generate the following object.

{
  base: {
    fontSize: '100%'
  },
  small: {
    fontSize: '112.5%'
  },
  large: {
    fontSize: '125%'
  },
  mediaQueries: {
    'all and (min-width: 25em)': {
      html: {
        fontSize: '112.5%'
      },
    },
    'all and (min-width: 50em)': {
      html: {
        fontSize: '125%'
      },
    },
  },
}