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