Helper classes

Studio8 includes special helper classes to help you build your layouts.

Attributes

Class name Description Code
white Define white text color 
.white { color: $white; }
gray Define gray text color 
.gray { color: $gray; }
black Define black text color 
.black { color: $black; }
light-gray Define light gray text color 
.light-gray { color: $light-gray; }
medium-gray Define medium gray text color 
.medium-gray { color: $medium-gray; }
dark-gray Define dark gray text color 
.dark-gray { color: $dark-gray; }
text-color Define the default text color 
.text-color { color: $text-color; }
accent Define the accent text color 
.accent { color: $accent; }
hard-top,
hard-start		 Remove the top margin & padding of an element 
.hard-start, .hard-top {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
hard-bottom,
hard-end		 Remove the bottom margin & padding of an element 
.hard-end, .hard-bottom {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
center Align an element to center 
.center { text-align: center; margin: 0 auto; }
left Align an element to left 
.left { text-align: left; float: left; }
right Align an element to right 
.right { text-align: right; float: right; }
font-smoothing Controls the application of anti-aliasing when fonts are rendered 
.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
link Give your anchors a special treatment 
...
no-lazy Disable lazy loading on an image
fit-text New Makes scalable headlines that fill the width of a parent element. 
Headline