Wondering what’s next for npm?Check out our public roadmap! »

    @pismo/bolt-typography

    0.0.1-32 • Public • Published

    Bolt Typography

    Installation

    > yarn add @pismo/bolt-typography

    Usage

    CSS-in-JS

    If you are have a sass-loader prepared to import .scss files from your node_modules and want to apply the global stylesheet that this package offers, simply import it, once, directly inside your JavaScript and let your bundler do the work for you:

    MyApp/index.js:

    import '@pismo/bolt-typography/index.scss'

    You can name the import to make use of the same variables declared in the SCSS files, but in your JS:

    MyButton.js:

    import typography from '@pismo/bolt-typography'
     
    const btnStyle = {
      fontSize: typography.f1,
      lineHeight: typography.baseLineHeight,
    }
     
    const MyButton = () => (
      <Button style={btnStyle}>Too big!</Button>
    )

    Using the variables inside your own SCSS/SASS

    In this case you just need to import the specific file that contains the variables you want to reuse in your .scss.

    MyApp/style.scss:

    @import '~@pismo/bolt-typography/_font-sizes';
     
    .my-class {
      font-size: $f1;
    }

    Or import them all, I don't care

    ```MyApp/style.scss`:

    @import '~@pismo/bolt-typography/index.scss';
     
    .my-class {
      line-height: $baseLineHeight;
    }

    e.g.: We're using the $f1 variable from the file _font-sizes.scss of @pismo/bolt-typography.

    Development

    Edit the .scss files. All the JS files are generated automatically upon commit.

    Install

    npm i @pismo/bolt-typography

    DownloadsWeekly Downloads

    5

    Version

    0.0.1-32

    License

    ISC

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar