@brikcss/typography

    0.0.1 • Public • Published

    Brikcss Typography

    NPM version NPM downloads per month Travis branch NPM version Coverage Status Commitizen friendly semantic release code style: prettier

    Front end component to make managing typography in HTML and CSS easier.


    Environment and browser support

    Node CLI UMD ES Module Browser
    x x x x
    Chrome Firefox Safari Edge IE iOS Android
    11

    Install

    1. Install from NPM:

      npm i -D @brikcss/typography
    2. Include file(s) in your app:

      • Include ./dist/typography.min.css or ./dist/typography.css for the precompiled CSS.
      • To create your own custom typography styles, follow ./src/typography.css as an example. It is compiled with PostCSS using postcss-font-magician, postcss-apply, and postcss-pxtorem.

    Usage

    Brikcss Typography follows Material Design's Typography to create the following font styles:

    • overline
    • caption
    • button
    • body2
    • body
    • subtitle2
    • subtitle
    • h6
    • h5
    • h4
    • h3
    • h2
    • h1

    Font classes

    A class is created for each font style. Each class is named as follows: .font__<font style name> (i.e., .font__body).

    Font property sets

    A "property set" is also created for each font style, which allows you to @apply a font style's properties inside your own CSS rules.

    Example input:

    .my-selector {
    	@apply --font__title;
    }

    Output:

    .my-selector {
    	font-size: 1.25rem;
    	font-weight: 500;
    	line-height: 3rem;
    	letter-spacing: 0.02em;
    }

    Creating your own custom font styles

    You can easily create your own custom font styles by following the example in the source typography.css. It uses postcss-apply to create property sets. Refer to their documentation for configuration and usage details.

    Install

    npm i @brikcss/typography

    DownloadsWeekly Downloads

    13

    Version

    0.0.1

    License

    none

    Unpacked Size

    15.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • thezimmee