Base API Functions

Base has 5 functions that form the core of Base vertical grid API.

All five functions come with an unprefixed alias by default, using the base import. Import the base-prefix partial instead, if you only only want prefixed versions of the API.

Text functions

Use line-height(), top() and bottom() to set text on the baseline and apply the results wherever you need them: CSS line-height, margin, padding, etc.
Use font-size() to get the default font-size

Example

scss Basic text usage

$base: (cap-height: .7);
 h1 {
   $font-size: 2rem;
   font-size: $font-size;
   line-height: line-height($font-size);
   margin-top: top($font-size);
   margin-bottom: bottom($font-size);
 }

css compiled

h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-top: 0.05rem;
  margin-bottom: 0.45rem;
}

@function base-font-size()

@function base-line-height()

@function base-top()

@function base-bottom()

Row function

Use row() to set a add a specific height to a element

Examples

scss Specific height

$base: (cap-height: .7);
 .foo {
   height: row(3);
 }

css compiled

.foo {
  height: 1.5rem;
}

scss Text with added white space

$base: (cap-height: .7);
 h1 {
   $font-size: 2rem;
   font-size: $font-size;
   line-height: line-height($font-size);
   margin-top: top($font-size) + row(3);
   margin-bottom: bottom($font-size) + row(2);
 }

css compiled

h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-top: 1.55rem;
  margin-bottom: 1.45rem;
}

@function base-row()

@function base-line-height()

aliased as line-height()

Description

Returns the line-height that is needed to maintain the text on the baseline.

The un-prefixed alias line-height() is available by default.

Parameters & Return

$short: null (list|number)

Shorthand expression to define the current text properties, optionally containing:

a unit number, current font-size
a unitless number, extra rows to add per text line

$config: $base (Map)

Optional map of Base configuration settings. See $base documentation for details.

@return (length)

Calculated line-height in a unitless number

Examples

scss line-height of default font-size

$base: (cap-height: .5);
.foo {
  line-height: line-height();
}

css compiled

.foo {
  line-height: 1.5;
}

scss normal usage

$base: (cap-height: .5);
.foo {
  $font-size: 2rem;
  line-height: line-height($font-size);
}

css compiled

.foo {
  line-height: 1.25;
}

used by

@function line-height()

@function base-top()

aliased as top()

Description

Used to return the top offset needed for given font-size to maintain the baseline grid

The un-prefixed alias top() is available by default.

Parameters & Return

$short: null (list|number)

Shorthand expression to define the current text properties, optionally containing:

a unit number, current font-size
a unitless number, extra rows to add per text line
static, relative or absolute for a specific math method

$config: $base (Map)

Optional map of Base configuration settings. See $base documentation for details.

@return (length)

Calculated top shoulder

Examples

scss top shoulder of default font-size

$base: (cap-height: .5);
.foo {
  padding-top: top();
}

css compiled

.foo {
  padding-top: 0rem;
}

scss normal usage

$base: (cap-height: .5);
.foo {
  $font-size: 2rem;
  padding-top: top($font-size);
}

css compiled

.foo {
  padding-top: 0.25rem;
}

requires

@function base-row()

@function _base-math-shoulder-top() [private]

used by

@function top()

@function base-bottom()

aliased as bottom()

Description

Used to return the bottom offset needed for given font-size to maintain the baseline grid

The un-prefixed alias bottom() is available by default.

Parameters & Return

$short: null (list|number)

Shorthand expression to define the current text properties, optionally containing:

a unit number, current font-size
a unitless number, extra rows to add per text line
static, relative or absolute for a specific math method

$config: $base (Map)

Optional map of Base configuration settings. See $base documentation for details.

@return (length)

Calculated line-height

Examples

scss bottom shoulder of default font-size

$base: (cap-height: .5);
.foo {
  padding-bottom: bottom();
}

css compiled

.foo {
  padding-bottom: 0rem;
}

scss normal usage

$base: (cap-height: .5);
.foo {
  $font-size: 2rem;
  padding-bottom: bottom($font-size relative);
}

css compiled

.foo {
  padding-bottom: 0.125em;
}

requires

@function base-row()

@function _base-math-shoulder-top() [private]

@function _base-math-shoulder-bottom() [private]

used by

@function bottom()

@function base-font-size()

aliased as font-size()

Description

It returns the extracted font-size from the shorthand, if non given it will fallback on the base font-size.

The un-prefixed alias font-size() is available by default.

Parameters & Return

$short: null (list|number)

Shorthand expression to define the current text properties, optionally containing:

a unit number, current font-size

$config: $base (Map)

Optional map of Base configuration settings. See $base documentation for details.

@return (length)

Raw font-size

Examples

css proposed usage

.foo {
  $font-size: 2rem;
  font-size: $font-size;
}

scss default font-size

$base: (cap-height: .5);
.foo {
  font-size: font-size();
}

css compiled

.foo {
  font-size: 1rem;
}

scss specific font-size

$base: (cap-height: .5);
.foo {
  font-size: font-size(2rem);
}

css compiled

.foo {
  font-size: 2rem;
}

used by

@function font-size()

@function base-row()

aliased as row()

Description

Returns the height of a certain amount of rows

Parameters & Return

$rows: 1 (Number)

Number of rows to span

$config: $base (Map)

Optional map of Base configuration settings. See $base documentation for details.

@return (Number)

Height to span given rows

Examples

scss single row

$base: (cap-height: .5);
.foo {
  height: row();
}

css compiled

.foo {
  height: 0.5rem;
}

scss a specific amount of rows

$base: (cap-height: .5);
.foo {
  height: row(3);
}

css compiled

.foo {
  height: 1.5rem;
}

Base API Functions

Text functions

Example

related

@function base-font-size()

@function base-line-height()

@function base-top()

@function base-bottom()

Row function

Examples

related

@function base-row()

Description

Parameters & Return

$short: null (list|number)

$config: $base (Map)

@return (length)

Examples

used by

@function line-height()

Description

Parameters & Return

$short: null (list|number)

$config: $base (Map)

@return (length)

Examples

requires

@function base-row()

@function _base-math-shoulder-top() [private]

used by

@function top()

Description

Parameters & Return

$short: null (list|number)

$config: $base (Map)

@return (length)

Examples

requires

@function base-row()

@function _base-math-shoulder-top() [private]

@function _base-math-shoulder-bottom() [private]

used by

@function bottom()

Description

Parameters & Return

$short: null (list|number)

$config: $base (Map)

@return (length)

Examples

used by

@function font-size()

Description

Parameters & Return

$rows: 1 (Number)

$config: $base (Map)

@return (Number)

Examples

requires

@function _base-math-row-height() [private]

used by

@function base-top()

@function base-bottom()

@mixin base-aspect-ratio()

@function row()