Jump To:

  1. Demos
    1. Basic Inline List
    2. Large Gap Inline List
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Demos

Basic Inline List

A pipe-separated list of items displayed in a single line.

  • Privacy Policy
  • Terms of Service
  • Contact Us
  • Support
HTML 
<ul class="list-inline">
  <li>Privacy Policy</li>
  <li>Terms of Service</li>
  <li>Contact Us</li>
  <li>Support</li>
</ul>

Large Gap Inline List

Using the `list-inline--large-gap` modifier for increased spacing between items.

  • Project Alpha
  • Project Beta
  • Project Gamma
HTML 
<ul class="list-inline list-inline--large-gap">
  <li>Project Alpha</li>
  <li>Project Beta</li>
  <li>Project Gamma</li>
</ul>

Variables

$config

Variable

Module Config

$config: (
  "rule-style" : "light",
  "margin-top": 0,
  "margin-bottom": 1em,
  "space-between" : 1em,
  "space-between-large" : 2em
);
File Information
  • File: _list-inline.scss
  • Group: list-inline
  • Type: variable
  • Lines (comments): 11-16
  • Lines (code): 18-24

Map Properties

Name Type Default Description
rule-style String "light" Name of element > rule style to use for divider/border
margin-top Dimension 0 Top margin of list.
margin-bottom Dimension 1em Bottom margin of list.
space-between Dimension 1em Gap between item and dividers
space-between-large Dimension 1em Gap between item and dividers when using large-gap modifier

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _list-inline.scss
  • Group: list-inline
  • Type: mixin
  • Lines (comments): 26-29
  • Lines (code): 31-33

Examples

@include ulu.component-list-inline-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Output component stylesheet

File Information
  • File: _list-inline.scss
  • Group: list-inline
  • Type: mixin
  • Lines (comments): 44-46
  • Lines (code): 48-80

Examples

@include ulu.component-list-inline-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _list-inline.scss
  • Group: list-inline
  • Type: function
  • Lines (comments): 35-38
  • Lines (code): 40-42

Examples

@include ulu.component-list-inline-get("property");

Parameters

Name Type Description
$name Map Name of property

Require