Assign margin or padding to an element or a subset of its sides with
shorthand classes. Includes support for individual properties, all
properties, and vertical and horizontal properties. All classes are multiples
on the global default value, 10px
.
The classes are named using the format: {property}-{sides}-{size}
Where property is one of:
Where sides is one of:
*-top
*-bottom
*-left
*-right
*-left
and *-right
*-top
and *-bottom
Where size is one of:
margin
or padding
by setting it to 0
margin
or padding
to $spacer-x
or $spacer-y
margin
or padding
to $spacer-x * 1.5
or $spacer-y * 1.5
margin
or padding
to $spacer-x * 2
or $spacer-y * 2
margin
or padding
to $spacer-x * 3
or $spacer-y * 3
Here are some representative examples of these classes:
.m-t-0 {
margin-top: 0 !important;
}
.m-l-1 {
margin-left: $spacer-x !important; /* 10px */
}
.p-x-2 {
padding-left: ($spacer-x * 1.5) !important; /* 15px */
padding-right: ($spacer-x * 1.5) !important; /* 15px */
}
.p-y-3 {
padding-top: ($spacer-y * 2) !important; /* 20px */
padding-bottom: ($spacer-y * 2) !important; /* 20px */
}
.p-a-4 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important; /* 30px 30px */
}
Additionally, PixelAdmin also includes an .m-x-auto
class for
horizontally centering fixed-width block level content by setting the
horizontal margins to auto.
Set borders to an element or a subset of its sides with shorthand classes.
The classes are named using the format: b-{sides}-{size}
Where sides is one of:
*-top
*-bottom
*-left
*-right
*-left
and *-right
*-top
and *-bottom
Where size is one of:
border-width
to 0
border-width
to 1px
border-width
to 2px
border-width
to 3px
Here are some representative examples of these classes:
.b-t-0 {
border-top-width: 0 !important;
}
.b-l-1 {
border-left-width: 1px !important;
border-left-style: solid !important;
}
.b-x-2 {
border-left-width: 2px !important;
border-left-style: solid !important;
border-right-width: 2px !important;
border-right-style: solid !important;
}
.b-a-3 {
border-width: 3px !important;
border-style: solid !important;
}
.page-block
- adds horizontal padding and negative horizontal margins (which equals .px-content
's horizontal padding) to the element.
...
...
.page-wide-block
- adds negative horizontal margins (which equals .px-content
's horizontal padding) to the element.
...
...
.panel-block
- adds horizontal padding (which equals .panel-body
's horizontal padding) to the element.
Also adds negative margins when the element is within a .panel-body
block.
...
...
...
.panel-wide-block
- adds negative horizontal margins (which equals .panel-body
's horizontal padding) to the element.
...
...
.width-{breakpoint}-auto
classes set element's width
property to auto
depending on the current viewport size.
Where breakpoint is one of:
Element will reset width
property only if viewport width is between 479px and 768px
.display-{mode}
classes set element's display
property to mode
.
.position-{mode}
classes set element's position
property to mode
.
Text with an inline image.
These utility classes float an element to the left or right, or disable floating,
based on the current viewport size using the CSS float
property.
!important
is included to avoid specificity issues. These use the
same viewport width breakpoints as the grid system.
Easily set vertical alignment of the element.
Easily realign text to components with text alignment classes.
Justified text.
No wrap text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Right aligned text on viewports sized SM (small) or wider.
Right aligned text on viewports sized MD (medium) or wider.
Right aligned text on viewports sized LG (large) or wider.
Right aligned text on viewports sized XL (extra-large) or wider.
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Quickly change the weight (boldness) of text or italicize text.
Normal weight text.
Light text.
Semibold text.
Bold text.
Italicized text.
Quickly change the line-height
of text.
Line height is 1.
Underlined text
Quickly change the font size of text.
Font size - 11px
Font size - 12px
Font size - 13px
Font size - 14px
Font size - 15px
Font size - 16px
Font size - 17px
Font size - 18px
Font size - 20px
Font size - 24px
Font size - 28px
Font size - 34px
Font size - 40px
Font size - 46px
Font size - 52px
Quickly change the border-radius
of the element.
.border-rounded
.border-round
.border-radius-0
Note: .bg-*
classes also set the element's border-color
property.