No Padding Margin

    bitandblack-typography

    1.0.0 • Public • Published

    Codacy Badge

    Typography

    Helps writing good typography in SCSS.

    Installation

    This library is made for the use with NPM, Yarn and Composer. Use one of them to add it 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.

    SCSS and CSS

    If you don't have the possibility to use the scss files, you can use the pre-compiled css file in the dist folder. Please note, that you lose the possibility to configure the stylesheets by your needs then.

    Help

    If you have any questions, feel free to contact us under hello@bitandblack.com.

    Further information about Bit&Black can be found under www.bitandblack.com.

    Install

    npm i bitandblack-typography

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    18

    Last publish

    Collaborators

    • tobiaskoengeter