Margin

Ready Added in 2.0.0

A collection of utility classes to add spacing between elements.

Usage

Add one or more of the following classes to any element to create the same vertical and/or horizontal margin that a paragraph usually has.

Class Description
.gls-margin Adds top margin, if it is preceded by another element, and always bottom margin.
.gls-margin-top Adds top margin.
.gls-margin-bottom Adds bottom margin.
.gls-margin-left Adds left margin.
.gls-margin-right Adds right margin. 
<div class="gls-margin"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

X-Small margin

Add one of the following classes to add very small spacing to block elements.

Class Description
.gls-margin-xsmall Adds xsmall top margin, if it is preceded by another element, and always bottom margin.
.gls-margin-xsmall-top Adds xsmall top margin.
.gls-margin-xsmall-bottom Adds xsmall bottom margin.
.gls-margin-xsmall-left Adds xsmall left margin.
.gls-margin-xsmall-right Adds xsmall right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin-xsmall gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin-xsmall gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Small margin

Add one of the following classes to add small spacing to block elements.

Class Description
.gls-margin-small Adds small top margin, if it is preceded by another element, and always bottom margin.
.gls-margin-small-top Adds small top margin.
.gls-margin-small-bottom Adds small bottom margin.
.gls-margin-small-left Adds small left margin.
.gls-margin-small-right Adds small right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin-small gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin-small gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Medium margin

Add one of the following classes to add medium spacing to block elements.

Class Description
.gls-margin-medium Adds medium top margin, if it is preceded by another element, and always bottom margin.
.gls-margin-medium-top Adds medium top margin.
.gls-margin-medium-bottom Adds medium bottom margin.
.gls-margin-medium-left Adds medium left margin.
.gls-margin-medium-right Adds medium right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin-medium gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin-medium gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Large margin

Add one of the following classes to add large spacing to block elements.

Class Description
.gls-margin-large Adds large margin, if it is preceded by another element, and always bottom margin.
.gls-margin-large-top Adds large top margin.
.gls-margin-large-bottom Adds large bottom margin.
.gls-margin-large-left Adds large left margin.
.gls-margin-large-right Adds large right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin-large gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin-large gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

X-Large margin

Add one of the following classes to add very large spacing to block elements.

Class Description
.gls-margin-xlarge Adds larger margin, if it is preceded by another element, and always bottom margin.
.gls-margin-xlarge-top Adds larger top margin.
.gls-margin-xlarge-bottom Adds larger bottom margin.
.gls-margin-xlarge-left Adds larger left margin.
.gls-margin-xlarge-right Adds larger right margin.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-margin-xlarge gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="gls-margin-xlarge gls-card gls-card-outline gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Remove margin

Add one of the following classes to remove margin from block elements.

Class Description
.gls-margin-remove Removes all margins.
.gls-margin-remove-top Removes top margin.
.gls-margin-remove-bottom Removes bottom margin.
.gls-margin-remove-left Removes left margin.
.gls-margin-remove-right Removes right margin.
.gls-margin-remove-vertical Removes all vertical margins.
.gls-margin-remove-adjacent Removes the top margin of the directly succeeding element.
.gls-margin-remove-first-child Removes the top margin of the first child element.
.gls-margin-remove-last-child Removes the bottom margin of the last child element. 
<h1 class="gls-margin-remove"></h1>

Responsive

Gloss provides a number of responsive classes to remove margin. Basically, they work just like the usual margin remove classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Class Description
.gls-margin-remove-left@s
.gls-margin-remove-right@s		 Affects device widths of 640px and larger.
.gls-margin-remove-left@m
.gls-margin-remove-right@m		 Affects device widths of 960px and larger.
.gls-margin-remove-left@l
.gls-margin-remove-right@l		 Affects device widths of 1200px and larger.
.gls-margin-remove-left@xl
.gls-margin-remove-right@xl		 Affects device widths of 1600px and larger.

Auto margin

Add one of the following classes to set auto margin. This can be useful to center or otherwise align block elements with a fixed width as well as flex elements.

Class Description
.gls-margin-auto Sets left and right margin to auto, horizontally centering block and flex elements.
.gls-margin-auto-top Sets top margin to auto, pushing block and flex elements to the bottom.
.gls-margin-auto-bottom Sets bottom margin to auto, pushing block and flex elements to the top.
.gls-margin-auto-left Sets left margin to auto, pushing block and flex elements to the right.
.gls-margin-auto-right Sets right margin to auto, pushing block and flex elements to the left
.gls-margin-auto-vertical Sets top and bottom margin to auto, vertically centering only flex elements.
  • Block element
    Flex item
  • <div class="gls-margin gls-margin-auto-left gls-width-1-2@s gls-card gls-card-outline gls-card-body gls-text-center">Block element</div>

<div class="gls-flex gls-height-medium gls-background-muted gls-margin gls-text-center">
    <div class="gls-margin-auto gls-margin-auto-vertical gls-width-1-2@s gls-card gls-card-outline gls-card-body">Flex item</div>
</div>

Responsive

Gloss provides a number of responsive margin auto classes. Basically, they work just like the usual margin auto classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Class Description
.gls-margin-auto-left@s
.gls-margin-auto@s
.gls-margin-auto-right@s		 Affects device widths of 640px and larger.
.gls-margin-auto-left@m
.gls-margin-auto@m
.gls-margin-auto-right@m		 Affects device widths of 960px and larger.
.gls-margin-auto-left@l
.gls-margin-auto@l
.gls-margin-auto-right@l		 Affects device widths of 1200px and larger.
.gls-margin-auto-left@xl
.gls-margin-auto@xl
.gls-margin-auto-right@xl		 Affects device widths of 1600px and larger.
  • Block element
    Block element
    Block element
  • <div class="gls-margin gls-margin-auto-right gls-margin-auto@m gls-width-1-2@s gls-card gls-card-outline gls-card-body gls-text-center">Block element</div>
<div class="gls-margin gls-margin-auto gls-margin-auto-left@m gls-width-1-2@s gls-card gls-card-outline gls-card-body gls-text-center">Block element</div>
<div class="gls-margin gls-margin-auto-left gls-margin-auto-right@m gls-width-1-2@s gls-card gls-card-outline gls-card-body gls-text-center">Block element</div>

Dynamic wrapping

To add spacing to stacking elements, for example inline elements that wrap on smaller viewports, just add the gls-margin attribute to their parent container. It will automatically add the .gls-margin-small-top class to the lower element.

<div gls-margin>
    <button></button>
    <button></button>
</div>

  • <div gls-margin>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
    <button class="gls-button gls-button-default">Button</button>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
margin String gls-margin-small-top This class is added to items that break into the next row, typically to create margin to the previous row.
first-column String gls-first-column This class is added to the first element in each row.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.margin(element, options);