grotesk v0.0.4

grotesk

A react component (and css library) that uses the power of semantic HTML and emotion to make beautiful web type simple.

Install

npm install --save grotesk

Simple Usage

import React from 'react'

import Grotesk from 'grotesk'

function Example() {
  return (
    <Grotesk>
      <div className="parent">
        <h1>This is how you use grotesk</h1>
        <p>I hope this helps you understand!</p>
      </div>
    </Grotesk>
  )
}

If you would like the same font that the demo uses you can download it either from ./example/src/fonts/ or from it's official website. Then add the @font-face to your css, or if you're using emotion to your <Global> element.

/* CSS Example */
@font-face {
  font-family: space-grotesk;
  src: url(./fonts/SpaceGrotesk-Regular.woff2);
  font-weight: 400;
}

@font-face {
  font-family: space-grotesk;
  src: url(./fonts/SpaceGrotesk-Bold.woff2);
  font-weight: 800;
}

Also make sure to change your theme so that <Grotesk> knows to use the font:

function Example() {
  return (
    <Grotesk theme={{fontFamMain: "space-grotesk, sans-serif"}}>
      <div className="parent">
        <h1>This is how you use grotesk</h1>
        <p>I hope this helps you understand!</p>
      </div>
    </Grotesk>
  )
}

Customization

The <Grotesk> component takes two props, a theme object and a boolean value called fluid. The former is an object that you can provide to theme grotesk the way you would like it, and the latter decides whether or not fluid typography is on (note that it is on by defualt).

The theme object has many properties to fully customize the look of grotesk and any excluded properties will default to the regular theme. Below is the default theme and also an example of a theme object:

const theme = {
  bg: '#ffffff',
  fgBody: '#2d3748',
  fgHeadings: '#000000',

  hrColor: 'rgba(0, 0, 0, 0.07)',

  linkColor: '#8a4baf',

  preBg: 'rgba(0, 0, 0, 0.04)',
  preColor: '#2d3748',

  inlineCodeBg: 'rgba(0, 0, 0, 0.04)',
  inlineCodeColor: 'hsl(0, 79 %, 63 %)',

  quoteBg: '#ffffff',
  quoteBorder: '#8a4baf',
  quoteColor: '#6a727c',

  fontFamMain: 'space-grotesk, sans-serif',
  fontFamMono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" monospace',
  lineHtMain: '1.5',
  lineHtMono: '1'
}

To see how you can implement a dark mode check out the example in ./example/ (live version).

Final Notes

If you have any problems just open an issue and I'll look into it.

P.S: If you've made a website using grotesk or if you have any feature requests just holla at me over at twitter (@nairkartik_), I would love to hear from you. Peace :v:

License

MIT © kartiknair