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()

Root

Responsible for outputting the base :root custom properties for ulu

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "sticky-offset-top": cssvar.add("header-height", "sticky-margin"),
  "sticky-offset-bottom": 0px,
  "sticky-margin": 0px,
  "header-height": 0px,
  "fullscreen-height": cssvar.subtract(100dvh, "header-height"),
  "fullscreen-height-sticky": cssvar.subtract(100dvh, "sticky-offset-top", "sticky-offset-bottom")
);
File Information
  • File: _root.scss
  • Group: root
  • Type: variable
  • Lines (comments): 11-18
  • Lines (code): 20-27

Map Properties

Name Type Default Description
sticky-offset-top String cssvar.add("header-height", "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, "header-height") Utility height representing the visible viewport space below the header.
fullscreen-height-sticky String cssvar.subtract(100dvh, "sticky-offset-top", "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): 43-44
  • Lines (code): 46-46

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _root.scss
  • Group: root
  • Type: mixin
  • Lines (comments): 29-30
  • Lines (code): 32-34

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): 48-64
  • Lines (code): 66-68

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): 70-72
  • Lines (code): 74-83

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): 85-89
  • Lines (code): 91-95

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): 97-97
  • Lines (code): 99-105

Require

Functions

get()

Function

Get a config option

File Information
  • File: _root.scss
  • Group: root
  • Type: function
  • Lines (comments): 36-37
  • Lines (code): 39-41

Parameters

Name Type Description
$name String Name of property

Require