Responsive

Responsive Prefixes

Solid's utility, typography and grid classes are built with reponsive layouts in mind. Use the prefixes .xs-, .sm-, .md-, and .lg- to quickly and easily adjust your layout and content for different screen sizes and devices.

Resize your browser to see each breakpoint in action:

.xs-col-12

.sm-col-6

.md-col-4

.lg-col-3

.xs-col-12

.sm-col-6

.md-col-4

.lg-col-3

.xs-col-12

.sm-col-6

.md-col-4

.lg-col-3

.xs-col-12

.sm-col-6

.md-col-12

.lg-col-3

  <div class="clearfix">
  <div class="col xs-col-12 sm-col-6 md-col-4 lg-col-3 xs-border">
    <p class="xs-block sm-hide">.xs-col-12</p>
    <p class="xs-hide sm-block md-hide">.sm-col-6</p>
    <p class="xs-hide md-block lg-hide">.md-col-4</p>
    <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 sm-col-6 md-col-4 lg-col-3 xs-border">
    <p class="xs-block sm-hide">.xs-col-12</p>
    <p class="xs-hide sm-block md-hide">.sm-col-6</p>
    <p class="xs-hide md-block lg-hide">.md-col-4</p>
    <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 sm-col-6 md-col-4 lg-col-3 xs-border">
    <p class="xs-block sm-hide">.xs-col-12</p>
    <p class="xs-hide sm-block md-hide">.sm-col-6</p>
    <p class="xs-hide md-block lg-hide">.md-col-4</p>
    <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 sm-col-6 md-col-12 lg-col-3 xs-border">
    <p class="xs-block sm-hide">.xs-col-12</p>
    <p class="xs-hide sm-block md-hide">.sm-col-6</p>
    <p class="xs-hide md-block lg-hide">.md-col-12</p>
    <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
</div>

How It Works

By default, Solid works responsively from the lowest breakpoint and up, as opposed to largest-to-smallest. This means that .xs- is the default prefix when writing Solid markup.

Prefixes Description
xs- Apply at min-width of 0rem
sm- Apply at min-width of 40rem
md- Apply at min-width of 52rem
lg- Apply at min-width of 64rem

What Has a Responsive Prefix

To avoid code bloat and unneccessary prefixing, not all Solid's classes are responsive. Below is an easy reference list of what is responsive natively in Solid:

Responsive classes Description
Text Sizing .xs-text-*n
Text Alignment .xs-text-left, .xs-text-center, .xs-text-right, .xs-text-justify
Display .xs-inline, .xs-block, .xs-inline-block, .xs-hide
Floats .xs-float-left, .xs-float-right, .xs-float-none
Overflow .xs-overflow-hidden, .xs-overflow-auto, .xs-overflow-scroll, .xs-overflow-visible,
Margin .xs-m*n
Padding .xs-p*n
Positioning .xs-relative, .xs-absolute, .xs-fixed, .xs-static
Position Spacing .xs-zn, .xs-tn, .xs-rn, .xs-bn, .xs-ln
Width .xs-fit, .xs-width-auto
Height .xs-full-height
Borders .xs-border, .xs-border-*
The Grid .xs-col-n
Grid Offsets .xs-offset-n
Block Grid .xs-block-grid-n