modular-scale-styled v1.0.1

Modular Scale Styled

An easy-to-use library for creating meaningful typography

Install

npm install --save modular-scale-styled

Basic usage

import React from 'react'

import MSStyled, { Scale, Text } from 'modular-scale-styled'

const options = {
    base: 16,              // is the base size in px
    ratio: Scale.GOLDEN    // is the chosen scale
}

const App = () => {
    return (
        <MSStyled options={options}>
            {/* the size parameter means the size within the scale */}
            <Text size={5}>Meaningful Typography</Text>
            <Text size={4}>Meaningful Typography</Text>
            <Text size={3}>Meaningful Typography</Text>
            <Text size={2}>Meaningful Typography</Text>
            <Text size={1}>Meaningful Typography</Text>
            <Text size={0}>Meaningful Typography</Text>
            <Text size={-1}>Meaningful Typography</Text>
            <Text size={-2}>Meaningful Typography</Text>
        </MSStyled>
    )
}

Creating a custom component

import React from 'react'

import MSStyled, { Scale, Text } from 'modular-scale-styled'
import styled from "styled-components";

const options = {
    base: 16,   
    ratio: Scale.GOLDEN
}

const MyCustomText= styled(Text)`
  color: #e51818;
  background-color: rebeccapurple;
`;

const App = () => {
    return (
        <MSStyled options={options}>
            <MyCustomText size={4}>Meaningful Typography</MyCustomText>
        </MSStyled>
    )
}

Supported scales

License

MIT © divinoborges

Follow me on Twitter @divinoborges_