Size

Size sets equal width and height from the spacing scale or a breakpoint width.

Sass mixins

Mixin	CSS properties
size($key)	width, height
min-size($key)	min-width, min-height
max-size($key)	max-width, max-height
size-full	width: 100%, height: 100%
size-auto	width: auto, height: auto

Responsive range mixin

Pass a base size followed by named breakpoint overrides, such as crayon.size-range(8, $md: 12, $lg: 16).

Mixin	Purpose
size-range($base, $breakpoint-range...)	Responsive width and height

Utility classes

Class	Property
size-{size}	width: {size}; height: {size}
min-size-{size}	min-width: {size}; min-height: {size}
max-size-{size}	max-width: {size}; max-height: {size}
size-{breakpoint}	width: {breakpoint width}; height: {breakpoint width}
min-size-{breakpoint}	min-width: {breakpoint width}; min-height: {breakpoint width}
max-size-{breakpoint}	max-width: {breakpoint width}; max-height: {breakpoint width}
size-full	width: 100%; height: 100%
size-auto	width: auto; height: auto

Examples

Sass mixins

scss

.avatar {
  @include crayon.size(8);
  @include crayon.max-size(24);
}

sass

.avatar
  +crayon.size(8)
  +crayon.max-size(24)

Utility classes

<div class="size-8">2rem square</div>
<div class="size-full">Fill the parent</div>
<div class="min-size-8 max-size-24">Constrained size</div>

Sass functions

.avatar {
  width: crayon.size(8);
  height: crayon.size(8);
}

CSS variables

.avatar {
  width: var(--size-8);
  height: var(--size-8);
}