This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

guten-type

1.0.3 • Public • Published

GutenType

See the demo

GutenType is a Sass library that creates correct typography. Give it base values like font-size, and it automatically generates styles for you.

press()

The press() mixin assigns a base font-size to the html element, so that all other styles can be derived from 1rem. Then, it generates the typography system.

@use 'guten-type';

main {
  @include guten-type.press();
}

set()

The set() mixin allows you to customize the default styles.

@use 'guten-type';

main {
  /* STEP 1 (optional): Configure the module. */
  @include guten-type.set(
    $line-height: 1.4,
    $font-size: 18px,
    $font-stack: (
      'heading': ('PT Serif', serif),
      'body': ('PT Sans', sans-serif),
      'mono': ('Roboto Mono', monospace),
    ),
  );

  /* STEP 2: Use the module. */
  @include guten-type.press();
}

These are the options you can pass to set():

$font-size

  • The body text's font-size. Must be in px.

  • Default: 16px

$responsive-breakpoint

  • The min breakpoint at which font-size will switch from static to responsive units (i.e. the font-size increases along with the viewport size, therefore supporting infinitely large viewports). Must be in px.

  • Default: -1px (negative values are ignored)

$line-height

  • The body text's line-height.

  • Default: 1.5

$whitespace

  • The size of line breaks. Must be in rem.

  • Default: 1rem * $line-height

$font-size-scale

  • The typographic scale for heading font-size.

  • start is the heading at which the scale starts. Since h5 and h6 are less common than h1 - h4, defaults to h4.

  • Assuming h4 is the start:

    • h4 font-size = body font-size * base.
  • Then, the remaining headings scale exponentially:

    • h3 font-size = h4 font-size * ratio^1
    • h2 font-size = h4 font-size * ratio^2
    • h1 font-size = h4 font-size * ratio^3
  • Default:

    (
      'start': 4,
      'base': 1.33333,
      'ratio': 1.25,
    )

$whitespace-scale

  • Same concept as $font-size-scale.

  • Default:

    (
      'start': 4,
      'base': 1.5,
      'ratio': 1.33333,
    )

$font-stack

  • The font-stack for headings, body text, and monospaced text.

  • Default:

    (
      'heading': (sans-serif,),
      'body': (Georgia, serif),
      'mono': ('Andale Mono', 'Lucida Console', monospace),
    )

$color

  • The text colors. normal is used for the body and headings. light is used selectively for auxiliary text, like captions. action is used for links.

  • Default:

    (
      'normal': rgba(0, 0, 0, 0.95),
      'light': rgba(0, 0, 0, 0.6),
      'action': rgba(10, 30, 220, 0.95),
    )

$border

  • The appearance of items that have a border: table, pre, hr, and blockquote.

  • Default:

    (
      'weight': 2px,
      'color': color('light'),
    )

Package Sidebar

Install

npm i guten-type

Weekly Downloads

2

Version

1.0.3

License

ISC

Unpacked Size

18.6 kB

Total Files

6

Last publish

Collaborators

  • awjin