silc utilites

The utilities module is a small web component for the silc framework.

Display

Display elements, globally, or at specific breakpoints.

<div class="silc-display">
    <p>Display block at all screen sizes</p>
</div>

Modifiers

Elements can be displayed at specific breakpoints using modifier classes in the silc-display--{display-type}-{breakpoint} format e.g.

<div class="silc-display--none">
    <p>Display none at all screen sizes</p>
</div>
<div class="silc-display--inline-small">
    <p>Display inline at small screen sizes and above</p>
</div>

Variables

Display types can be configured via the $silc-utilities--display-types variable. By default, the following display types are defined:

$silc-utilities--display-types: (
    'block',
    'inline',
    'inline-block',
    'flex',
    'none'
) !default;

Text alignment

Align text, globally, or at specific breakpoints

<div class="silc-align">
    <p>Align initial (left) at all screen sizes</p>
</div>

Modifiers

Text can be aligned at specific breakpoints using modifier classes in the silc-align--{alignment-type}-{breakpoint} format e.g.

<div class="silc-align--right">
    <p>Align right at all screen sizes</p>
</div>
<div class="silc-align--center-small">
    <p>Align center at small screen sizes and above</p>
</div>

Variables

Display types can be configured via the $silc-utilities--display-types variable. By default, the following display types are defined:

$silc-utilities--alignment-types: (
    'left',
    'right',
    'center',
    'justify'
) !default;

Margin

Add margin globally, to specific sides, and at specific breakpoints

<div class="silc-m--1 silc-mtop--2 silc-mtop--4-large">

</div>

Variables

Margin types can be configured via the $silc-utilities--margin-types variable. By default, the following margin types are defined:

$silc-utilities--margin-types: (
    'top',
    'right',
    'bottom',
    'left'
) !default;

Margin sizes can be configured via the $silc-utilities--margin variable. By default, the following margin sizes are defined:

$silc-utilities--margin: (
    ('0', '0'),
    ('auto', 'auto'),
    ('1', '.25rem'),
    ('2', '.5rem'),
    ('3', '.75rem'),
    ('4', '1rem')
) !default;

Padding

Add padding globally, to specific sides, and at specific breakpoints

<div class="silc-p--1 silc-ptop--2 silc-ptop--4-large">

</div>

Variables

Padding types can be configured via the $silc-utilities--padding-types variable. By default, the following padding types are defined:

$silc-utilities--padding-types: (
    'top',
    'right',
    'bottom',
    'left'
) !default;

Padding sizes can be configured via the $silc-utilities--padding variable. By default, the following padding sizes are defined:

$silc-utilities--padding: (
    ('0', '0'),
    ('1', '.25rem'),
    ('2', '.5rem'),
    ('3', '.75rem'),
    ('4', '1rem')
) !default;

Colors

Add color and background color

<div class="silc-color--primary silc-bg--secondary">

</div>

Variables

Color and background colors can be configured via the $silc-utilities--colors variable. By default, the following colors are defined:

$silc-utilities--colors: (
    ('primary', '#369'),
    ('secondary', '#4E7DAB'),
    ('tertiary', '#7BA3CA'),
    ('white', '#fff'),
    ('black', '#000')
) !default;