dialog(typography) 📖

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:

   $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

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

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

   @import 'dialog-typography/dist/dialog-typography';

   PS: make sure to add node_modules to your import paths

3. Set up your typography.

   $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

.yourComponent {
   &__title {
      @include typo(title)
   }
}

License 👮🏼

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