ZigZagUI

# Display

All the things that will affect the display of your content. This includes breakpont helpers, visibility, overflow, and display classes, z-index helpers, elevation, and borders.

# Breakpoints

In general, practice mobile-first design. That is, prefer to use breakpoints only to manage medium and large screens, while default CSS attributes are used for smaller devices.

Mixin

 @include breakpoint($value)

The breakpoint mixin accepts one of the following $values:

small medium large x-large
only sm-only md-only lg-only -
here and up - md lg xl
here and down - md-and-down lg-and-down -

(note the inutility of sm-and-down, or xl-only, etc.)

Examples:

@include breakpoint('md') {
  // some stuff
}

@include breakpoint('sm-only') {
  // only small stuff
}

# Display

Class Properties
.block display: block;
.inline-block display: inline-block;

Screen-readers

To visually hide an element, use the screenreader-only mixin:

Mixin

 @include screenreader-only

# Overflow

Class Properties
.overflow-hidden overflow: hidden;
.overflow-x-hidden overflow-x: hidden;
.overflow-y-hidden overflow-y: hidden;

# Hidden

Class Properties
.hidden display: none !important;
.hidden-md display: none !important;
.hidden-lg display: none !important;
.hidden-xl display: none !important;
.hidden-sm-only display: none !important;
.hidden-md-only display: none !important;
.hidden-lg-only display: none !important;
.hidden-md-and-down display: none !important;
.hidden-lg-and-down display: none !important;

# Width

Class Properties
.w-full width: 100%;
.w-screen width: 100vw;

# Borders

There are several border utility classes, as well as a border() sass function for more fine-grained control over a border.

Class Properties
.no-border border-width: 0;
.rounded border-radius: 4px;
.rounded-full border-radius: 50%;
.border border-width: 1px;
.border-t border-top-width: 1px;
.border-r border-right-width: 1px;
.border-b border-bottom-width: 1px;
.border-l border-left-width: 1px;
.border-white border-color: #ffffff;
.border-blue border-color: #0072f0;
.border-error border-color: #e4002b;

Mixin

There is also a sass function to access preset border values:

border($size, $color)
  • $size: can be thin, medium, or `thick
  • $color: can be any hexcode, but prefer using default values / colors in the settings file.

example: border('thin'), border('thin', colors('brand', 'blue') )

# Elevation

# Mixin

@include elevation($z)

The elevation mixin accepts one of the following $z values:

z usage
0 "hard" elevation, for input focus states
1 "sm", used with product cards, e.g.
2 "md", used with modals, e.g.
3 "lg", content boxes, e.g.

# Classes

A set of classes for controlling an element's elevation.

There are currently three levels, corresponding to an increasing amount of depth. They are described by elevation classes as fallows:

class usage
.elevation-0 "hard" elevation, for input focus states
.elevation-1 "sm", used with product cards, e.g.
.elevation-2 "md", used with modals, e.g.
.elevation-3 "lg", content boxes, e.g.

# Layout helpers

Cover

Mixin

 @include cover($scope: 'absolute')

clearfix

Hopefully you'll never need this.

Mixin

 @include clearfix

← Typography →