bitandblack-typography

Helps writing good typography in SCSS

Usage no npm install needed!

<script type="module">
  import bitandblackTypography from 'https://cdn.skypack.dev/bitandblack-typography';
</script>

README

Codacy Badge

Typography

Helps writing good typography in SCSS.

Installation

This package is available for the use with NPM, Yarn and Composer. Use one of them to add this library to your project:

Node

$ npm install bitandblack-typography

Yarn

$ yarn add bitandblack-typography

Composer

$ composer require bitandblack/typography

Usage

Typography provides some mixins which will make it easy to improve the typography on your page.

Balance ragged lines

Use @import balance-ragged-lines() to get the width property.

You can define that variable globally or be calling the mixin:

  • $typo-balance-ragged-lines-value. Default is 103%.

Box decoration break

Use @import box-decoration-break() to get the box-decoration-break property.

You can define that variable globally or be calling the mixin:

  • $typo-box-decoration-break. Default is clone.

Columns

Use @import columns() to get all the column related properties.

You can define those variables globally or be calling the mixin:

  • $typo-column-count. Default is 3.
  • $typo-column-gap. Default is 1rem.

Color scheme

Use @import color-scheme-dark() or @import color-scheme-light() to make a difference in your layout depending on the users color scheme setting.

Hanging punctuation

Use @import hanging-punctuation() to get the hanging-punctuation property.

You can define that variable globally or be calling the mixin:

  • $typo-hanging-punctuation. Default is first last allow-end.

Hyphens

Use @import hyphens() to get all hyphen related properties.

You can define those variables globally or be calling the mixin:

  • $only-if-fully-supported. Default is false.
  • $typo-hyphens-limit-before. Default is 3.
  • $typo-hyphens-limit-after. Default is 3.
  • $typo-hyphens-limit-word. Default is 6.
  • $typo-hyphens-limit-lines. Default is 3.
  • $typo-hyphens-limit-last. Default is always.
  • $typo-hyphens-limit-zone. Default is 8%.

Indent

Use @import indent() to get all indent related properties.

You can define those variables globally or be calling the mixin:

  • $typo-indent-value. Default is 1rem.
  • $typo-indent-first-element. Default is false.

Keep lines

Use @import keep-lines() to get all properties to keep lines together.

You can define those variables globally or be calling the mixin:

  • $typo-orphans-value. Default is 2.
  • $typo-widows-value. Default is 2.

Page break

Use @import page-break-before(), @import page-break-inside() or @import page-break-after() to get the properties to keep elements together.

You can define those variables globally or be calling the mixin:

  • $typo-page-break-before. Default is avoid.
  • $typo-page-break-inside. Default is avoid.
  • $typo-page-break-after. Default is avoid.

Help

If you need help feel free to contact us under typography@bitandblack.com.