Helps writing good typography in SCSS
Homepage Repository npm Sass Download
npm install bitandblack-typography@0.0.4
Helps writing good typography in SCSS.
This package is available for the use with NPM, Yarn and Composer. Use one of them to install:
$ npm install bitandblack-typography
$ yarn add bitandblack-typography
$ composer require bitandblack/typography
and $ composer update
Typography provides some mixins which will make it easy to improve the typography on your page.
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%
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
Use @include color-scheme-dark()
or @include color-scheme-light()
to make a difference in your layout depending on the users color scheme setting.
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
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%
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
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
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
If you need help feel free to contact us under typography@bitandblack.com
.