General

functions

gravy-breakpoint

@function gravy-breakpoint($name) { ... }

Description

Returns the breakpoint size given its named size.

Parameters

NameDescriptionTypeDefault value
$name

the named size of the breakpoint requested (e.g. small or large) as configured in $gravy.

String—

Example

// given the following configuration:
$gravy: (
  breakpoints: (
    small: 600px,
    large: 1200px
  ),
// ...
);

// the following use:
.selector {
  display: block;

  @media all and (min-width: gravy-breakpoint('small')) {
    display: none;
  }
}

// will produce the following:
.selector {
  display: block;

  @media all and (min-width: 600px) {
    display: none;
  }
}

Requires

mixins

gravy-init

@mixin gravy-init() { ... }

Description

Initialises some global variables for ease of use and for some dependencies and mixins to work correctly.

The following variables will be generated (if not already present):

  • $base-font-size
  • $base-line-height

the following variable maps will also be created globally (overriding anything that has been set previously):

  • $breakpoints
  • $typefaces
  • $typi

Parameters

None.

Requires

gravy-font

@mixin gravy-font($type, $weight: regular) { ... }

Description

Fills in the right font-family and font-weight

Parameters

NameDescriptionTypeDefault value
$type

the typeface category configured in $gravy config map, e.g. heading, primary, secondary, monospace.

String—
$weight

the desired font-weight, e.g. light, regular, bold

Stringregular

Example

// given the following configuration:
$gravy: (
  typefaces: (
    primary: (
      stack: ('Roboto', sans-serif),
      weights: (
        regular: 'regular'
        bold: 'bold'
      )
    ),
    headings: (
      stack: ('Helvetica Neue', sans-serif),
      weights: (
        regular: '400'
        bold: '700'
      )
    )
  ),
  // ...
);

// the following use
body {
  gravy-font('primary');
}

h1 {
  gravy-font('headings', 'bold');
}

// will output:
body {
  font-family: 'Roboto', sans-serif;
  font-weight: regular;
}

h1 {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 700;
}

Requires

Used by

gravy-text-defaults

@mixin gravy-text-defaults() { ... }

Description

if called this will output some sensible defaults.

Parameters

None.

Requires

variables

gravy-defaults

$gravy-defaults: (
  base-font-size: 16px,
  base-line-height: 1.4,
  breakpoints: (
    small: 600px,
    large: 1200px
  ),
  typefaces: (
    primary: (
      stack: ('Arial', sans-serif),
      weights: (
        regular: 'regular',
        bold: 'bold'
      )
    )
  ),
  typi: (
    base: (
      null: (16px, 1.4),
      small: (16px),
      large: (19px)
    )
  )
);

Description

default settings for the configuration of gravy. The first level keys will be merged in the final configuration file if they're not defined.

Used by

gravy

$gravy: $gravy-defaults !default;

Description

base initialisation map for gravy, following an explanation of each single root-level key.

This is basically an aggregation of configuration maps used by several different libraries. It will create the actual maps that will be then used at runtime through some mixins. Some of this configuration is mandatory, the rest can be omitted as some sensible defaults are provided.

Typefaces

Allows you to use the mixin gravy-font().

typefaces: (
  name: (
    stack: ('fontface1', 'fontface2'),
    weights: (
      light: 300,
      regular: 400,
      medium: 500,
      bold: 600
    )
  )
)

Allows you to do the following:

  @include gravy-font('name', 'medium');

Breakpoints

Allows to store and access easily breakpoint sizes in whichever format you want using gravy-breakpoint(). Few grid frameworks use this map already.

breakpoints: (
  namedsize: 1024px
)

You can then access them with the following:

  @include gravy-breakpoint('namedsize');

Typi

Please refer to Typi for information on how to correctly configure this variable. You will need to use the name of the breakpoints defined in the breakpoints map when definining every single responsive font sizing definition. In its essence this map is organised as follows:

breakpoints: (
  breakpoint1: 600px,
  breakpoint2: 1200px
)
typi: (
  base: (
    null: (font-size, line-height),
    breakpoint1: (font-size-1, line-height-1),
    breakpoint2: (font-size-2, line-height-2)
  )
  name1: (
    null: (font-size-3, line-height-3),
    breakpoint1: (font-size-4, line-height-4),
    breakpoint2: (font-size-5, line-height-5)
  ),
  name2: (
    null: (font-size-4, line-height-4),
    breakpoint1: (font-size-5, line-height-5),
    breakpoint2: (font-size-6, line-height-6)
  )
)

This way you can call typi in the following way:

  @include typi('name2');

which will generate all the necessary font-sizes and breakpoints

Used by