Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes.
|
Small (sm) |
Medium (md) |
Large (lg) |
Extra Large (xl) |
Other |
Breakpoint
width (px) |
≥576px |
≥768px |
≥992px |
≥1200px |
Applies to all screen sizes |
Container
max-width |
540px |
720px |
960px |
1140px |
- |
| Class |
.sp-col-sm-* |
.sp-col-md-* |
.sp-col-lg-* |
.sp-col-xl-* |
.sp-col-* |
* Represents the number of columns a given element should span, ranging from 1 to 12.
sp-col-6
sp-col-3
sp-col-3
sp-col-lg-3
sp-col-sm-12
sp-col-lg-9
sp-col-sm-12
<div class="sp-row">
<div class="sp-col sp-bg-primary">sp-col</div>
<div class="sp-col sp-bg-secondary">sp-col</div>
</div>
<div class="sp-row">
<div class="sp-col-12 sp-bg-primary">sp-col-12</div>
</div>
<div class="sp-row">
<div class="sp-col-6 sp-bg-primary">sp-col-6</div>
<div class="sp-col-3 sp-bg-secondary">sp-col-3</div>
<div class="sp-col-3 sp-bg-primary">sp-col-3</div>
</div>
<div class="sp-row">
<div class="sp-col-lg-3 sp-col-sm-12 sp-bg-secondary">sp-col-lg-3 sp-col-sm-12</div>
<div class="sp-col-lg-9 sp-col-sm-12 sp-bg-primary">sp-col-lg-9 sp-col-sm-12</div>
</div>
Responsive Display
Quickly and responsively toggle the display value of components with our display utilities.
| Class |
Small (sm) |
Medium (md) |
Large (lg) |
| .sp-hidden |
.sp-sm-hidden |
.sp-md-hidden |
.sp-lg-hidden |
| .sp-block |
.sp-sm-block |
.sp-md-block |
.sp-lg-block |
| .sp-flex |
.sp-sm-flex |
.sp-md-flex |
.sp-lg-flex |
| .sp-inline |
.sp-sm-inline |
.sp-md-inline |
.sp-lg-inline |
Block
Inline
Inline
Flex(center)
<div class="sp-hidden"></div>
<div class="sp-block"></div>
<div class="sp-flex"></div>
<div class="sp-inline"></div>
Responsive Margin & Padding
SP includes a wide range of shorthand responsive margin and padding classes to modify element’s appearance.
| Property |
Base |
Small (sm) |
Medium (md) |
Large (lg) |
| .sp-{size}-m-{value} |
.sp-m-1 |
.sp-sm-m-2 |
.sp-md-m-3 |
.sp-lg-m-4 |
| .sp-{size}-p-{value} |
.sp-p-1 |
.sp-sm-p-2 |
.sp-md-p-3 |
.sp-lg-p-4 |
| .sp-{size}-mt-{value} |
.sp-mt-1 |
.sp-sm-mt-2 |
.sp-md-mt-3 |
.sp-lg-mt-4 |
| .sp-{size}-mb-{value} |
.sp-mb-1 |
.sp-sm-mb-2 |
.sp-md-mb-3 |
.sp-lg-mb-4 |
| .sp-{size}-ms-{value} |
.sp-ms-1 |
.sp-sm-ms-2 |
.sp-md-ms-3 |
.sp-lg-ms-4 |
| .sp-{size}-me-{value} |
.sp-me-1 |
.sp-sm-me-2 |
.sp-md-me-3 |
.sp-lg-me-4 |
* m stands for margin, p stands for padding, mt for margin-top, mb for margin-bottom, me for margin-end (right in LTR), ms for margin-start (left in LTR), pt stands for padding-top, pb stands for padding-bottom, pe stands for padding-end (right in LTR), and ps stands for padding-start (left in LTR).
* {size} is an optional breakpoint, while {value} is either a numeric value (0 to 8), or "auto" for automatic margin.
sp-m-3
sp-mt-3
sp-mb-3
sp-p-3
<div class="sp-m-3"></div>
<div class="sp-mt-3"></div>
<div class="sp-mb-3"></div>
<div class="sp-p-3"></div>
Text Alignment
Quickly align text to components using text alignment classes.
Text Left
Text Right
Text Center
Text Justify
<div class="sp-text-left">Text Left</div>
<div class="sp-text-right">Text Right</div>
<div class="sp-text-justify">Text Center</div>
<div class="sp-text-center">Text Justify</div>
Flexbox Utilities
Efficiently manage the layout, alignment, and spacing of elements with a comprehensive set of responsive Flexbox Utilities, perfect for creating flexible and adaptive designs across various components and containers.
| Class |
Base |
Small (sm) |
Medium (md) |
Large (lg) |
| .sp-{size}-flex-{direction} |
.sp-flex-row |
.sp-sm-flex-row-reverse |
.sp-md-flex-column |
.sp-lg-flex-column-reverse |
| .sp-{size}-justify-content-{side} |
.sp-justify-content-justify |
.sp-sm-justify-content-left |
.sp-md-justify-content-center |
.sp-lg-justify-content-right |
| .sp-{size}-align-items-{position} |
.sp-align-items-stretch |
.sp-sm-align-items-top |
.sp-md-align-items-center |
.sp-lg-align-items-bottom |
sp-justify-content-justify &
sp-align-items-center
sp-justify-content-center
<div class="sp-flex sp-flex-row sp-justify-content-justify sp-align-items-center">
<div>sp-justify-content-justify &</div>
<div>sp-align-items-center</div>
</div>
<div class="sp-flex sp-flex-column sp-align-items-top">
<div>sp-align-items-top</div>
</div>
<div class="sp-flex sp-flex-column sp-align-items-bottom">
<div>sp-align-items-bottom</div>
</div>
<div class="sp-flex sp-justify-content-center">
<div>sp-justify-content-center</div>
</div>
Positions
Use these helpers for quickly configuring the position of an element.
<div class="position-shape sp-position-absolute sp-top-0 sp-start-5"></div>
<div class="position-shape sp-position-absolute sp-top-50 sp-start-45"></div>
<div class="position-shape sp-position-absolute sp-top-100 sp-start-85"></div>
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
<div class="sp-mb-3">
<label for="exampleInputEmail1" class="sp-form-label"></label>
<input type="email" class="sp-form-control" id="exampleInputEmail1">
</input>
<div id="emailHelp" class="sp-form-text"></div>
</div>
<div class="sp-mb-3">
<label for="exampleInputPassword1" class="sp-form-label"></label>
<input type="password" class="sp-form-control" id="exampleInputPassword1">
</input>
</div>
<div class="sp-mb-3 sp-form-check">
<input type="checkbox" class="sp-form-check-input" id="exampleCheck1"></input>
<label class="sp-form-check-label" for="exampleCheck1"></label>
</div>
<button type="submit" class="sp-btn sp-btn-secondary"></button>
Align Items
Use the align-items utilities on flexbox containers to adjust the alignment of flex items.
<div class="sp-align-items-top"></div>
<div class="sp-align-items-bottom"></div>
<div class="sp-align-items-center"></div>
<div class="sp-align-items-stretch"></div>
