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.

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

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

Circular

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

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

Rounded

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

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

Border

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

Copy  <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.

Copy  <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.

Copy    <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.

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