KARMA CSS

Generic Helpers

Though we do not recommend over using helpers within templates as this can quickly become difficult to manage. You loose the ability of what a style sheet gives you which is one place to change all referenses of a style. But there will be the odd time where these are useful.

The below is a list of all the current helpers defined:

// Helpers
//––––––––––––––––––––––––––––––––––––––––––––––––––

/* clearfix */
.clearfix                   { @include clearfix; }

/* width and height */
.full-height                { height: 100%; }
.full-visual-height         { height: 100vh; }
.full-width                 { width: 100%; box-sizing: border-box; }
.max-full-width             { max-width: 100%; box-sizing: border-box; }

/* margin */
.margin-zero                { margin: 0; }
.mt-auto                    { margin-top: auto; }
.mr-auto                    { margin-right: auto; }
.mb-auto                    { margin-bottom: auto; }
.ml-auto                    { margin-left: auto; }

/* alignment */
.pull-left                  { float: left !important; }
.pull-right                 { float: right !important; }
.push-auto                  { @include push--auto; }

.text-left                  { text-align: left; }
.text-right                 { text-align: right; }
.text-center                { text-align: center; }
.text-just                  { text-align: justify; }

.align-top                  { vertical-align: top; }
.align-bottom               { vertical-align: bottom; }
.align-middle               { vertical-align: middle; }
.align-baseline             { vertical-align: baseline; }

/* positions */
.fixed                      { position: fixed; }
.relative                   { position: relative; }
.absolute                   { position: absolute; }

/* list */
.list-style-none            { list-style: none !important; }

/* typography */
.muted                      { opacity: .7; }
.nowrap                     { white-space: nowrap; }
.uppercase                  { text-transform: uppercase; }
.small                      { font-size: 80%; }
.lead                       { font-weight: 300; }
.text-shadow                { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }

/* dont increase lead font size on mobiles */
@media (min-width: 768px) { 
    .lead                   { font-size: 120%; } 
}

/* display */
.d-block                    { display: block; }
.d-hidden                   { display: none !important; }
.d-flex                     { display: flex; }
.d-inline                   { display: inline; }
.d-inline-block             { display: inline-block; }
.d-inline-flex              { display: inline-flex; }
.d-table                    { display: table; }
.d-table-cell               { display: table-cell; }

/* images */
.img-fluid                  { max-width: 100%; height: auto; }

/* scroll */
.scroll-x                   { overflow-x: auto; }
.noscroll                   { overflow:hidden; }

/* cursors */
.disabled                   { cursor: not-allowed; }
.pointer                    { cursor: pointer; }

/* flex */

// directions
.flex-row                   { flex-direction: row; }
.flex-column                { flex-direction: column; }

// reverse directions
.flex-row-reverse           { flex-direction: row-reverse; }
.flex-column-reverse        { flex-direction: column-reverse; }

// use in conjunction with .d-flex to justify the items within the container
.justify-content-start      { justify-content: flex-start; }
.justify-content-end        { justify-content: flex-end; }
.justify-content-center     { justify-content: center; }
.justify-content-between    { justify-content: space-between; }
.justify-content-around     { justify-content: space-around; }

// use in conjunction with .d-flex to align the items within the container
.align-items-start          { align-items: flex-start; }
.align-items-end            { align-items: flex-end; }
.align-items-center         { align-items: center; }
.align-items-baseline       { align-items: baseline; }
.align-items-stretch        { align-items: stretch; }

// use in conjunction with .d-flex to apply wrapping of the items within the container
.flex-nowrap                { flex-wrap: nowrap; }
.flex-wrap                  { flex-wrap: wrap; }
.flex-wrap-reverse          { flex-wrap: wrap-reverse; }

// use in conjunction with .d-flex on the parent container to align each item individually
.align-self-start           { align-self: flex-start; }
.align-self-end             { align-self: flex-end; }
.align-self-center          { align-self: center; }
.align-self-baseline        { align-self: baseline; }
.align-self-stretch         { align-self: stretch; }

// print
@media print {
    .no-print, 
    .no-print * {
        display: none !important;
    }
}

Colours

Within variables there are colors defined. below is an example:

// colors
$colors: (
        white:            rgb(255, 255, 255),
        black:            rgb(0, 0, 0),
        primary:          rgb(51, 195, 240),
        secondary:        rgb(240, 240, 240),
) !default;

Any colors that are defined here will generate helpers to set both the background-color and the color css properties.

From the above taking primary as an example will create the following:

.b-primary { background-color: #33c3f0; }
.c-primary { color: #33c3f0; }

Add further colors to generate your own.