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 |