Helpers & Extensions
Hubble comes with a load of helpers and extensions so you can easily apply styles no matter your workflow.
Helper classes allow you to apply styles via HTML, while extensions keep your CSS
stylesheets compact.
Hubble contains the following helpers and extensions.
Backgrounds
| Name |
CSS |
.bg-primary | background-color: $brand-primary |
|---|
.bg-secondary | background-color: $brand-secondary |
|---|
.bg-gray-dark | background-color: $gray-dark |
|---|
.bg-gray | background-color: $gray |
|---|
.bg-gray-light | background-color: $gray-light |
|---|
.bg-gray-lighter | background-color: $gray-lighter |
|---|
.bg-gray-lightest | background-color: $gray-lightest |
|---|
.bg-success | background-color: $brand-success |
|---|
.bg-info | background-color: $brand-info |
|---|
.bg-danger | background-color: $brand-danger |
|---|
.bg-warning | background-color: $brand-warning |
|---|
.bg-transparent | background-color: transparent |
|---|
.bg-white | background-color: #fff |
|---|
.bg-black | background-color: $black |
|---|
Borders
| Name |
CSS |
border-primary | border-color: $brand-primary |
|---|
border-secondary | border-color: $brand-secondary |
|---|
border-gray-dark | border-color: $gray-dark |
|---|
border-gray | border-color: $gray |
|---|
border-gray-light | border-color: $gray-light |
|---|
border-gray-lighter | border-color: $gray-lighter |
|---|
border-gray-lightest | border-color: $gray-lightest |
|---|
border-transparent | border-color: transparent |
|---|
border-success | border-color: $brand-success |
|---|
border-info | border-color: $brand-info |
|---|
border-danger | border-color: $brand-danger |
|---|
border-warning | border-color: $brand-warning |
|---|
border-size-1 | border-width: 1px |
|---|
border-size-2 | border-width: 2px |
|---|
border-size-3 | border-width: 3px |
|---|
border-solid | border-style: solid |
|---|
border-dashed | border-style: dashed |
|---|
border-dotted | border-style: dotted |
|---|
circle | border-radius: 50% |
|---|
border-radius | border-radius: $border-radius |
|---|
border-radius-0 | border-radius: 0 |
|---|
border-radius-1 | border-radius: 1px |
|---|
border-radius-2 | border-radius: 2px |
|---|
border-radius-3 | border-radius: 3px |
|---|
border-radius-4 | border-radius: 4px |
|---|
border-radius-5 | border-radius: 5px |
|---|
shadow-out | box-shadow: $box-shadow-out |
|---|
shadow-in | box-shadow: $box-shadow-in |
|---|
shadow-none | box-shadow: none |
|---|
border-s | border-left: none; border-right: none |
|---|
border-n | border-left: none; border-right: none |
|---|
border-e | border-top: none; border-bottom: none |
|---|
border-w | border-top: none; border-bottom: none |
|---|
border-s | border-top: none |
|---|
border-n | border-bottom: none |
|---|
border-e | border-left: none |
|---|
border-w | border-right: none |
|---|
Centering
| Name |
CSS |
.center-horizontal |
float: none;
margin-left: auto;
margin-right: auto;
|
.center-vertical |
position: absolute;
top: 50%;
left: 50%;
|
|---|
Colors
| Name |
CSS |
color-primary | color: $brand-primary |
|---|
color-secondary | color: $brand-secondary |
|---|
color-gray-dark | color: $gray-dark |
|---|
color-gray | color: $gray |
|---|
color-gray-light | color: $gray-light |
|---|
color-gray-lighter | color: $gray-lighter |
|---|
color-gray-lightest | color: $gray-lightest |
|---|
color-success | color: $brand-success |
|---|
color-info | color: $brand-info |
|---|
color-danger | color: $brand-danger |
|---|
color-warning | color: $brand-warning |
|---|
color-gold | color: #d5b245; |
|---|
color-transparent | color: transparent |
|---|
color-white | color: #fff |
|---|
color-black | color: $black; |
|---|
Displays
| Name |
CSS |
hide-overflow | overflow: hidden |
|---|
show-overflow | overflow: visible |
|---|
scroll-overflow | overflow: scroll |
|---|
block | display: block |
|---|
inline-block | display: inline-block |
|---|
table | display: table |
|---|
table-cell | display: table-cell |
|---|
no-display | display: none |
|---|
visibility-show | visibility: visible |
|---|
visibility-hide | visibility: hidden |
|---|
opacity-hide | opacity: 0 |
|---|
opacity-show | opacity: 1 |
|---|
sr-only | display: none |
|---|
hidden | display: none |
|---|
no-select | user-select: none |
|---|
img-responsive | display: block;width: 100%;height: auto |
|---|
Flex
| Name |
CSS |
flex | display: flex |
|---|
flex-row | flex-direction: row |
|---|
flex-column | flex-direction: column |
|---|
flex-space-around | justify-content: space-around |
|---|
flex-space-between | justify-content: space-between |
|---|
flex-start | justify-content: flex-start |
|---|
flex-center | justify-content: center |
|---|
flex-end | justify-content: flex-end |
|---|
flex-wrap | flex-wrap: wrap |
|---|
flex-nowrap | flex-wrap: nowrap |
|---|
Floats
| Name |
CSS |
float-left | float: left |
|---|
float-right | float: right |
|---|
float-none | float: none |
|---|
clear | clear: both |
|---|
Lists
| Name |
CSS |
list-style-none | list-style: none |
|---|
list-style-bullet | list-style-type: disc |
|---|
list-style-empty-bullet | list-style-type: circle |
|---|
list-style-numbers | list-style-type:decimal-leading-zero |
|---|
Margins
| Name |
CSS |
margin-center | margin: 0 auto |
|---|
no-margin | margin: 0 |
|---|
margin-sm-n | margin-top: map-get($margin-sizes, sm) |
|---|
margin-sm-e | margin-right: map-get($margin-sizes, sm) |
|---|
margin-sm-s | margin-bottom: map-get($margin-sizes, sm) |
|---|
margin-sm-w | margin-left: map-get($margin-sizes, sm) |
|---|
margin-md-n | margin-top: map-get($margin-sizes, md) |
|---|
margin-md-e | margin-right: map-get($margin-sizes, md) |
|---|
margin-md-s | margin-bottom: map-get($margin-sizes, md) |
|---|
margin-md-w | margin-left: map-get($margin-sizes, md) |
|---|
margin-lg-n | margin-top: map-get($margin-sizes, lg) |
|---|
margin-lg-e | margin-right: map-get($margin-sizes, lg) |
|---|
margin-lg-s | margin-bottom: map-get($margin-sizes, lg) |
|---|
margin-lg-w | margin-left: map-get($margin-sizes, lg) |
|---|
margin-xl-n | margin-top: map-get($margin-sizes, xl) |
|---|
margin-xl-e | margin-right: map-get($margin-sizes, xl) |
|---|
margin-xl-s | margin-bottom: map-get($margin-sizes, xl) |
|---|
margin-xl-w | margin-left: map-get($margin-sizes, xl) |
|---|
Paddings
| Name |
CSS |
no-padding | padding: 0 |
|---|
pad-5 | padding: 5px |
|---|
pad-10 | padding: 10px |
|---|
pad-15 | padding: 15px |
|---|
pad-20 | padding: 20px |
|---|
pad-25 | padding: 25px |
|---|
pad-30 | padding: 30px |
|---|
pad-35 | padding: 35px |
|---|
pad-40 | padding: 40px |
|---|
Positions
| Name |
CSS |
no-padding | padding: 0 |
|---|
pad-5 | padding: 5px |
|---|
pad-10 | padding: 10px |
|---|
pad-15 | padding: 15px |
|---|
pad-20 | padding: 20px |
|---|
pad-25 | padding: 25px |
|---|
pad-30 | padding: 30px |
|---|
pad-35 | padding: 35px |
|---|
pad-40 | padding: 40px |
|---|
relative | position: relative |
|---|
absolute | position: absolute |
|---|
static | position: static |
|---|
fixed | position: fixed |
|---|
top-0 | top: 0 |
|---|
bottom-0 | bottom: 0 |
|---|
right-0 | right: 0 |
|---|
left-0 | left: 0 |
|---|
top-50 | top: 50% |
|---|
bottom-50 | bottom: 50% |
|---|
right-50 | right: 50% |
|---|
left-50 | left: 50% |
|---|
full-width | width: 100% |
|---|
full-height | height: 100% |
|---|
width-50 | width: 50% |
|---|
width-0 | width: 0 |
|---|
width-auto | width: auto |
|---|
height-auto | height: auto |
|---|
v-middle | vertical-align: middle |
|---|
v-sub | vertical-align: sub |
|---|
Resets
| Name |
CSS |
no-margin | margin: 0 |
|---|
no-padding | padding: 0 |
|---|
no-float | float: none |
|---|
no-background | background: transparent |
|---|
no-border | border: 0 |
|---|
hide-overflow | overflow: hidden |
|---|
show-overflow | overflow: visible |
|---|
no-select | user-select: none;cursor: default |
|---|
Transitions
| Name |
CSS |
webkit-gl | -webkit-transform: translate3d(0,0,0) |
|---|
ease-xs | transition: 0.2s ease |
|---|
ease | transition: 0.3s ease |
|---|
ease-md | transition: 0.5s ease |
|---|
ease-xl | transition: 1.5s ease |
|---|
no-transition | transition: 0s linear |
|---|
Typography
| Name |
CSS |
no-margin | margin: 0 |
|---|
sans-serif | font-family: $font-family-sans-serif |
|---|
monospace | font-family: $font-family-monospace |
|---|
serif | font-family: $font-family-monospace |
|---|
heading-font | font-family: $headings-font-family |
|---|
font-lightest | font-weight: $text-lightest |
|---|
font-light | font-weight: $text-light |
|---|
font-normal | font-weight: $text-normal |
|---|
font-bold | font-weight: $text-bold |
|---|
font-bolder | font-weight: $text-bolder |
|---|
font-boldest | font-weight: $text-boldest |
|---|
text-normal | font-style: normal |
|---|
text-italic | font-style: italic |
|---|
text-ellipses | @include ellipses |
|---|
text-strike | text-decoration: line-through |
|---|
uppercase | text-transform: uppercase |
|---|
lowercase | text-transform: lowercase |
|---|
capitalize | text-transform: capitalize |
|---|
no-text-decoration | text-decoration: none |
|---|
text-left | text-align: left |
|---|
text-right | text-align: right |
|---|
text-center | text-align: center |
|---|
text-justify | text-align: justify |
|---|
text-black | color: #000 |
|---|
text-warning | color: $brand-warning |
|---|
text-info | color: $brand-info |
|---|
text-danger | color: $brand-danger |
|---|
text-success | color: $brand-success |
|---|
text-muted | color: $gray-light |
|---|