Utilities

These are the various utilities that Saturn V provides along with how to use them.

border-radius

mixin

A mixin for easily setting border-radius in rems without managing the math.

            
.example {
  @include border-radius(5px, 'top-left bottom-right');
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$radii 5px How round the corners should be. This value is converted to rem automatically.
$radii-location 'top-right bottom-right top-left bottom-left' This controls which corners the border-radius should be applied to. you can provide any combination of the four corner options.

color

function

A function for getting and manipulating pre-set colors.

            
.example {
  background-color: get-color(black);
  color: get-color(white, -2, 40);
}
            
          

Arguments available in the border-radius mixin
argument Default Description
$hue none Any color in the $s5_map--color map (by default any of the 147 color names, plus: Primary, Secondary, Tertiary, focus, info, warning, and danger)
$shade 0 This manipulates the color to have either a higher or lighter luminosity relative to the base color. The number of available shades can be tweaked using the $s5_color-scale-step-total variable.
opacity 100 any number between 0-100 is valid.

dark-mode

mixin

Mixin for setting specific styles in either a dark or light mode. This uses prefers-color-scheme media query as well as styles children of <html color-scheme="dark/light">

            
.example {
  color: blue;

  @include dark-mode {
    outline: 1px solid red;
  }

  @include light-mode {
    outline: 1px solid blue;
  }
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
no arguments

disable-text-select

mixin

A mixin for disabling the ability for text to be selectable.

            
.example {
  @include disable-text-select;
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
no arguments

focusable-only

mixin

A mixin for making an otherwise interactive element only visible when focused.

            
.example {
  @include focusable-only;
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
no arguments

media-queries

mixin

A pair of mixins for setting styles based on min or max viewport widths.

            
.example {
  @include min-width-viewport(sm) {
    // some styles
  }

  @include max-width-viewport(massive) {
  // some styles
  }
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
micro 320px the smallest viewport size
xs 640px the extra-small viewport size
sm 768px the small viewport size
md 1024px the medium viewport size
lg 1440px the large viewport size
xl 1600px the extra-large viewport size
massive 2200px the massive viewport size

rem calculator

function

A function for converting values from pixel to rem units.

            
.example {
  padding: set-px(10) set-px(20);
  margin: set-px(400);
  margin-left: set-px(-200);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$size none the size in pixels that you're intending to convert to rem.

screen-reader-only

mixin

A mixin for making content only accessible to screen readers.

            
.example {
  @include screen-reader-only;
  // whatever styles you want, the mixin will still override them.
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
no arguments

share-px-value

mixin

A mixin for sharing the same pixel value across multiple properties.

            
.example {
  @include share-px-value(margin-left, padding-left, 5px);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$props... none list the properties that should share the same value separated by a comma. the last argument should be the pixel value that will be shared (converted to rem)

simple-gradient

mixin

A mixin for creating a simple linear-gradient based off a single input color.

            
.example {
  @include simple-gradient(red, dark);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$gradient-color none the base color the gradient will use to determine the start and end point
$lightness base modify the brightness of the gradient. Options include: darkest, darker, dark, base, light, lighter, and lightest

size-multiplier

function

A function for setting sizes in multiples of some base value (set by the related config variable).

            
.example {
  padding: set-size(2) set-size(4);
  margin: set-size(pixel);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$multiplier 1 multiplies the base value set by $s5_foundation-unit-size. You can also set 'micro' or 'pixel' as arguments for the rem equivalent of 2 or 1px respectively.

set-type

mixin

A mixin shorthand for setting a handful of type properties.

            
.example {
  @include set-type(display, 8, bold, md, italic);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$type-stack body this determines the type stack that gets used. options include: monospace, sans-serif, serif, display, masthead, body, text, code, interface, caption, aside, and blockquote.
$font-scale 5 this sets the type size based on a type scale using the ratio set by $s5_type-scale-modifier. Any whole number greater than 1 is a valid option.
$weight book this sets the type weight. options include: thin, light, book, medium, demi-bold, bold, heavy, and black.
$line-height md this sets the line height. options include: xxs (1), xs, sm, md, lg, and xl.
$style normal this sets the type style. options include: normal, italic, and oblique

set line-height

mixin

A mixin for setting the line height. useful for overriding a parents usage of set-type().

            
.example {
  @include set-type-line-height(xl);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$line-height md this sets the line height. options include: xxs (1), xs, sm, md, lg, and xl.

set type-stack

mixin

A mixin for setting the type stack. useful for overriding a parents usage of set-type().

            
.example {
  @include set-type-stack(interface);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$context body this determines the type stack that gets used. options include: monospace, sans-serif, serif, display, masthead, body, text, code, interface, caption, aside, and blockquote.

set type-style

mixin

A mixin for setting the type style. useful for overriding a parents usage of set-type().

            
.example {
  @include set-type-style(italic);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$style normal this sets the type style. options include: normal, italic, and oblique

set type-weight

mixin

A mixin for setting the type weight. useful for overriding a parents usage of set-type().

            
.example {
  @include set-type-weight(demi-bold);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$weight book this sets the type weight. options include: thin, light, book, medium, demi-bold, bold, heavy, and black.

z index

mixin

A mixin for setting the z-index.

            
.example {
  @include zindex(modal);
}
            
          

Arguments available in the border-radius mixin
argument Default Value Description
$object none this should correspond with an item listed by the $s5_zindex-order variable. this sets a z-index value depending on where it falls in the list order.