Helper Classes

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

Attributes

Class name Description CSS
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-color Define the accent text color .accent-color { 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;
}
align-center Align an element to center .align-center { text-align: center; }
align-left Align an element to left .align-left { text-align: left; }
right-right Align an element to right .align-right { text-align: right; float: right; }
font-italic Define the italic font style of a element .font-italic { font-style: italic; }
font-small Set small font of a element .font-small { font-size: .725em }
font-medium Set medium font of a element .font-medium { font-size: 1.2em }
font-huge Set huge font of a element .font-huge {
font-size: 4.5em;
font-weight: 700;
line-height: 1.1;
margin-bottom: 0;
@include breakpoint(xsmall) { font-size: 2em; }
@include breakpoint(small) { font-size: 3.5em; }
@include breakpoint(medium) { font-size: 4em; }
@include breakpoint(large) { font-size: 4.5em; }
}
more-space Give more top and bottom margin white space .more-space {
margin-top: 5%;
margin-bottom: 5%;
@include breakpoint(xsmall) {
margin-top: 10%;
margin-bottom: 10%;
}
}
link Give your anchors a special treatment Hello world.