Helpers
Get an overview of all helper classes for visibility and common css properties.
Alignment
We have easy to use classes to help you align your content.
Vertical Align
You can easily vertically center things by adding the class
valign-wrapper to the container holding the items you want to vertically align.
This should be vertically aligned
<div class="valign-wrapper">
<h5>This should be vertically aligned</h5>
</div>Text Align
These classes are for horizontally aligning content:
.left-align, .right-align and .center-align.
This should be left aligned
This should be right aligned
This should be center aligned
<div>
<h5 class="left-align">This should be left aligned</h5>
</div>
<div>
<h5 class="right-align">This should be right aligned</h5>
</div>
<div>
<h5 class="center-align">This should be center aligned</h5>
</div>Quick Floats
Quickly float things by adding the class
left or right to the element. !important is used to avoid
specificity issues.
<div class="left">...</div>
<div class="right">...</div>Hiding/Showing Content
We provide easy to use classes to hide/show content on specific screen sizes.
| Class | Screen Range |
|---|---|
.hide
|
Hidden for all Devices |
.hide-on-small-only
|
Hidden for Mobile Only |
.hide-on-med-only
|
Hidden for Tablet Only |
.hide-on-med-and-down
|
Hidden for Tablet and Below |
.hide-on-med-and-up
|
Hidden for Tablet and Above |
.hide-on-large-only
|
Hidden for Desktop Only |
.show-on-small
|
Show for Mobile Only |
.show-on-medium
|
Show for Tablet Only |
.show-on-large
|
Show for Desktop Only |
.show-on-medium-and-up
|
Show for Tablet and Above |
.show-on-medium-and-down
|
Show for Tablet and Below |
Usage
<div class="hide-on-small-only"></div>Spacing
These classes help space elements with margin and padding helpers for all directions. This works by combining a margin/padding prefix, a direction infix and value suffix
Prefix margin and padding modifiers
| Prefix | Modifies |
|---|---|
m*
|
Modifies the margin according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |
p*
|
Modifies the padding according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |
Inffix direction modifiers
| Infix | Direction |
|---|---|
*t
|
Applies modifier to the top side of the element |
*r
|
Applies modifier to the right side of the element |
*b
|
Applies modifier to the bottom side of the element |
*l
|
Applies modifier to the left side of the element |
*x
|
Applies modifier to the left and right sides of the element |
*y
|
Applies modifier to the top and bottom sides of the element |
Suffix values
Any margin or padding modifier must be appended with one of 6 value suffixes
| Suffix | Value |
|---|---|
*-0
|
0
|
*-1
|
0.25rem
|
*-2
|
0.5rem
|
*-3
|
0.75rem
|
*-4
|
1rem
|
*-5
|
1.5rem
|
*-6
|
3rem
|
Tables of all spacing helpers
All margin helpers
| Property | Prefix | Classes | |||||||
|---|---|---|---|---|---|---|---|---|---|
margin
|
m
|
m-0
|
m-1
|
m-2
|
m-3
|
m-4
|
m-5
|
m-6
|
m-auto
|
margin-top
|
mt
|
mt-0
|
mt-1
|
mt-2
|
mt-3
|
mt-4
|
mt-5
|
mt-6
|
mt-auto
|
margin-right
|
mr
|
mr-0
|
mr-1
|
mr-2
|
mr-3
|
mr-4
|
mr-5
|
mr-6
|
mr-auto
|
margin-bottom
|
mb
|
mb-0
|
mb-1
|
mb-2
|
mb-3
|
mb-4
|
mb-5
|
mb-6
|
mb-auto
|
margin-left
|
ml
|
ml-0
|
ml-1
|
ml-2
|
ml-3
|
ml-4
|
ml-5
|
ml-6
|
ml-auto
|
margin-top
and
margin-bottom
|
my
|
my-0
|
my-1
|
my-2
|
my-3
|
my-4
|
my-5
|
my-6
|
my-auto
|
margin-left
and
margin-right
|
mx
|
mx-0
|
mx-1
|
mx-2
|
mx-3
|
mx-4
|
mx-5
|
mx-6
|
mx-auto
|
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto | |
All padding helpers
| Property | Prefix | Classes | |||||||
|---|---|---|---|---|---|---|---|---|---|
padding
|
p
|
p-0
|
p-1
|
p-2
|
p-3
|
p-4
|
p-5
|
p-6
|
p-auto
|
padding-top
|
pt
|
pt-0
|
pt-1
|
pt-2
|
pt-3
|
pt-4
|
pt-5
|
pt-6
|
pt-auto
|
padding-right
|
pr
|
pr-0
|
pr-1
|
pr-2
|
pr-3
|
pr-4
|
pr-5
|
pr-6
|
pr-auto
|
padding-bottom
|
pb
|
pb-0
|
pb-1
|
pb-2
|
pb-3
|
pb-4
|
pb-5
|
pb-6
|
pb-auto
|
padding-left
|
pl
|
pl-0
|
pl-1
|
pl-2
|
pl-3
|
pl-4
|
pl-5
|
pl-6
|
pl-auto
|
padding-top
and
padding-bottom
|
py
|
py-0
|
py-1
|
py-2
|
py-3
|
py-4
|
py-5
|
py-6
|
py-auto
|
padding-left
and
padding-right
|
px
|
px-0
|
px-1
|
px-2
|
px-3
|
px-4
|
px-5
|
px-6
|
px-auto
|
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto | |
Usage
<div class="p-2">
<h5 class="mt-1">The div has a padding 0.5rem and the h5 has a margin-top of 0.25rem</h5>
</div>padding-* / margin-* aliases
padding-0 through padding-6 and
margin-0 through margin-6 are exact aliases of the all-direction
p-*/m-* classes above (same steps, same values) - spelled out in full
for projects whose markup already uses that naming. There's no -auto or per-direction
(-top, -x, ...) variant under this name; use p-*/m-*
and friends for that.
<div class="padding-2 margin-3">Same as class="p-2 m-3"</div>Formatting
These classes help format various content on your site.
Truncation
To truncate long lines of text in an ellipsis, add the class
truncate to the tag which contains the text. See an example below of a header being truncated inside a card.
This is an extremely long title that will be truncated
<h4 class="truncate">This is an extremely long title that will be truncated</h4>Hover
The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant
for use on cards.
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
<div class="card-panel hoverable"> Hoverable Card Panel</div>Cursors
One utility class per CSS cursor keyword, named cursor-*. Each also has an
-important variant if you need to override a more specific rule. The buttons below use the -important variant to override the button’s default cursor. Hover over a button to try it. Click it, or focus it and press Enter or Space, to copy its class name.
Choose a cursor to copy its class name.
<button type="button" class="btn outlined cursor-alias-important">alias</button>
<button type="button" class="btn outlined cursor-all-scroll-important">all-scroll</button>
<button type="button" class="btn outlined cursor-auto-important">auto</button>
<button type="button" class="btn outlined cursor-cell-important">cell</button>
<button type="button" class="btn outlined cursor-col-resize-important">col-resize</button>
<button type="button" class="btn outlined cursor-context-menu-important">context-menu</button>
<button type="button" class="btn outlined cursor-copy-important">copy</button>
<button type="button" class="btn outlined cursor-crosshair-important">crosshair</button>
<button type="button" class="btn outlined cursor-default-important">default</button>
<button type="button" class="btn outlined cursor-e-resize-important">e-resize</button>
<button type="button" class="btn outlined cursor-ew-resize-important">ew-resize</button>
<button type="button" class="btn outlined cursor-grab-important">grab</button>
<button type="button" class="btn outlined cursor-grabbing-important">grabbing</button>
<button type="button" class="btn outlined cursor-help-important">help</button>
<button type="button" class="btn outlined cursor-move-important">move</button>
<button type="button" class="btn outlined cursor-n-resize-important">n-resize</button>
<button type="button" class="btn outlined cursor-ne-resize-important">ne-resize</button>
<button type="button" class="btn outlined cursor-nesw-resize-important">nesw-resize</button>
<button type="button" class="btn outlined cursor-ns-resize-important">ns-resize</button>
<button type="button" class="btn outlined cursor-nw-resize-important">nw-resize</button>
<button type="button" class="btn outlined cursor-nwse-resize-important">nwse-resize</button>
<button type="button" class="btn outlined cursor-no-drop-important">no-drop</button>
<button type="button" class="btn outlined cursor-none-important">none</button>
<button type="button" class="btn outlined cursor-not-allowed-important">not-allowed</button>
<button type="button" class="btn outlined cursor-pointer-important">pointer</button>
<button type="button" class="btn outlined cursor-progress-important">progress</button>
<button type="button" class="btn outlined cursor-row-resize-important">row-resize</button>
<button type="button" class="btn outlined cursor-s-resize-important">s-resize</button>
<button type="button" class="btn outlined cursor-se-resize-important">se-resize</button>
<button type="button" class="btn outlined cursor-sw-resize-important">sw-resize</button>
<button type="button" class="btn outlined cursor-text-important">text</button>
<button type="button" class="btn outlined cursor-w-resize-important">w-resize</button>
<button type="button" class="btn outlined cursor-wait-important">wait</button>
<button type="button" class="btn outlined cursor-zoom-in-important">zoom-in</button>
<button type="button" class="btn outlined cursor-zoom-out-important">zoom-out</button>
All 35 cursor keywords supported by kmaterialize are shown above. Each is available as
cursor-* and cursor-*-important.
Screen Fit
Utility classes to size an element to (or at least to) the full viewport, without writing custom CSS.
| Class | Effect | Description |
|---|---|---|
screen-fit |
width: 100%; height: 100vh; |
Locks the element to exactly the viewport's width and height. Content taller than the viewport gets clipped/overflows unless you handle it yourself. |
screen-fit-x |
width: 100%; |
Full width only - height is left untouched, so the element grows naturally with its content. |
screen-fit-y |
align-items: stretch; |
Not a size at all - it makes a flex/grid container's children stretch to fill its cross-axis. Use it on the parent, not the item you want stretched. |
screen-fit-min |
min-width: 100%; min-height: 100vh; |
Fills at least the viewport - unlike plain screen-fit, taller content simply pushes the element taller instead of being clipped. |
screen-fit-min-x |
min-width: 100%; height: 100vh; |
Width can only grow (min 100%), height is locked exactly to the viewport. |
screen-fit-min-y |
width: 100%; min-height: 100vh; |
Width is locked to 100%, height can only grow (min 100vh) - the most common one for a "full height, but can scroll if content is long" page wrapper. |
screen-fit-y in action
The only one of these that's actually demoable inside a small box: compared here against screen-top-y
so the difference is visible. Same markup, same tall chip - screen-top-y leaves the shorter chips at
their natural height, screen-fit-y stretches them to match:
<div class="screen-flex screen-top-y">
<div class="chip">tall chip</div>
<div class="chip">screen-top-y: not stretched</div>
</div>
<div class="screen-flex screen-fit-y">
<div class="chip">tall chip</div>
<div class="chip">screen-fit-y: stretched</div>
</div>Typical usage
The rest are viewport-relative by nature (100vh), so they can't be demoed inside a small box on this page without covering it - here's how they're meant to be used instead.
screen-fit: an app shell that never scrolls the outer page, only an inner content area does.
<div class="screen-fit screen-flex screen-direction-y-asc">
<header>App bar</header>
<main class="element-flex-grow-1" style="overflow-y: auto;">Scrollable content</main>
<footer>Status bar</footer>
</div>screen-fit-min: a landing-page hero that always fills the first screen, but grows if its own text/image needs more room.
<section class="screen-fit-min screen-flex screen-center">
<h1>Welcome</h1>
</section>Screen Flex
screen-flex turns an element into a flex container; combine it with any of the modifier classes below
on the same element to control alignment, wrapping and direction. element-flex-grow-1, used on a
direct child, makes that child grow to fill remaining space.
Both-axis alignment
screen-center: centers children horizontally and vertically at once.
<div class="screen-flex screen-center">
<div class="chip">screen-center</div>
</div>Horizontal (main-axis) alignment
screen-left / screen-right: pushes children to the start or end of the row.
<div class="screen-flex screen-left"><div class="chip">screen-left</div></div>
<div class="screen-flex screen-right"><div class="chip">screen-right</div></div>screen-center-x: centers horizontally only (children keep their natural vertical position).
<div class="screen-flex screen-center-x">
<div class="chip">screen-center-x</div>
</div>screen-distributed-x: even gaps between children, none at the outer edges (space-between).
<div class="screen-flex screen-distributed-x">
<div class="chip">screen-distributed-x</div>
<div class="chip">spreads</div>
<div class="chip">children</div>
</div>screen-center-space-x / screen-center-distributed-x: like screen-distributed-x, but with room left at the outer edges too (space-around / space-evenly).
<div class="screen-flex screen-center-space-x">...</div>
<div class="screen-flex screen-center-distributed-x">...</div>Vertical (cross-axis) alignment
screen-center-y / screen-top-y / screen-bottom-y:
aligns children to the middle, top or bottom of the row, independently of horizontal alignment.
<div class="screen-flex screen-top-y">...</div>
<div class="screen-flex screen-center-y">...</div>
<div class="screen-flex screen-bottom-y">...</div>Wrapping
screen-wrap: children that don't fit on one line drop to the next, instead of overflowing or shrinking.
<div class="screen-flex screen-wrap" style="max-width: 260px;">
<div class="chip">one</div>
<div class="chip">two</div>
<div class="chip">three</div>
</div>screen-no-wrap is the opposite (and flexbox's own default) - forces everything onto a single line.
Direction
screen-direction-y-asc / screen-direction-y-desc: stacks children in a column, top-to-bottom or bottom-to-top.
<div class="screen-flex screen-direction-y-asc screen-center-x">
<div class="chip">direction-y-asc</div>
<div class="chip">stacks</div>
<div class="chip">vertically</div>
</div>screen-direction-x-asc / screen-direction-x-desc: row order left-to-right (the flexbox default) or reversed, right-to-left.
<div class="screen-flex screen-direction-x-desc">
<div class="chip">1</div>
<div class="chip">2</div>
<div class="chip">3</div>
</div>Emphasis & standalone flex
screen-flex-important: same as screen-flex, but !important - for when something more specific already set display on the element.
element-flex: a plain display: flex; with none of screen-flex's modifier machinery - for a quick flex container that doesn't need any of the above.
element-flex-grow-1: put on a direct child of a screen-flex container to make just that
child grow and fill the remaining space, while its siblings keep their natural size.
<div class="screen-flex">
<div class="chip">fixed</div>
<div class="chip element-flex-grow-1">fills the rest</div>
<div class="chip">fixed</div>
</div>Quick reference:
| Class | Effect |
|---|---|
screen-flex-important | display: flex !important; |
screen-center | Centers children on both axes |
screen-left / screen-right | Aligns children to the start/end horizontally |
screen-wrap / screen-no-wrap | flex-wrap: wrap / nowrap; |
screen-center-y / screen-top-y / screen-bottom-y | Vertical (cross-axis) alignment only |
screen-center-x / screen-distributed-x | Horizontal (main-axis) alignment only |
screen-center-space-x / screen-center-distributed-x | justify-content: space-around / space-evenly; |
screen-direction-y-asc / screen-direction-y-desc | flex-direction: column / column-reverse; |
screen-direction-x-asc / screen-direction-x-desc | flex-direction: row / row-reverse; |
element-flex | Standalone display: flex;, no other behavior |
element-flex-grow-1 | On a direct child of screen-flex: flex-grow: 1; |
Object Fit
Shortcuts for the object-fit property on <img>/<video> tags.
object-fit-cover
object-fit-fill
<img src="photo.jpg" class="object-fit-cover" style="width: 100%; height: 120px;">
<img src="photo.jpg" class="object-fit-fill" style="width: 100%; height: 120px;">Browser Defaults
Because we override many of the default browser styles and elements, we provide the
.browser-default class to revert these elements to their original state.
| Name of Element | Reverted Style |
|---|---|
| UL | Bullet points |
| SELECT | Browser default select element |
| INPUT | Browser default input |