1.1.1 • Published 4 years ago
@miraidesigns/helpers v1.1.1
Helpers
Collection of helpful CSS classes.
Sass
@forward '@miraidesigns/helpers/styles';Transitions
Disable transitions generally or on a specific element.
| Name | Description |
|---|---|
mdf-preload | Apply to the <body> element. Stops all transitions from firing |
mdf-disable-transitions | Stops transitions on the applied element |
Floats
Float elements to the left or right of its parent allowing content to move around it.
| Name | Description |
|---|---|
mdf-float-left | Float element to the left of the content |
mdf-float-right | Float element to the right of the content |
mdf-clearfix | Apply clearfix to parent element, stops floating content from overflowing |
Visibility
Hide elements in various ways.
| Name | Description |
|---|---|
mdf-hidden | Hides an element by setting display to none |
mdf-hidden-mobile | Hides an element on mobile devices by setting display to none |
mdf-hidden-tablets | Hides an element on tablets by setting display to none |
mdf-hidden-laptop | Hides an element on laptops by setting display to none |
mdf-offscreen | Move the element offscreen but keep it content relevant to support ARIA practices |
Sizes
Set the height or width of an element in percentages. Format is either mdf-h-* for height or mdf-w-* for width.
| Name | Description |
|---|---|
one-fifth | 20% |
one-quarter | 25% |
one-third | 33.3% |
two-fifths | 40% |
half | 50% |
three-fifths | 60% |
two-thirds | 66.666666667% |
three-quarters | 75% |
four-fifths | 80% |
full | 100% |
Spacing
Two simple classes to either reset an element's margin or padding.
| Name | Description |
|---|---|
mdf-margin-reset | Set margin to 0 |
mdf-padding-reset | Set padding to 0 |
Overflow
Hide an element's scrollbar or only show a horizontal or vertical one if necessary.
| Name | Description |
|---|---|
mdf-scrollbar-hidden | Set overflow to hidden |
mdf-scrollbar-h | Set overflow-x to auto displaying only a horizontal scrollbar if needed |
mdf-scrollbar-v | Set overflow-y to auto displaying only a vertical scrollbar if needed |
Others
Miscellaneous helper classes that aren't part of a bigger "category".
| Name | Description |
|---|---|
mdf-round | Rounds the edges of an element to make it circular. Sets border-radius to 50% |
mdf-rotate-90 | Rotates an element by 90deg. Sets transform to rotate(90deg) |
mdf-rotate-180 | Rotates an element by 180deg. Sets transform to rotate(180deg) |
mdf-rotate-270 | Rotates an element by 270deg. Sets transform to rotate(270deg) |