Jump To:

  1. Demos
    1. Basic Horizontal Rule
    2. Short Accent Rule
    3. Large Margin Rule
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Demos

Basic Horizontal Rule

A standard horizontal line used to separate sections of content.

Content above the rule.

Content below the rule.

HTML 
<p>Content above the rule.</p>
<hr class="rule">
<p>Content below the rule.</p>

Short Accent Rule

Using the `rule--short` modifier to create a small, decorative line often used under headings.

Section Title

A brief introduction to the section follows the decorative short rule.

HTML 
<h3 class="h3">Section Title</h3>
<div class="rule rule--short"></div>
<p>A brief introduction to the section follows the decorative short rule.</p>

Large Margin Rule

A rule with increased vertical spacing using the `rule--margin-large` modifier.

This rule creates significant visual separation between major content blocks.

HTML 
<div class="rule rule--margin-large"></div>
<p>This rule creates significant visual separation between major content blocks.</p>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "short-border-width" : 4px,
  "short-modifiers" : false,
  "short-width" : 2.75rem,
);
File Information
  • File: _rule.scss
  • Group: rule
  • Type: variable
  • Lines (comments): 10-14
  • Lines (code): 16-20

Map Properties

Name Type Default Description
short-border-width Dimension 4px Short rule width of border
short-modifiers Object false Objects to adjust the styles of different short rule styles.
short-width Dimension 2.75rem Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _rule.scss
  • Group: rule
  • Type: mixin
  • Lines (comments): 22-25
  • Lines (code): 27-29

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Output styles

File Information
  • File: _rule.scss
  • Group: rule
  • Type: mixin
  • Lines (comments): 40-42
  • Lines (code): 44-96

Examples

@include ulu.component-rule-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _rule.scss
  • Group: rule
  • Type: function
  • Lines (comments): 31-34
  • Lines (code): 36-38

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require