Jump To:

  1. Variables
    1. $config
    2. $cssvars
  2. Mixins
    1. set()
    2. set-cssvars()
    3. styles()
    4. declare()
    5. custom-properties()
  3. Functions
    1. get()

Responsible for outputting the base :root custom properties for ulu

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "sticky-offset-top": cssvar.add(cssvar.use-ulu("header-height"), cssvar.use-ulu("sticky-margin")),
  "sticky-offset-bottom": 0px,
  "sticky-margin": 0px,
  "header-height": 0px,
  "fullscreen-height": cssvar.subtract(100dvh, cssvar.use-ulu("header-height")),
  "fullscreen-height-sticky": cssvar.subtract(100dvh, cssvar.use-ulu("sticky-offset-top"), cssvar.use-ulu("sticky-offset-bottom"))
);
File Information
  • File: _root.scss
  • Group: root
  • Type: variable
  • Lines (comments): 12-19
  • Lines (code): 21-28

Map Properties

Name Type Default Description
sticky-offset-top String cssvar.add(cssvar.use-ulu("header-height"), cssvar.use-ulu("sticky-margin")) Total top offset for sticky positioning. Accounts for the primary header and any required breathing room.
sticky-offset-bottom Dimension 0px Bottom offset for sticky positioning. Useful when accounting for fixed footers or mobile navigation bars.
sticky-margin Dimension 0px Desired visual space between a sticky element and the bottom of the header.
header-height Dimension 0px The physical rendered height of the site's fixed/sticky header.
fullscreen-height String cssvar.subtract(100dvh, cssvar.use-ulu("header-height")) Utility height representing the visible viewport space below the header.
fullscreen-height-sticky String cssvar.subtract(100dvh, cssvar.use-ulu("sticky-offset-top"), cssvar.use-ulu("sticky-offset-bottom")) Utility height representing the safe scrollable area between all sticky layout boundaries.

$cssvars

Variable Type: Map

Global root variables (CSS Custom Properties)

$cssvars: ();
File Information
  • File: _root.scss
  • Group: root
  • Type: variable
  • Lines (comments): 44-45
  • Lines (code): 47-47

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 30-31
  • Lines (code): 33-35

Parameters

Name Type Description
$changes Map Map of changes

Require

set-cssvars()

Mixin

Set global root variables

  • Supports mapping values to breakpoints. Values can be literal or a configuration map with value and breakpoints keys.
File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 49-65
  • Lines (code): 67-69

Examples

Example usage with breakpoints

@include ulu.base-root-set-cssvars((
  "base-color": red,
  "responsive-size": (
    "value": 1rem,
    "breakpoints": (
      "medium": (
        "direction": "up",
        "value": 2rem
      )
    )
  )
));

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Output custom properties in :root for base stylesheet

File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 71-73
  • Lines (code): 75-84

Examples

@include ulu.base-root-styles();

Require

declare()

Mixin

Declare custom properties for ulu (without selector)

File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 86-90
  • Lines (code): 92-96

Examples

.cms-backend {
  @include ulu.base-root-declare();
}

Require

custom-properties()

Mixin

Output custom properties for ulu

File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 98-98
  • Lines (code): 100-114

Require

Functions

get()

Function

Get a config option

File Information
  • File: _root.scss
  • Group: root
  • Type: function
  • Lines (comments): 37-38
  • Lines (code): 40-42

Parameters

Name Type Description
$name String Name of property

Require