type-presets

variables

default-family

$default-family: unset !default;

Description

Default font family property value to use in presets

Type

Css font-family

Example

Usage

@use 'type-presets' as t with (
  $default-family: 'Arial, sans-serif'
);

Author

Tim Shelburne

default-weight

$default-weight: normal !default;

Description

Default font weight property value to use in presets

Type

Css font-weight

Example

Usage

@use 'type-presets' as t with (
  $default-weight: 500
);

Author

Tim Shelburne

default-transform

$default-transform: none !default;

Description

Default text transform property value to use in presets

Type

Css text-transform

Example

Usage

@use 'type-presets' as t with (
  $default-transform: uppercase
);

Author

Tim Shelburne

default-spacing

$default-spacing: normal !default;

Description

Default letter spacing property value to use in presets

Type

Css letter-spacing

Example

Usage

@use 'type-presets' as t with (
  $default-spacing: .5
);

Author

Tim Shelburne

line-height-scale

$line-height-scale: 8 !default;

Description

Value to add to font size when line height is not specified in typescale definition

Type

Number

Example

Usage

@use 'type-presets' as t with (
  $line-height-scale: 10
);

Author

Tim Shelburne

breakpoints

$breakpoints: (
	sm: 600px,
	md: 900px,
	lg: 1200px,
	xl: 1800px,
) !default;

Description

Default breakpoints to be used for responsive typescales - note that the values should be increasing

Type

Map

Example

Usage

@use 'type-presets' as t with (
  $breakpoints: (
    small: 400px
    med: 1000px
    largo: 2000px
  ),
  $typescales: (
    1: 12px (med: 14px, largo: 16px),
    2: 14px (small: 20px),
  )
);

Author

Tim Shelburne

typescales

$typescales: () !default;

Description

A map of basic typescale definitions

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`typescale.[ref].[1]`	the base size value at the smallest screen size	`Css font-size</code> or <code>(css font-size, css line-height)`	— none
`typescale.[ref].[2]`	a map of breakpoint sizes	`Map`	`()`
`typescale.[ref].[2].[bp_ref]`	the size value that takes precedence at the referenced breakpoint	`Css font-size</code> or <code>(css font-size, css line-height)`	— none

Example

Usage

@use 'type-presets' as t with (
  $typescales: (
    1: 12px (md: 14px, xl: 16px),
    2: 14px (lg: 20px),
  )
);

Author

Tim Shelburne

presets

$presets: () !default;

Description

A map of basic preset definitions

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`preset.[ref].scale`	the key of the typescale to use for the preset	`Number`	— none
`preset.[ref].family`	the preset's font family	`Css font-family`	`$default-family`
`preset.[ref].weight`	the preset's font weight	`Css font-weight`	`$default-weight`
`preset.[ref].transform`	the preset's text transform	`Css text-transform`	`$default-transform`
`preset.[ref].spacing`	the preset's letter spacing	`Css letter-spacing`	`$default-spacing`

Example

Usage

@use 'type-presets' as t with (
  $presets: (
    1: (scale: 1, spacing: .5),
    2: (scale: 1, family: 'Comic Sans', transform: uppercase),
    3: (scale: 2, family: 'Comic Sans', weight: 800),
  )
);

Author

Tim Shelburne

mixins

typescale

@mixin typescale($ref, $important: false) { ... }

Description

Use typescale in typographic element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ref`	name of pre-defined typescale from map	`String`	— none
`$important`	mark properties as !important in CSS	`Bool`	`false`

Example

Usage

@use 'type-presets' as t;

p {
  @include t.typescale(1);
}

Result

p {
  font-size: var(--typescale-1-font-size);
  line-height: var(--typescale-1-line-height);
}

Used by

[mixin] type-preset
[mixin] utility-classes

See

[variable] typescales

Author

Tim Shelburne

type-preset

@mixin type-preset($ref, $important: false) { ... }

Description

Use type-preset in typographic element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ref`	name of pre-defined type preset from map	`String`	— none
`$important`	mark properties as !important in CSS	`Bool`	`false`

Example

Usage

@use 'type-presets' as t with (
  $presets: (
    1: (scale: 1, spacing: .5),
  )
);

p {
  @include t.type-preset(1);
}

Result

p {
  font-size: var(--typescale-1-font-size);
  line-height: var(--typescale-1-line-height);
  font-family: unset;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0.5;
}

Requires

[mixin] typescale

Used by

[mixin] utility-classes

See

[variable] presets

Author

Tim Shelburne

utility-classes

@mixin utility-classes($namespace: '') { ... }

Description

Generate utility classes

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$namespace`	namespace to put utility under	`String`	`''`

Example

Usage

@use 'type-presets' as t with (
  $typescales: (
    1: 12px (md: 14px, xl: 16px),
  ),
  $presets: (
    1: (scale: 1, spacing: .5),
  )
);

@include t.utility-classes($namespace: );

Result

.test-u-typescale-1 {
  font-size: var(--typescale-1-font-size) !important;
  line-height: var(--typescale-1-line-height) !important;
}

.test-u-type-preset-1 {
  font-size: var(--typescale-1-font-size) !important;
  line-height: var(--typescale-1-line-height) !important;
  font-family: unset !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: 0.5 !important;
}

Requires

[mixin] typescale
[mixin] type-preset

Author

Tim Shelburne