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()
    15. focus-ring-required-only()
    16. summary-remove-marker()
  3. Functions
    1. get()
    2. get-rule-style()
    3. get-optional-rule-style()
    4. 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,
  "icon-centered-vertical-offset" :   0.02em,
);
File Information
  • File: _element.scss
  • Group: element
  • Type: variable
  • Lines (comments): 10-40
  • Lines (code): 42-75

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): 77-78
  • Lines (code): 80-83

$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): 85-86
  • Lines (code): 88-93

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 95-97
  • Lines (code): 99-101

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): 111-112
  • Lines (code): 114-116

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): 118-120
  • Lines (code): 122-124

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): 156-157
  • Lines (code): 159-165

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): 167-168
  • Lines (code): 170-172

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): 174-175
  • Lines (code): 177-181

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): 183-189
  • Lines (code): 191-204

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): 206-208
  • Lines (code): 210-232

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): 234-235
  • Lines (code): 237-261

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): 263-264
  • Lines (code): 266-286

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): 288-293
  • Lines (code): 295-313

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): 316-324
  • Lines (code): 326-349

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): 353-358
  • Lines (code): 360-402

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): 404-406
  • Lines (code): 407-409

Parameters

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

focus-ring-required-only()

Mixin

Accessibly hide focus ring while keeping it when it's required

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 411-411
  • Lines (code): 412-416

summary-remove-marker()

Mixin

Remove default details arrow from the summary element

File Information
  • File: _element.scss
  • Group: element
  • Type: mixin
  • Lines (comments): 418-418
  • Lines (code): 419-426

Functions

get()

Function

Get a config option

File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 103-105
  • Lines (code): 107-109

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): 126-128
  • Lines (code): 130-132

Parameters

Name Type Description
$changes Map Map of changes

Returns

Type Description
CssValue Rule style (css border value)

Require

get-optional-rule-style()

Function

Get an optional rule style (which is a border)

  • If the value is a string we return the rule style, else we return the value
  • Used for things where configuration for say a border can be a user defined border or a string (they want an existing rule-style)
  • Except when passing "none"/none this will return as-is (since it's a border property)
File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 134-139
  • Lines (code): 141-147

Parameters

Name Type Description
$value * The value to check

Returns

Type Description
* Rule style if string, else value

Require

get-rule-margin()

Function

Sets rule margin

File Information
  • File: _element.scss
  • Group: element
  • Type: function
  • Lines (comments): 149-150
  • Lines (code): 152-154

Parameters

Name Type Description
$changes Map Map of changes

Require