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!
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
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
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
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
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.