modular-scale-styled
v1.0.1
Published
An easy-to-use library for creating meaningful typography
Downloads
10
Readme
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
| Scale | Value | | ------------------- | ------------------- | | Minor Second | 1.067 | | Major Second | 1.125 | | Minor Third | 1.2 | | Major Third | 1.25 | | Perfect Fourth | 1.333 | | Aug Fourth / Dim Fifth | 1.414 | | Perfect Fifth | 1.5 | | Minor Sixth | 1.6 | | Golden Section | 1.618 | | Major Sixth | 1.667 | | Minor Seventh | 1.778 | | Major Seventh | 1.875 | | Octave | 2 | | Major Tenth | 2.5 | | Major Eleventh | 2.667 | | Major Twelfth | 3 | | Double Octave | 4 |
License
MIT © divinoborges
Follow me on Twitter @divinoborges_