Jump To:

  1. Variables
    1. $config
    2. $rule-styles
    3. $rule-margins
  2. Mixins
    1. set()
    2. set-rule-styles()
    3. set-rule-margins()
    4. rule()
    5. rule-style()
    6. rule-margin()
    7. link-defaults()
    8. link()
    9. styles-ordered-list()
    10. styles-unordered-list()
    11. hidden-visually()
    12. cap()
    13. cap-appearance()
    14. backdrop-filter-blur()
  3. Functions
    1. get()
    2. get-rule-style()
    3. get-rule-margin()

Element

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "backdrop-blur":                    4px,
  "backdrop-color":                   rgba(73, 73, 73, 0.459),
  "list-item-indent" :                1.5em,
  "text-shadow":                      0 1px 4px rgba(0,0,0,0.3),
  "border-radius":                    6px,
  "border-radius-small":              3px,
  "border-radius-large":              12px,
  "box-shadow":                       0 1px 5px color.get('box-shadow'),
  "box-shadow-above":                 0 1px 20px color.get('box-shadow'),
  "box-shadow-hover":                 0 1px 5px color.get('box-shadow-hover'),
  "box-shadow-inset":                 0 1px 5px color.get('box-shadow'),
  "box-shadow-raised":                0 1px 12px color.get('box-shadow'),
  "link-text-decoration":             underline,
  "link-text-decoration-color":       initial,
  "link-text-decoration-color-hover": false,
  "link-text-decoration-default":     none,
  "link-text-underline-offset" :     auto,
  "link-text-decoration-style":       dotted,
  "link-text-decoration-style-hover": solid,
  "link-text-decoration-thickness":   0.1em,
  "margin":                           1em,
  "margin-small":                     0.65em,
  "margin-large":                     2em,
  "ol-list-style-type":               decimal,
  "ol-list-style-type-2":             lower-alpha,
  "ol-list-style-type-3":             lower-roman,
  "ul-list-style-type":               disc,
  "ul-list-style-type-2":             circle,
  "ul-list-style-type-3":             square,
  "cap-color" :                       "accent",
  "cap-size" :                        5px
);
File Information
  • File: _element.scss
  • Group: element
  • Type: variable
  • Lines (comments): 10-40
  • Lines (code): 42-74

Map Properties

Name Type Description Default
backdrop-blur Number Backdrop blur amount used on elements/components
backdrop-color Color Backdrop color (modal overlays, etc)
list-item-indent Dimension 1.5em
text-shadow List Common text shadow
border-radius Number Common element border radius
border-radius-large Number Common element border radius (large)
border-radius-small Number Common element border radius (small)
box-shadow List Box-shadow definition for elements that are on top of page
box-shadow-above List Box-shadow definition for elements that are above the page (fixed items, etc)
box-shadow-hover CssValue 0 1px 5px color.get('box-shadow-hover')
box-shadow-inset CssValue 0 1px 5px color.get('box-shadow')
box-shadow-raised List Box-shadow definition for elements that are raised off of the page (dropdowns, etc)
link-text-decoration String
link-text-decoration-color Color
link-text-decoration-default String Whether links use underline, remember that removing underline will create an accessibility issue (not relying on color)
link-text-decoration-color-hover Color
link-text-underline-offset Number
link-text-decoration-style String
link-text-decoration-style-hover String
link-text-decoration-thickness Number
margin Number Common element margin
margin-large Number Common element margin (large)
margin-small Number Common element margin (small) (default for lists)
ol-list-style-type String Ordered list type (level 1)
ol-list-style-type-2 String Ordered list type (level 2)
ol-list-style-type-3 String Ordered list type (level 3)
ul-list-style-type String
ul-list-style-type-2 String
ul-list-style-type-3 String

$rule-styles

Variable Type: Map

Rule style map, redefine defaults or add to

$rule-styles: (
  "default": 1px solid color.get("rule"),
  "light":   1px solid color.get("rule-light"),
);
File Information
  • File: _element.scss
  • Group: element
  • Type: variable
  • Lines (comments): 76-77
  • Lines (code): 79-82

$rule-margins

Variable Type: Map

Common rule margins (space between rule and type)

$rule-margins: (
  "smallest": 0.5rem,
  "small":    1rem,
  "medium":   2rem,
  "large":    3rem
);
File Information
  • File: _element.scss
  • Group: element
  • Type: variable
  • Lines (comments): 84-85
  • Lines (code): 87-92

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 94-96
  • Lines (code): 98-100

Parameters

Name Type Description
$changes Map Map of changes
@include ulu.element-set(( "property" : value ));

Require

set-rule-styles()

Mixin

Sets rule styles

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 110-111
  • Lines (code): 113-115

Parameters

Name Type Description
$changes Map Map of changes

Require

set-rule-margins()

Mixin

Sets rule margins

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 117-119
  • Lines (code): 121-123

Parameters

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

Require

rule()

Mixin

Get full rule CSS (style and margin)

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 139-140
  • Lines (code): 142-148

Parameters

Name Type Description
$changes Map Map of changes

Require

rule-style()

Mixin

Output CSS for a rule's style (not margins

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 150-151
  • Lines (code): 153-155

Parameters

Name Type Default Description
$name String "default" name of rule style

Require

rule-margin()

Mixin

Output CSS for a rule's margin

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 157-158
  • Lines (code): 160-164

Parameters

Name Type Default Description
$name String "default" name of rule style

Require

Mixin

Print the default link styling (no hover and focus styles)

  • Default link styling just sets the color and the link-text-decoration-default
  • This is usually output at the top of the stylesheet to style the general element
  • Use link() mixin to print the full link styling (when used in content/text) which includes the full styling (text-decoration, etc)
File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 166-172
  • Lines (code): 174-187

Parameters

Name Type Description
$visited Boolean Include visited style
$active Boolean Include active style

Require

Mixin

Output link CSS styles (this is the full link styling when used in content/text)

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 189-191
  • Lines (code): 193-215

Parameters

Name Type Description
$visited Boolean Include visited style
$active Boolean Include active style

Require

styles-ordered-list()

Mixin

Print the ordered list items styling

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 217-218
  • Lines (code): 220-244

Parameters

Name Type Description
$bullet-color Boolean Optional bullet color (defaults to palette 'bullet')

Require

styles-unordered-list()

Mixin

Print the unordered list items styling

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 246-247
  • Lines (code): 249-269

Parameters

Name Type Description
$bullet-color Boolean Optional bullet color

Require

hidden-visually()

Mixin

Hide text for assistive devices

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 271-276
  • Lines (code): 278-296

Examples

@include ulu.layout-hidden-visually()
// Reset styling
@include ulu.layout-hidden-visually(false)

Parameters

Name Type Description
$hidden Boolean Defaults to true, pass false to override the hidden css (ie. on focus)

cap()

Mixin

Layout utility to add a colored bar (cap) to an element's edge, positioned over the element and its border

  • You need to set position (relative, fixed) on parent
File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 299-307
  • Lines (code): 309-332

Parameters

Name Type Description Default
$side String The side to place the cap (top, bottom, left, right)
$options Map Options for the appearance of the cap
$options.color Color The color for the end cap $config.cap-color
$options.size Number The width/height of the cap $config.cap-size
$options.offset Number A positive number of the amount the cap should extend outside the box (to account for border-width) 0
$options.border-radius Number An optional border-radius to apply to the outward-facing edges of the cap (used to match parent) null
$before Boolean Whether or not to use the ::before element (if not uses :after) true

Require

cap-appearance()

Mixin

Provides the appearance styles for a given cap

  • If an option is not provided it won't be output
  • This is used to update the caps styling (states, modifiers, etc)
File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 336-341
  • Lines (code): 343-385

Parameters

Name Type Description
$side String The side to place the cap (top, bottom, left, right)
$options Map Options for the appearance of the cap (see options from element.cap)
$before Boolean Whether or not to use the ::before element (if not uses :after)

Require

backdrop-filter-blur()

Mixin

Add backdrop-filter blur

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 387-389
  • Lines (code): 390-392

Parameters

Name Type Default Description
$amount CssUnit get("backdrop-blur") Amount to blur

Functions

get()

Function

Get a config option

File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 102-104
  • Lines (code): 106-108

Parameters

Name Type Description
$name Map Name of property
@include ulu.element-get("property");

Require

get-rule-style()

Function

Get a rule style

File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 125-126
  • Lines (code): 128-130

Parameters

Name Type Description
$changes Map Map of changes

Require

get-rule-margin()

Function

Sets rule margin

File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 132-133
  • Lines (code): 135-137

Parameters

Name Type Description
$changes Map Map of changes

Require