Demonstration and documentation

Visibility

.hidden, .hide { display: none; }

Layout

.inline { display: inline; } .inline-block { display: inline-block; }

.position-relative { position: relative; } .position-absolute { position: absolute; } .position-static { position: static; } .position-fixed { position: fixed; }

.no-margin { margin: 0; }

.no-underline a, a.no-underline { border-bottom: none; text-decoration: none; }

Margin

.margin-top-none { margin-top: none; }
  .margin-top-xsmall { margin-top: .1rem; }
  .margin-top-small { margin-top: .25rem; }
  .margin-top-medium { margin-top: .5rem; }
  .margin-top-large { margin-top: 1rem; }
  .margin-top-xlarge { margin-top: 2rem; }
  
  .margin-left-none { margin-left: none; }
  .margin-left-xsmall { margin-left: .1rem; }
  .margin-left-small { margin-left: .25rem; }
  .margin-left-medium { margin-left: .5rem; }
  .margin-left-large { margin-left: 1rem; }
  .margin-left-xlarge { margin-left: 2rem; }
  
  .margin-right-none { margin-right: none; }
  .margin-right-xsmall { margin-right: .1rem; }
  .margin-right-small { margin-right: .25rem; }
  .margin-right-medium { margin-right: .5rem; }
  .margin-right-large { margin-right: 1rem; }
  .margin-right-xlarge { margin-right: 2rem; }
  
  .margin-bottom-none { margin-bottom: none; }
  .margin-bottom-xsmall { margin-bottom: .1rem; }
  .margin-bottom-small { margin-bottom: .25rem; }
  .margin-bottom-medium { margin-bottom: .5rem; }
  .margin-bottom-large { margin-bottom: 1rem; }
  .margin-bottom-xlarge { margin-bottom: 2rem; }

Padding

.padding-top-none { padding-top: none; }
  .padding-top-xsmall { padding-top: .1rem; }
  .padding-top-small { padding-top: .25rem; }
  .padding-top-medium { padding-top: .5rem; }
  .padding-top-large { padding-top: 1rem; }
  .padding-top-xlarge { padding-top: 2rem; }
  
  .padding-left-none { padding-left: none; }
  .padding-left-xsmall { padding-left: .1rem; }
  .padding-left-small { padding-left: .25rem; }
  .padding-left-medium { padding-left: .5rem; }
  .padding-left-large { padding-left: 1rem; }
  .padding-left-xlarge { padding-left: 2rem; }
  
  .padding-right-none { padding-right: none; }
  .padding-right-xsmall { padding-right: .1rem; }
  .padding-right-small { padding-right: .25rem; }
  .padding-right-medium { padding-right: .5rem; }
  .padding-right-large { padding-right: 1rem; }
  .padding-right-xlarge { padding-right: 2rem; }
  
  .padding-bottom-none { padding-bottom: none; }
  .padding-bottom-xsmall { padding-bottom: .1rem; }
  .padding-bottom-small { padding-bottom: .25rem; }
  .padding-bottom-medium { padding-bottom: .5rem; }
  .padding-bottom-large { padding-bottom: 1rem; }
  .padding-bottom-xlarge { padding-bottom: 2rem; }