@ulu/frontend
Version:
A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.
6,335 lines • 142 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Breakpoint
</title>
<meta name="description" content="Modular Sass Theming Library">
<meta name="generator" content="Eleventy v3.0.0">
<link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
<link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
<link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
</head>
<body class="page theme-light">
<header class="page__header header">
<a href="#main" class="skip-link hidden-visually-focusable">
Skip to main content
</a>
<div class="header__main">
<a class="header__logo" href="/frontend/">
<div class="logo">
<span class="logo__main">Ulu</span>
<span class="logo__subtitle">Frontend</span>
</div>
</a>
<button class="header__mobile-toggle hidden-min-medium button button--icon button--secondary" data-ulu-dialog-trigger="mobile-menu" aria-label="Open Menu">
<span class="fas fa-bars" aria-hidden="true"></span>
</button>
</div>
<nav class="header__nav">
<h2 class="hidden-visually">Main Menu</h2>
<div class="header__nav-links">
<button class="button button--small button--icon button--icon-small" data-ulu-theme-toggle='{
"savePreference" : true,
"checkMediaQuery" : true,
"group" : "page"
}'>
<span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
<span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
</button>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend" aria-label="View on Github">
<span class="fab fa-github" aria-hidden="true"></span>
</a>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend">
<span class="fab fa-npm" aria-hidden="true"></span>
</a>
</div>
<div class="header__nav-menu">
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/sass/core/breakpoint/" aria-current="page">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
<div id="mobile-menu" data-ulu-modal-builder='{
"title" : "Menu",
"position" : "right"
}'>
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/sass/core/breakpoint/" aria-current="page">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="page__toc page-toc">
<h2>Jump To:</h2>
<div class="toc">
<ol>
<li><a href="#variables">Variables</a>
<ol>
<li><a href="#variable-config">$config</a>
</li>
<li><a href="#variable-sizes">$sizes</a>
</li>
</ol>
</li>
<li><a href="#mixins">Mixins</a>
<ol>
<li><a href="#mixin-set">set()</a>
</li>
<li><a href="#mixin-set-sizes">set-sizes()</a>
</li>
<li><a href="#mixin-min">min()</a>
</li>
<li><a href="#mixin-max">max()</a>
</li>
<li><a href="#mixin-min-max">min-max()</a>
</li>
<li><a href="#mixin-from">from()</a>
</li>
<li><a href="#mixin-from-each">from-each()</a>
</li>
<li><a href="#mixin-embed-for-scripts">embed-for-scripts()</a>
</li>
</ol>
</li>
<li><a href="#functions">Functions</a>
<ol>
<li><a href="#function-get">get()</a>
</li>
<li><a href="#function-get-sizes">get-sizes()</a>
</li>
<li><a href="#function-get-size">get-size()</a>
</li>
<li><a href="#function-get-size-value">get-size-value()</a>
</li>
<li><a href="#function-exists">exists()</a>
</li>
</ol>
</li>
</ol>
</div>
</div>
<main id="main" class="page__body">
<div class="page__body-top container api-docs">
<div class="wysiwyg">
<h1 id="breakpoint" tabindex="-1">Breakpoint</h1>
<div class="type-large">
<p>Utilities for working with breakpoints</p>
</div>
<h2 id="variables" tabindex="-1">Variables</h2>
<div class="sassdoc-item-header">
<h3 id="variable-config" tabindex="-1">$config</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
</div>
</div>
<p>Module Settings</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"gap"</span><span class="pjs-token pjs-punctuation">:</span> 0.01em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"null-name"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"none"</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> variable</li>
<li><strong>Lines (comments):</strong> 10-15</li>
<li><strong>Lines (code):</strong> 17-22</li>
</ul>
</details>
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Default</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">base</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">16px</td>
<td style="text-align:left">Assumed pixel base, can change based on users font settings so this is just to get us in the ballpark. Note this is not the base font size but the user agent's or user's browser preference. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)</td>
</tr>
<tr>
<td style="text-align:left">gap</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">0.01em</td>
<td style="text-align:left">The amount to offset min from max media queries incase you are using both (prevent overlap)</td>
</tr>
<tr>
<td style="text-align:left">null-name</td>
<td style="text-align:left">String</td>
<td style="text-align:left">"none"</td>
<td style="text-align:left">The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property (see breakpoint.embed-for-scripts() or cssvar.declare-breakpoint-sizes()) to pass breakpoints to JS. The js ui/breakpoints.js module provides methods for interacting with breakpoints in JS.</td>
</tr>
<tr>
<td style="text-align:left">default</td>
<td style="text-align:left">String</td>
<td style="text-align:left">"small"</td>
<td style="text-align:left">The name of the breakpoint that is considered the major change (ie desktop to mobile) used by other modules/components</td>
</tr>
</tbody>
</table>
<div class="sassdoc-item-header">
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
</div>
</div>
<p>The default breakpoint sizes</p>
<ul>
<li>Map of breakpoints</li>
<li>Each property is the breakpoints name</li>
<li>Each value is that breakpoints point (set in em by default)</li>
</ul>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>680px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1200px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> utils.<span class="pjs-token pjs-function">pixel-to-em</span><span class="pjs-token pjs-punctuation">(</span>1500px<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span>
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> variable</li>
<li><strong>Lines (comments):</strong> 45-49</li>
<li><strong>Lines (code):</strong> 51-55</li>
</ul>
</details>
<h2 id="mixins" tabindex="-1">Mixins</h2>
<div class="sassdoc-item-header">
<h3 id="mixin-set" tabindex="-1">set()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Change modules $config</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 24-27</li>
<li><strong>Lines (code):</strong> 29-31</li>
</ul>
</details>
<h4 id="examples" tabindex="-1">Examples</h4>
<p>Change default name</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"mini"</span> <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<h4 id="parameters" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Map of changes</td>
</tr>
</tbody>
</table>
<h4 id="require" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-set-sizes" tabindex="-1">set-sizes()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Update the breakpoint sizes map</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 57-64</li>
<li><strong>Lines (code):</strong> 66-68</li>
</ul>
</details>
<h4 id="examples-1" tabindex="-1">Examples</h4>
<p>Changing the medium breakpoint and adding jumbo</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoints-set-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> 50em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"jumbo"</span> <span class="pjs-token pjs-punctuation">:</span> 100em
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<h4 id="parameters-1" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
<th style="text-align:left">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">A map to merge into the breakpoints map</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">$merge-mode</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Merge strategy see, utils.map-merge options</td>
<td style="text-align:left">null</td>
</tr>
</tbody>
</table>
<h4 id="require-1" tabindex="-1">Require</h4>
<ul>
<li>map-merge()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-min" tabindex="-1">min()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Create a media query that matches the min-width for a given size</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 137-146</li>
<li><strong>Lines (code):</strong> 148-154</li>
</ul>
</details>
<h4 id="examples-2" tabindex="-1">Examples</h4>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoints-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-comment">// Your styles</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">min-width</span><span class="pjs-token pjs-punctuation">:</span> 42.5em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
// Your Styles
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-2" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The name of the breakpoint size</td>
</tr>
</tbody>
</table>
<h4 id="require-2" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size-value">get-size-value()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-max" tabindex="-1">max()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Create a media query that matches the max-width for a given size</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 156-165</li>
<li><strong>Lines (code):</strong> 167-173</li>
</ul>
</details>
<h4 id="examples-3" tabindex="-1">Examples</h4>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> breakpoints.<span class="pjs-token pjs-function">max</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-comment">// Your styles</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">max-width</span><span class="pjs-token pjs-punctuation">:</span> 42.4em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
// Your Styles
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-3" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">The name of the breakpoint size</td>
</tr>
</tbody>
</table>
<h4 id="require-3" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size-value">get-size-value()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-min-max" tabindex="-1">min-max()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Create a media query that matches between two breakpoint sizes</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 175-185</li>
<li><strong>Lines (code):</strong> 187-194</li>
</ul>
</details>
<h4 id="examples-4" tabindex="-1">Examples</h4>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> breakpoints.<span class="pjs-token pjs-function">min-max</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-comment">// Your styles</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">min-width</span><span class="pjs-token pjs-punctuation">:</span> 42.5<span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">max-width</span><span class="pjs-token pjs-punctuation">:</span> 75em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
// Your Styles
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-4" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size-min</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The name of the smallest breakpoint size</td>
</tr>
<tr>
<td style="text-align:left">$size-max</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The name of the largest breakpoint size</td>
</tr>
</tbody>
</table>
<h4 id="require-4" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size">get-size()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-from" tabindex="-1">from()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Create a media query from a specific size in either direction</p>
<ul>
<li>This is for mostly programmatic usage, so that a user could pass a breakpoint configuration that may contain values that go in either direction</li>
<li>This way you don't need to repeat conditions (ie if min ... else ...)</li>
</ul>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 196-206</li>
<li><strong>Lines (code):</strong> 208-220</li>
</ul>
</details>
<h4 id="examples-5" tabindex="-1">Examples</h4>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$size</span></span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$user-breakpoint</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"size"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$dir</span></span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$user-breakpoint</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"direction"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-keyword">@include</span> breakpoints.<span class="pjs-token pjs-function">from</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$size</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-variable">$dir</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-comment">// Your styles</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-5" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$name</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The name of the breakpoint size</td>
</tr>
<tr>
<td style="text-align:left">$direction</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The direction the media query should target (min</td>
</tr>
</tbody>
</table>
<h4 id="throw" tabindex="-1">Throw</h4>
<ul>
<li>ULU: Mixin error (breakpoint.from), incorrect argument</li>
</ul>
<h4 id="require-5" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#mixin-min">min()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#mixin-max">max()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-from-each" tabindex="-1">from-each()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Utility Method for iterating over a map of breakpoints and apply styles</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 222-229</li>
<li><strong>Lines (code):</strong> 231-249</li>
</ul>
</details>
<h4 id="examples-6" tabindex="-1">Examples</h4>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> breakpoints.<span class="pjs-token pjs-function">fromEach</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$breakpoints</span><span class="pjs-token pjs-punctuation">)</span> using <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$props</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">width</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$props</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"width"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-6" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$breakpoints</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">A map with breakpoints direction will be pulled from each items "direction" property, if direction is missing no breakpoint will wrap the code (as convention we call the default non-breakpoint direction "default")</td>
</tr>
<tr>
<td style="text-align:left">$options</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">A map with options to change the behavior</td>
</tr>
<tr>
<td style="text-align:left">$options.directionRequired</td>
<td style="text-align:left"><code>Boolean</code></td>
<td style="text-align:left">Require direction throw error if missing direction</td>
</tr>
</tbody>
</table>
<h4 id="throw-1" tabindex="-1">Throw</h4>
<ul>
<li>ULU: Missing required</li>
</ul>
<h4 id="require-6" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#mixin-from">from()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-embed-for-scripts" tabindex="-1">embed-for-scripts()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Attaches breakpoints to an element pseudo content for access via script</p>
<ul>
<li>Note you can also use cssvar.declare-breakpoints to get a similar implementation with css custom-properties</li>
<li>Use with ulu/js/breakpoints (class has options for content property or css custom property)</li>
<li>Breakpoints always min-width (upwards) for javascript setup</li>
</ul>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 251-254</li>
<li><strong>Lines (code):</strong> 256-266</li>
</ul>
</details>
<h4 id="require-7" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#mixin-min">min()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<h2 id="functions" tabindex="-1">Functions</h2>
<div class="sassdoc-item-header">
<h3 id="function-get" tabindex="-1">get()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a config option</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 33-39</li>
<li><strong>Lines (code):</strong> 41-43</li>
</ul>
</details>
<h4 id="examples-7" tabindex="-1">Examples</h4>
<p>Example usage</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get </span><span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">font-size</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"base"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">font-size</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-7" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$name</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Name of property</td>
</tr>
</tbody>
</table>
<h4 id="returns" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">*</td>
<td style="text-align:left">Property Value</td>
</tr>
</tbody>
</table>
<h4 id="require-8" tabindex="-1">Require</h4>
<ul>
<li>require-map-get()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-sizes" tabindex="-1">get-sizes()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get all breakpoint sizes</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 70-77</li>
<li><strong>Lines (code):</strong> 79-81</li>
</ul>
</details>
<h4 id="examples-8" tabindex="-1">Examples</h4>
<p>Example usage</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-sizes </span><span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$sizes</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-sizes</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="returns-1" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Map</td>
<td style="text-align:left">Map of breakpoints (equivalent to $sizes)</td>
</tr>
</tbody>
</table>
<h4 id="require-9" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-size" tabindex="-1">get-size()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a specific breakpoint's raw value/size</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 83-90</li>
<li><strong>Lines (code):</strong> 92-94</li>
</ul>
</details>
<h4 id="examples-9" tabindex="-1">Examples</h4>
<p>Example usage</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size </span><span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-8" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The name of the size to get</td>
</tr>
</tbody>
</table>
<h4 id="returns-2" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">The sizes value</td>
</tr>
</tbody>
</table>
<h4 id="require-10" tabindex="-1">Require</h4>
<ul>
<li>require-map-get()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-size-value" tabindex="-1">get-size-value()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a specific breakpoint's size's value and optionally specify max to get the ending/max value for a breakpoint</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 96-104</li>
<li><strong>Lines (code):</strong> 106-112</li>
</ul>
</details>
<h4 id="examples-10" tabindex="-1">Examples</h4>
<p>Example usage</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size-value </span><span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size-value</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 75.99em<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-9" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Default</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$max</td>
<td style="text-align:left"><code>Boolean</code></td>
<td style="text-align:left">false</td>
<td style="text-align:left">Get the max value</td>
</tr>
</tbody>
</table>
<h4 id="returns-3" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">The value for the given size</td>
</tr>
</tbody>
</table>
<h4 id="require-11" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size">get-size()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-exists" tabindex="-1">exists()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Check if a specific size exist</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _breakpoint.scss</li>
<li><strong>Group:</strong> breakpoint</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 114-130</li>
<li><strong>Lines (code):</strong> 132-135</li>
</ul>
</details>
<h4 id="examples-11" tabindex="-1">Examples</h4>
<p>Example usage</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-exists </span><span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span>
<span class="pjs-token pjs-punctuation">}</span>
<span class="pjs-token pjs-comment">// The below content doesn't print because the size doesn't exist.</span>
<span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 20000rem<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span>
<span class="pjs-token pjs-punctuation">}</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">min-width</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-selector">.test-exists</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span>
<span class="pjs-token pjs-punctuation">}</span></code></pre>
<h4 id="parameters-10" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$name</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The breakpoint size to check if exists</td>
</tr>
</tbody>
</table>
<h4 id="returns-4" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Boolean</td>
</tr>
</tbody>
</table>
<h4 id="require-12" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
</div>
</div>
</main>
<footer></footer>
<script src="http://localhost:5173/@vite/client" type="module"></script>
<script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
</body>
</html>