Layout

Floats

Use .xs-float-left, .xs-float-right and .xs-float-none to float elements.

.xs-float-left
.xs-float-right
.xs-float-none
<div class="clearfix">
  <div class="xs-float-left">.xs-float-left</div>
  <div class="xs-float-right">.xs-float-right</div>
</div>
<div class="xs-float-none">.xs-float-none</div>

Display

Use .xs-hide, .xs-inline, .xs-inline-block and .xs-block to change an element's display.

.xs-hide
.xs-inline
.xs-inline-block
.xs-block
<div>
  <div class="xs-hide">.xs-hide</div>
  <div class="xs-inline xs-border xs-mr1">.xs-inline</div>
  <div class="xs-inline-block xs-border">.xs-inline-block</div>
  <a href="#" class="xs-block xs-border xs-mt1">.xs-block</a>
</div>

Overflow

Use .xs-overflow-hidden, .xs-overflow-auto, .xs-overflow-scroll and .xs-overflow-visible to change an element's overflow behavior.

.xs-overflow-hidden

When life gives you lemons, don't make lemonade. Make life take the lemons back! Get mad! I don't want your damn lemons, what the hell am I supposed to do with these? Demand to see life's manager! Make life rue the day it thought it could give Cave Johnson lemons! Do you know who I am? I'm the man who's gonna burn your house down! With the lemons!

.xs-overflow-auto

When life gives you lemons, don't make lemonade. Make life take the lemons back! Get mad! I don't want your damn lemons, what the hell am I supposed to do with these? Demand to see life's manager! Make life rue the day it thought it could give Cave Johnson lemons! Do you know who I am? I'm the man who's gonna burn your house down! With the lemons!

.xs-overflow-scroll

When life gives you lemons, don't make lemonade. Make life take the lemons back! Get mad! I don't want your damn lemons, what the hell am I supposed to do with these? Demand to see life's manager! Make life rue the day it thought it could give Cave Johnson lemons! Do you know who I am? I'm the man who's gonna burn your house down! With the lemons!

<div class="xs-overflow-hidden xs-border xs-p2 xs-mb2" style="height:85px;">
  <p class="xs-mb1">.xs-overflow-hidden</p>
  <p>...</p>
</div>

<div class="xs-overflow-auto xs-border xs-p2 xs-mb2" style="height:85px;">
  <p class="xs-mb1">.xs-overflow-auto</p>
  <p>...</p>
</div>

<div class="xs-overflow-scroll xs-border xs-p2 xs-mb2" style="height:85px;">
  <p class="xs-mb1">.xs-overflow-scroll</p>
  <p>...</p>
</div>

Width and Height

Most widths are achieved using Solid's grid classes. However, Solid also provides an .xs-fit class for setting an element's max-width to 100%, as well as an .xs-width-auto to set an element's width to auto. Use .xs-full-height to set an element's height to 100%.

.xs-fit
.xs-width-auto
.xs-full-height
<div class="xs-fit xs-border xs-mb1">.xs-fit</div>

<div class="xs-width-auto xs-border xs-mb1">.xs-width-auto</div>

<div style="height:85px;" class="xs-border xs-p1">
  <div class="xs-full-height xs-border xs-col-4">.xs-full-height</div>
</div>

Spatial Units and Naming

Margin, padding, and positioning classes use spatial values 0-6 in the class names. Solid also has a half spacing unit, referred to as 05. Each value represents a specific spacing unit based on 1rem=16px. Each class uses the first letter of its name to indicate properties and directions. For example, in the class .xs-my0, "m" stands for margin.

Spatial Units

  • 0 = 0
  • 05 = .25rem
  • 1 = .5rem
  • 2 = 1rem
  • 3 = 1.5rem
  • 4 = 2rem
  • 5 = 3rem
  • 6 = 4.5rem

Properties

  • m = margin
  • p = padding
  • z = z-index

Directions

  • t = top
  • b = bottom
  • r = right
  • l = left
  • x = x-axis
  • y = y-axis

Spacing

Uniform Spacing

Uniform spacing classes add equal spacing to all sides of an element. These classes can be used with spatial values 0-6, and the half spacing unit 05.

Margin

  • .xs-m0
  • .xs-m05
  • .xs-m1
  • .xs-m2
  • .xs-m3
  • .xs-m4
  • .xs-m5
  • .xs-m6

Padding

  • .xs-p0
  • .xs-p05
  • .xs-p1
  • .xs-p2
  • .xs-p3
  • .xs-p4
  • .xs-p5
  • .xs-p6
xs-m05
xs-m1
xs-m2
xs-m3
xs-p05
xs-p1
xs-p2
xs-p3
<div class="clearfix xs-border-lighter">
  <div class="xs-border xs-float-left xs-inline-block xs-m05">xs-m05</div>
  <div class="xs-border xs-float-left xs-inline-block xs-m1">xs-m1</div>
  <div class="xs-border xs-float-left xs-inline-block xs-m2">xs-m2</div>
  <div class="xs-border xs-float-left xs-inline-block xs-m3">xs-m3</div>
  <div class="xs-border xs-float-left xs-inline-block xs-p05">xs-p05</div>
  <div class="xs-border xs-float-left xs-inline-block xs-p1">xs-p1</div>
  <div class="xs-border xs-float-left xs-inline-block xs-p2">xs-p2</div>
  <div class="xs-border xs-float-left xs-inline-block xs-p3">xs-p3</div>
</div>

Individual Spacing

Individual spacing classes are used to add space to a specific side of an element. These classes can be used with spatial values 0-6, and the half spacing unit 05.

Margin

  • .xs-mt1
  • .xs-mb1
  • .xs-mr1
  • .xs-ml1
  • .xs-mx1
  • .xs-my1
  • .xs-mx-auto
  • margin-top
  • margin-bottom
  • margin-right
  • margin-left
  • margin left and right
  • margin top and bottom
  • auto (horizontally centered)

Padding

  • .xs-pt1
  • .xs-pb1
  • .xs-pr1
  • .xs-pl1
  • .xs-px1
  • .xs-py1
  • padding-top
  • padding-bottom
  • padding-right
  • padding-left
  • padding left and right
  • padding top and bottom
xs-mt3
xs-mt4
xs-mt5
xs-mt6
xs-pl3
xs-pl4
xs-pl5
xs-pl6
<div class="clearfix xs-border-lighter">
  <div class="xs-border xs-float-left xs-inline-block xs-mt3">xs-mt3</div>
  <div class="xs-border xs-float-left xs-inline-block xs-mt4">xs-mt4</div>
  <div class="xs-border xs-float-left xs-inline-block xs-mt5">xs-mt5</div>
  <div class="xs-border xs-float-left xs-inline-block xs-mt6">xs-mt6</div>
  <div class="xs-border xs-float-left xs-inline-block xs-pl3">xs-pl3</div>
  <div class="xs-border xs-float-left xs-inline-block xs-pl4">xs-pl4</div>
  <div class="xs-border xs-float-left xs-inline-block xs-pl5">xs-pl5</div>
  <div class="xs-border xs-float-left xs-inline-block xs-pl6">xs-pl6</div>
</div>

Positioning

For positioning, an element can be set to .xs-relative, .xs-absolute, .xs-fixed or .xs-static. Positioning classes such as .xs-relative can be used in conjunction with the directional classes, such as .xs-t1 to position the element. The directional classes are used with spatial values 0-6 and the half space variable 05.

  • .xs-relative
  • .xs-absolute
  • .xs-fixed
  • .xs-static
  • .xs-t1
  • .xs-b1
  • .xs-r1
  • .xs-l1
  • relative
  • absolute
  • fixed
  • static
  • top
  • bottom
  • right
  • left

Z-Index

Use the z-index classes to set the stack order of an element. These classes can be used with values 1-4.

  • .xs-z1
  • .xs-z2
  • .xs-z3
  • .xs-z4
  • z-index: 100
  • z-index: 200
  • z-index: 300
  • z-index: 400
.xs-relative .xs-t2 .xs-l2
.xs-relative
.xs-absolute .xs-t0 .xs-l6
.xs-absolute .xs-t1 .xs-l1 .xs-z1
.xs-absolute .xs-t4 .xs-l4 .xs-z2
<div class="xs-border xs-p2">
  <div class="xs-relative xs-t2 xs-l2 xs-border">.xs-relative .xs-t2 .xs-l2</div>
</div>

<div class="xs-relative xs-border xs-p2">
  .xs-relative
  <div class="xs-absolute xs-t0 xs-l6 xs-border">.xs-absolute .xs-t0 .xs-l6</div>
</div>

<div class="xs-relative xs-p4">
  <div class="xs-absolute xs-t1 xs-l1 xs-z1 xs-border xs-p1">.xs-absolute .xs-t1 .xs-l1 .xs-z1</div>
  <div class="xs-absolute xs-t4 xs-l4 xs-z2 xs-border xs-p1 fill-white">.xs-absolute .xs-t4 .xs-l4 .xs-z2</div>
</div>

Vertical Alignment

Vertically align elements with .xs-align-bottom, .xs-align-middle or .xs-align-top classes.

This example demonstrates how vertical align classes work in a table or faux-table environment. .xs-align-bottom .xs-align-middle .xs-align-top
userThis image uses .xs-align-bottom
userThis image uses .xs-align-middle
userThis image uses .xs-align-top
<table class="table-border">
  <tr>
    <td class="xs-col-3">This example demonstrates how vertical align classes work in a table or faux-table environment.</td>
    <td class="xs-col-3 xs-align-bottom">.xs-align-bottom</td>
    <td class="xs-col-3 xs-align-middle">.xs-align-middle</td>
    <td class="xs-col-3 xs-align-top">.xs-align-top</td>
  </tr>
</table>
<div class="xs-mb2">
  <img src="images/user.png" height="50" width="50" alt="user" class="circle xs-align-bottom" />This image uses .xs-align-bottom
</div>
<div class="xs-mb2">
  <img src="images/user.png" height="50" width="50" alt="user" class="circle xs-align-middle" />This image uses .xs-align-middle
</div>
<div class="xs-mb2">
  <img src="images/user.png" height="50" width="50" alt="user" class="circle xs-align-top" />This image uses .xs-align-top
</div>