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 ☝️

• 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
    }
  }
  

• 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

• 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
      )
    )
  )
  

• Use in your components

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

License 👮🏼

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