Breakpoints

Mobile-first responsive breakpoints based on common device widths. Used by the grid, utilities, and components.

Breakpoint Map

Name	Min Width	Typical Device	Grid Prefix
(default)	0	Phone portrait	`.ug-col--N`
sm	480px	Phone landscape	`.ug-col--sm-N`
md	768px	Tablet	`.ug-col--md-N`
lg	1024px	Desktop	`.ug-col--lg-N`
xl	1280px	Large desktop	`.ug-col--xl-N`

SCSS Variable

Breakpoints are defined in $ug-breakpoints and can be overridden:

$ug-breakpoints: (
  "sm": 480px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
) !default;

Mixins

Use the breakpoint mixins in your own SCSS:

// Mobile-first (min-width)
@include ug-breakpoint("md") {
  // Styles for tablet and up (>= 768px)
}

// Desktop-down (max-width)
@include ug-breakpoint-down("md") {
  // Styles for below tablet (< 768px)
}

Responsive Grid

Combine breakpoint prefixes on grid columns for responsive layouts:

Stacks on mobile, 2 columns on tablet, 3 on desktop

Column

<div class="ug-grid">
  <div class="ug-col--12 ug-col--md-6 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
  <div class="ug-col--12 ug-col--md-6 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
  <div class="ug-col--12 ug-col--md-12 ug-col--lg-4" style="background:#e8e5e0;padding:0.5rem;text-align:center">Column</div>
</div>

Responsive Visibility

Show or hide elements at specific breakpoints:

Class	Hidden when
`.ug-hidden--sm-up`	≥ 480px
`.ug-hidden--md-up`	≥ 768px
`.ug-hidden--lg-up`	≥ 1024px
`.ug-hidden--xl-up`	≥ 1280px
`.ug-hidden--sm-down`	< 480px
`.ug-hidden--md-down`	< 768px
`.ug-hidden--lg-down`	< 1024px
`.ug-hidden--xl-down`	< 1280px

Module Breakpoints

The square module system uses its own breakpoints with responsive column reduction:

Name	Min Width	Columns	Module Prefix
xs (default)	0	3	`.ug-module--HxW`
sm	640px	4	`.ug-module--sm-HxW`
md	1024px	6	`.ug-module--md-HxW`
lg	1300px	8	`.ug-module--lg-HxW`
xl	1600px	12	`.ug-module--xl-HxW`

Vertical Rhythm Breakpoint

The leading (--ug-leading) adapts at the prose max-width breakpoint:

Breakpoint	Base Font	Leading	--ug-leading
Mobile (default)	16px (100%)	× 1.625	26px
Desktop (≥ 35rem)	18px (112.5%)	× 1.7	31px

Class Reference

Class	Description
`.ug-col--sm-N`	Column span at >= 480px
`.ug-col--md-N`	Column span at >= 768px
`.ug-col--lg-N`	Column span at >= 1024px
`.ug-col--xl-N`	Column span at >= 1280px
`.ug-hidden--bp-up`	Hide above breakpoint
`.ug-hidden--bp-down`	Hide below breakpoint
`@include ug-breakpoint("bp")`	SCSS mixin for min-width media query
`@include ug-breakpoint-down("bp")`	SCSS mixin for max-width media query