Helps writing good typography in SCSS


Keywords
CSS, SCSS, Typography, Punctuation, Ragged lines, Indent, Keep lines, Page break, Color Scheme, Box Decoration Break, Media, Query, Columns
License
MIT
Install
npm install bitandblack-typography@0.0.9

Documentation

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 install:

Node

$ npm install bitandblack-typography

Yarn

$ yarn add bitandblack-typography

Composer

$ composer require bitandblack/typography and $ composer update

Usage

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

Balance ragged lines

Use @include 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 @include 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

Color scheme

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

Hanging punctuation

Use @include 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 @include 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 @include 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 @include 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 @include page-break-before(), @include page-break-inside() or @include 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.