Utilities
Classes with a single purpose to reduce the frequency of highly repetitive declarations.
Solid Background
Eighteen available colors to be use for background
.bg-white
.bg-gray-lightest
.bg-gray-lighter
.bg-gray-light
.bg-gray
.bg-gray-dark
.bg-primary
.bg-success
.bg-warning
.bg-danger
.bg-info
.bg-inverse
.bg-indigo
.bg-maroon
.bg-orange
.bg-teal
.bg-pink
.bg-yellow
Background Opacity
Background opacity is only available for colors inverse,black and white.
Note: The above three colors are available from 9 to 1. bg-opacity-[color]-[9-1]
Blend Mode
Blend mode only works on the latest version of browsers.
.blend-multiply
.blend-overlay
.blend-screen
.blend-darken
.blend-lighten
.blend-color-dodge
.blend-color-burn
.blend-hard-light
.blend-soft-light
.blend-difference
.blend-exclusion
.blend-hue
.blend-saturation
.blend-color
.blend-luminosity
Borders
Use border utilities to quickly style the border and border-radius of an element.
| Class name | Style | Output |
|---|---|---|
| .bd-transparent | border-color: transparent | Any element that already have border |
| .bd | border: 1px solid $gray-lightest; | |
| .bd-t | border-top: 1px solid $gray-lightest | |
| .bd-r | border-right: 1px solid $gray-lightest | |
| .bd-b | border-bottom: 1px solid $gray-lightest | |
| .bd-l | border-left: 1px solid $gray-lightest | |
| .bd-0 | border-width: 0 | |
| .bd-1 | border-width: 1px | |
| .bd-2 | border-width: 2px | |
| .bd-3 | border-width: 3px | |
| .bd-4 | border-width: 4px | |
| .bd-5 | border-width: 5px | |
| .bd-t-0 | border-top: 0 | |
| .bd-r-0 | border-right: 0 | |
| .bd-b-0 | border-bottom: 0 | |
| .bd-l-0 | border-left: 0 | |
| .bd-x-0 | border-left: 0; border-right: 0 |
|
| .bd-y-0 | border-top: 0; border-bottom: 0 |
|
| .bd-x-1 | border-left-width: 1px; border-right-width: 1px |
|
| .bd-y-1 | border-top-width: 1px; border-bottom-width: 1px |
|
| .bd-color-primary | border-color: $brand-primary | |
| .bd-color-success | border-color: $brand-success | |
| .bd-color-warning | border-color: $brand-warning | |
| .bd-color-danger | border-color: $brand-danger | |
| .bd-color-info | border-color: $brand-info | |
| .bd-color-inverse | border-color: $brand-inverse | |
| .bd-color-gray-dark | border-color: $gray-dark | |
| .bd-color-gray | border-color: $gray | |
| .bd-color-gray-light | border-color: $gray-light | |
| .bd-color-gray-lighter | border-color: $gray-lighter | |
| .bd-color-gray-lightest | border-color: $gray-lightest | |
| .bd-color-orange | border-color: $color-orange | |
| .bd-color-pink | border-color: $color-pink | |
| .bd-color-yellow | border-color: $color-yellow | |
| .bd-color-teal | border-color: $color-teal | |
| .bd-color-turquiose | border-color: $color-turquiose | |
| .bd-color-white | border-color: $color-white |
Border Radius
Add classes to an element to easily round its corners.
| Class name | Output |
|---|---|
| .rounded | |
| .rounded-top | |
| .rounded-right | |
| .rounded-bottom | |
| .rounded-left | |
| .rounded-top-0 | |
| .rounded-right-0 | |
| .rounded-bottom-0 | |
| .rounded-left-0 | |
| .rounded-circle |
Heights
Use height utilities to quickly style the height of an element.
| Class name | Output |
|---|---|
| .ht-(1-9) | height: 1px to 9px of an element |
| .ht-(10-95) | height: 10px to 95px of an element with step of 5px |
| .ht-(100-800) | height: 100px to 800px of an element with step of 50px |
Widths
Use height utilities to quickly style the width of an element.
| Class name | Output |
|---|---|
| .wd-(1-9) | width: 1px to 9px of an element |
| .wd-(10-95) | width: 10px to 95px of an element with step of 5px |
| .wd-(100-1000) | width: 100px to 1000px of an element with step of 50px |
| .wd-(5-100)p | width: 5% to 100% of an element with step of 5% |
Margins
Use margin utilities to quickly style margins of an element.
| Class name | Output |
|---|---|
| .mg-(0-100) | Example: .mg-90 (margin: 90px) |
| .mg-(x,y)-(0-100) | Example: .mg-x-90 (margin-left: 90px; margin-right: 90px) |
| .mg-(t,r,b,l)-(0-9) | Example: .mg-r-5 (margin-right: 5px) |
| .mg-(t,r,b,,l)-(10-100) | Example: .mg-t-80 (margin-top: 80px) |
Padding
Use padding utilities to quickly style padding of an element.
| Class name | Style |
|---|---|
| .pd-(0-9) | padding: 0 to 9px (0,1,2...9) |
| .pd-(10-95) | Example: .pd-20 (padding: 20px) |
| .pd-(100-200) | Example: .pd-120 (padding: 120px; ) |
| .pd-(x,y,t,r,b,l)-(0-9) | Example: .pd-t-5 (padding-top: 5px) |
| .pd-(x,y,t,r,b,l)-(10-95) | Example: .pd-y-45 (padding-top: 45px; padding-bottom: 45px) |
| .pd-(x,y,t,r,b,l)-(100-200) | Example: .pd-b-130 (padding-bottom: 130px) |
Position
Use position utilities to quickly style position of an element.
| Class name | Style/Description |
|---|---|
| .pos-absolute | position: absolute; |
| .pos-relative | position: relative; |
| .pos-fixed | position: fixed; |
| .pos-absolute-top | Top absolute position of an element |
| .pos-absolute-right | Right absolute position of an element |
| .pos-absolute-bottom | Bottom absolute position of an element |
| .pos-absolute-left | Left absolute position of an element |
Typography
Additional classes related to typography.
| Class | Output |
|---|---|
| .tx-light | Blockbox Multi-Purpose HTML5 Template |
| .tx-normal | Blockbox Multi-Purpose HTML5 Template |
| .tx-medium | Blockbox Multi-Purpose HTML5 Template |
| .tx-semibold | Blockbox Multi-Purpose HTML5 Template |
| .tx-bold | Blockbox Multi-Purpose HTML5 Template |
| .tx-uppercase | Blockbox Multi-Purpose HTML5 Template |
| .tx-inverse | Blockbox Multi-Purpose HTML5 Template |
| .tx-gray-dark | Blockbox Multi-Purpose HTML5 Template |
| .tx-gray | Blockbox Multi-Purpose HTML5 Template |
| .tx-gray-light | Blockbox Multi-Purpose HTML5 Template |
| .tx-gray-lighter | Blockbox Multi-Purpose HTML5 Template |
| .tx-primary | Blockbox Multi-Purpose HTML5 Template |
| .tx-success | Blockbox Multi-Purpose HTML5 Template |
| .tx-warning | Blockbox Multi-Purpose HTML5 Template |
| .tx-danger | Blockbox Multi-Purpose HTML5 Template |
| .tx-info | Blockbox Multi-Purpose HTML5 Template |
| .tx-pink | Blockbox Multi-Purpose HTML5 Template |
| .tx-orange | Blockbox Multi-Purpose HTML5 Template |
| .tx-maroon | Blockbox Multi-Purpose HTML5 Template |
| .tx-yellow | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-1 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-2 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-3 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-4 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-5 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-6 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-neg-1 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-neg-2 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-neg-3 | Blockbox Multi-Purpose HTML5 Template |
| .tx-spacing-neg-4 | Blockbox Multi-Purpose HTML5 Template |
| .tx-center | Blockbox Multi-Purpose HTML5 Template |
| .tx-right | Blockbox Multi-Purpose HTML5 Template |
© 2017. Blockbox UI. All Rights Reserved. Developed by ThemePixels