!dialog(typography)

dialog(typography) :book:


Provides a central place to manage your typography across multiple breakpoints. Demo

Installation 💾

``
npm install dialog-typography
`
`
yarn add dialog-typography
`

Usage ☝️

1. Set up your favorite breakpoint mixin.
typo will call a mixin called bp($breakpointname). So it important to
set up your own breakpoint mixin within a mixin called bp.

For example:

`scss
$dialog-breakpoints: (
desktop: 'min-width: 701px',
mobile: 'max-width: 700px'
);

@mixin bp($name) {
@media (#{map-get($dialog-breakpoints, $name)}) {
@content
}
}
`

Or you could also use any popular breakpoint mixin

`scss
@mixin bp($name)
@inlcude media-query($name) {
@content
}
}
`

2. Import dialog-typography.scss after the creation of the bp mixin.

`scss
@import 'dialog-typography/dist/dialog-typography';
`
PS: make sure to add node_modules to your import paths

3. Set up your typography.
`scss
$dialog-typo: (
desktop: (
default: (
font-size : 1rem,
font-family : sans-serif,
font-weight : normal,
font-style : normal,
line-height : 1.5
),
title: (
font-weight : bold,
font-size : 2.25rem,
line-height : 1.3
),
subtitle: (
font-weight : bold,
font-size : 1.75rem,
line-height : 1.2
),
paragraph: (
font-size : 1rem
)
),
mobile: (
default: (
font-size : 1.15rem,
line-height : 1.5
),
title: (
font-size : 3rem
)
)
)
`
4. Use in your components
`scss
.yourComponent {
&__title {
@include typo(title)
}
}
``

License 👮🏼

Created with ♥ by meodai. Licensed under the MIT License.