Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@pismo/bolt-typography

Package Overview
Dependencies
Maintainers
4
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pismo/bolt-typography

Typography, fonts and vertical rhythm

  • 0.0.1-22
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-66.67%
Maintainers
4
Weekly downloads
 
Created
Source

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.

Keywords

FAQs

Package last updated on 17 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc