Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
367 lines (314 sloc) 25 KB

Utility Helpers

Below is a list of all the utilites and their description within KarmaCSS.

Alignment

Class Description
align-top Vertically align to the top
align-bottom Vertically align to the bottom
align-middle Vertically align to the middle
align-baseline Vertically align to the baseline

Clearfix

Class Description
clearfix Clear a floating element

Colour

Usage

The colour helpers are created from the colours defined within the variables. By adding more, these will also be created as helpers.

The below are just a selection:

  • white
  • black
  • primary
  • secondary

You can also get a colour by using the provided function. See the :ref:`colours` section for more details.

Class Description
b-white Sets the background color to white
b-black Sets the background color to black
b-primary Sets the background color to primary
b-secondary Sets the background color to secondary
c-white Sets the text color to white
c-black Sets the text color to black
c-primary Sets the text color to primary
c-secondary Sets the text color to secondary

Cursor

Class Description
disabled Show the not-allowed cursor
move Show the move cursor
pointer Show the pointer cursor

Display

Class Description
d-block Display as a block element
d-hidden Display as a block element
d-flex Display as a flex element
d-grid Display as a grid element
d-inline Display as an inline element
d-inline-block Display as an inline block element
d-inline-flex Display as an inline flex element
d-table Display as a table element
d-table-cell Display as a table-cell element

Flex

Usage

Use all the below with d-flex on the container of the items to be flexed.

A good resource on flex can be found at css-tricks.com.

Class Description
flex-row Sets the direction to row
flex-column Sets the direction to column
flex-row-reverse Sets the direction to row reverse
flex-column-reverse Sets the direction to column reverse
Class Description
justify-content-start Justify child items to start
justify-content-end Justify child items to end
justify-content-center Justify child items to center
justify-content-between Justify child items to between
justify-content-around Justify child items to around
Class Description
align-items-start Align child items to start
align-items-end Align child items to end
align-items-center Align child items to center
align-items-basline Align child items to basline
align-items-stretch Align child items to stretch
Class Description
flex-nowrap single-line which may cause the container to overflow
flex-wrap multi-lines, direction is defined by flex-direction
flex-wrap-reverse multi-lines, opposite to direction defined by flex-direction

Align Self Usage

These are set on the child items of the flex container

Class Description
align-self-start Align self to start
align-self-end Align self to end
align-self-center Align self to center
align-self-between Align self to between
align-self-around Align self to around

Float

Class Description
pull-left Float an element to the left
pull-right Float an element to the right

Image

Class Description
img-fluid Make an image responsive and use the full width but no more

List

Class Description
list-style-none Remove bullets from lists ul and ol
list-style-reset Remove list style, padding and margin ul and ol

Overflow

Class Description
noscroll Sets overflow to hidden
scroll-x Allow scrolling horizontally when required

Position

Class Description
fixed Sets position to fixed
relative Sets position to relative
absolute Sets position to absolute

Print

Class Description
no-print Hides this element when printing

Sizing

Class Description
full-height Sets the height to 100%
full-visual-height Sets the height to 100% if the visual height
full-width Sets the width to 100%
max-full-width Sets the maximum width to 100%

Spacing

Class Description
margin-zero Sets margin to zero
m-auto Sets margin to auto
mt-auto Sets margin top to auto
mr-auto Sets margin right to auto
mb-auto Sets margin bottom to auto
ml-auto Sets margin left to auto
push-auto Sets margin left and right to auto

Text

Class Description
text-left Sets text alignment to left
text-right Sets text alignment to right
text-center Sets text alignment to center
text-just Sets text alignment to justify
strong Sets font weight as $strong-font-weight
lead Sets font weight to $lead-font-weight
muted Sets the opacity to 0.7
nowrap Stops the text from wrapping
small Sets the font size to $small-font-size
uppercase Makes the text uppercase
text-shadow Applies a shadow to the text

Transform

Class Description
flip-x Flips an element on its horizontal axis
flip-y Flips an element on its vertical axis
flip-both Flips an element on both axis

Visibility

Usage

The below depends on the configured grid breakpoints xs, sm, md, lg, xl

For more details on breakpoints see :ref:`responsive-breakpoints` or :ref:`grid-options`.

Class Description
hidden-xs Hide this element on the xs breakpoint only
hidden-sm Hide this element on the sm breakpoint only
hidden-md Hide this element on the md breakpoint only
hidden-lg Hide this element on the lg breakpoint only
hidden-xl Hide this element on the xl breakpoint only
hidden-xs-down Hide this element on the xs breakpoint and lower
hidden-sm-down Hide this element on the sm breakpoint and lower
hidden-md-down Hide this element on the md breakpoint and lower
hidden-lg-down Hide this element on the lg breakpoint and lower
hidden-xl-down Hide this element on the xl breakpoint and lower
hidden-xs-up Hide this element on the xs breakpoint and higher
hidden-sm-up Hide this element on the sm breakpoint and higher
hidden-md-up Hide this element on the md breakpoint and higher
hidden-lg-up Hide this element on the lg breakpoint and higher
hidden-xl-up Hide this element on the xl breakpoint and higher