Rail
A horizontal, flexible container for arranging diverse inline elements. It provides a consistent layout for icons, labels, buttons, or other modular components, aligning content to either end or centering it. Item spacing is controlled via margins, allowing for individual item gap adjustments.
Variables
$config
Variable Type: Map
Module Settings
$config: (
"gap" : 1em,
"margin-bottom" : 1em,
"separator" : true,
"gap-modifiers": (
"small" : 0.5em,
"none" : 0,
"large" : 2em
),
);File Information
- File: _rail.scss
- Group: rail
- Type: variable
- Lines (comments): 28-33
- Lines (code): 35-44
Map Properties
| Name | Type | Default | Description |
|---|---|---|---|
| gap | Dimension | 1em | The default space between items in the rail |
| gap-modifiers | Map | ("small" : 0.5em, "large" : 2em ) | Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it |
| margin-bottom | Dimension | 1em | The default space after rail |
| separator | CssValue | true | Pass border property for separator, defaults to element rule style light |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _rail.scss
- Group: rail
- Type: mixin
- Lines (comments): 46-49
- Lines (code): 51-53
Examples
@include ulu.component-rail-set(( "gap" : 1.5em ));Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
Require
styles()
Mixin
Prints component styles
File Information
- File: _rail.scss
- Group: rail
- Type: mixin
- Lines (comments): 65-67
- Lines (code): 69-120
Examples
@include ulu.component-rail-styles();Require
Functions
get()
Function
Get a config option
File Information
- File: _rail.scss
- Group: rail
- Type: function
- Lines (comments): 55-58
- Lines (code): 60-63
Examples
@include ulu.component-rail-get("gap");Parameters
| Name | Type | Description |
|---|---|---|
| $name | Map |
Name of property |