Utilities

Set of common classes and variables used to provide predefined style and measures.

Summary

  1. Breakpoints
  2. Media queries
  3. Circular
  4. Rounded
  5. Border
  6. Border-hover
  7. Border-active
  8. Border-disabled

Breakpoints

Garden provides five breakpoints variables, which are defined in the defaults.json file.

Variable Values
$breakpoint-xs 480px
$breakpoint-sm 768px
$breakpoint-md 960px
$breakpoint-lg 1120px
$breakpoint-xl 1280px

Check out the Scaffolding page to learn how to overwrite these values.

Media queries

Based on the breakpoints provided, Garden creates some custom media queries: --small, --medium, --large, and --extra-large.

Below you can see how a @custom-media is defined and used, respectively.

@custom-media --small (min-width: calc($breakpoint-xs + 1));


@media(--small) {
  /* Style here */
}

Circular

The .circular class adds border-radius: 100% to an element.

  <img src="http://unsplash.it/100/100" class="circular">

Rounded

The .rounded class adds border-radius: .25rem to an element.

  <img src="http://unsplash.it/100/100" class="rounded">

Border

The .border class adds a border style to an element:

  <img src="http://unsplash.it/100/100" class="border">

border-hover

The .border-hover class adds a border style and a hover effect to an element.

  <img src="http://unsplash.it/100/100" class="border border-hover">

border-active

The .border-active class adds a border style to an element and overrides any border-color:hover effect on it.

    <img src="http://unsplash.it/100/100" class="border border-active">

border-disabled

The .border-disabled class adds a border style and opacity: .4 to an element, and also overrides any border-color:hover effect on it.

  <img src="http://unsplash.it/100/100" class="border border-disabled">