Style helpers v1
CSS helper classes are small, reusable snippets of CSS code that are designed to perform a specific task, such as aligning text, setting margins or padding, changing font sizes, and more. These helper classes are an essential tool for creating and maintaining CSS styles.
Space
Margin
/* Margin helpers includes single, direction based, inline, and stack */
r-m-0 { margin: value /* single from 0 to 15 */ }
r-mt-0 { margin-top: 0 /* direction from 0 to 15 */ }
r-mr-0 { margin-right: 0 /* direction from 0 to 15 */ }
r-mb-0 { margin-bottom: 0 /* direction from 0 to 15 */ }
r-ml-0 { margin-left: 0 /* direction from 0 to 15 */ }
r-inline-0 { margin: 0 value 0 0 /* inline from 0 to 15 */ }
r-stack-0 { margin: 0 0 value 0 /* stack from 0 to 15 */ }Padding
/* Padding helpers includes direction based, and inset */
r-pt-0 { padding-top: 0 /* direction from 0 to 15 */ }
r-pr-0 { padding-right: 0 /* direction from 0 to 15 */ }
r-pb-0 { padding-bottom: 0 /* direction from 0 to 15 */ }
r-pl-0 { padding-left: 0 /* direction from 0 to 15 */ }
r-inset-0 { padding: value /* inset from 0 to 15 */ }Text
Variation
/* Text variation helpers */
r-hide-text { overflow: hidden; padding: 0; text-indent: 101%; white-space: nowrap; }
r-fst-italic { font-style: italic }
r-tt-lowercase { text-transform: lowercase }
r-tt-titlecase { text-transform: capitalize }
r-tt-uppercase { text-transform: uppercase }
r-tt-sentencecase { text-transform: lowercase /* Uppercase on ::first-letter selector */ }
r-tt-initial { text-transform: initial }
r-td-overline { text-decoration: overline }
r-td-line-through { text-decoration: line-through }
r-td-underline { text-decoration: underline }
r-td-0 { text-decoration: none }
r-td-hover-0 { &:hover, &:hover * {text-decoration: none} }
r-text-help { cursor: pointer; text-decoration-line underline; text-decoration-style: dashed; }
r-text-blur { color: transparent; text-shadow: 0 0 10px var(--r-text-muted), 0 0 5px var(--r-text-muted); }
r-text-unselectable { user-select: none }Aligment
/* Text aligment helpers */
r-text-right { text-align: right }
r-text-left { text-align: left }
r-text-center { text-align: center }
r-text-justify { text-align: justify }Wrap and break
/* Text wrap and break helpers */
r-text-wrap { text-wrap: wrap }
r-text-nowrap { text-wrap: nowrap }
r-text-wrap-balance { text-wrap: balance }
r-text-wrap-pretty { text-wrap: pretty }
r-text-wrap-stable { text-wrap: stable }
r-wb-break-all { word-break: break-all }
r-wb-keep-all { word-break: keep-all }
r-wb-break-word { word-break: break-word }
r-ws-nowrap { white-space: nowrap }
r-ws-pre { white-space: pre }
r-ws-pre-wrap { white-space: pre-wrap }
r-ws-pre-line { white-space: pre-line }
r-text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Size
/* Font size helpers */
r-fs-s { font-size: var(--r-font-size-s) }
r-fs-m { font-size: var(--r-font-size-m) }
r-fs-l { font-size: var(--r-font-size-l) }
r-fs-xl { font-size: var(--r-font-size-xl) }
r-fs-2xl { font-size: var(--r-font-size-2xl) }
r-fs-3xl { font-size: var(--r-font-size-3xl) }
r-fs-4xl { font-size: var(--r-font-size-4xl) }
r-fs-5xl { font-size: var(--r-font-size-5xl) }
r-fs-6xl { font-size: var(--r-font-size-6xl) }
r-fs-7xl { font-size: var(--r-font-size-7xl) }Line height
/* Font line height helpers */
r-lh-s { line-height: var(--r-font-line-height-s) }
r-lh-m { line-height: var(--r-font-line-height-m) }
r-lh-l { line-height: var(--r-font-line-height-l) }
r-lh-xl { line-height: var(--r-font-line-height-xl) }
r-lh-2xl { line-height: var(--r-font-line-height-2xl) }
r-lh-3xl { line-height: var(--r-font-line-height-3xl) }
r-lh-4xl { line-height: var(--r-font-line-height-4xl) }
r-lh-5xl { line-height: var(--r-font-line-height-5xl) }
r-lh-6xl { line-height: var(--r-font-line-height-6xl) }
r-lh-7xl { line-height: var(--r-font-line-height-7xl) }Weight
/* Font weight helpers */
r-fw-regular { line-height: var(--r-font-weight-regular) }
r-fw-medium { line-height: var(--r-font-weight-medium) }
r-fw-semi-bold { line-height: var(--r-font-weight-semi-bold) }
r-fw-bold { line-height: var(--r-font-weight-bold) }
r-fw-extra-bold { line-height: var(--r-font-weight-extra-bold) }Colors
/* Text colors helpers */
r-text-muted { color: var(--r-text-muted) }
r-text-on-surface { color: var(--r-text-on-surface) }
r-text { color: var(--r-text) }
r-text-primary { color: var(--r-text-primary) }
r-text-success { color: var(--r-complementary-success) }
r-text-warning { color: var(--r-complementary-warning) }
r-text-danger { color: var(--r-complementary-danger) }
r-text-info { color: var(--r-complementary-info) }Vertical align
/* Vertical alignment helpers */
r-align-baseline { vertical-align: baseline }
r-align-top { vertical-align: top }
r-align-middle { vertical-align: middle }
r-align-bottom { vertical-align: bottom }
r-align-text-top { vertical-align: text-top }
r-align-text-bottom { vertical-align: text-bottom }
r-align-sub { vertical-align: sub }
r-align-super { vertical-align: super }Family
/* Font family helpers */
r-ff-sans-serif { font-family: var(--r-font-family) }
r-ff-mono { font-family: var(--r-font-family-mono) }Display
Display
/* Display helpers */
r-d-none { display: none }
r-d-inline { display: inline }
r-d-inline-block { display: inline-block }
r-d-block { display: block }
r-d-table { display: table }
r-d-table-row { display: table-row }
r-d-table-cell { display: table-cell }
r-d-flex { display: flex }
r-d-inline-flex { display: inline-flex }Show / Hide
/* Show / Hide helpers */
r-hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px }
r-hide-on-xs { display: none /* xs breakpoint max */ }
r-hide-on-s { display: none /* s breakpoint max */ }
r-hide-on-m { display: none /* m breakpoint max */ }
r-hide-on-l { display: none /* l breakpoint max */ }
r-hide-on-xl { display: none /* xl breakpoint max */ }
r-show-on-xs { display: block /* xs breakpoint max */ }
r-show-on-s { display: block /* s breakpoint max | xl breakpoint min | xl breakpoint max */ }
r-show-on-m { display: block /* m breakpoint max | xl breakpoint min | xl breakpoint max */ }
r-show-on-l { display: block /* l breakpoint max | xl breakpoint min | xl breakpoint max */ }
r-show-on-xl { display: block /* xl breakpoint max */ }Layout
/* Display layout helpers */
r-equal-widths-container-on-s { display: flex; flex-wrap: nowrap; justify-content: flex-start /* s breakpoint max */ }Flexbox
Flex
/* Flexbox flex helpers */
r-flex-none { flex: none }Align
/* Flexbox aligment helpers */
r-align-items-center { align-items: center }
r-align-items-start { align-items: flex-start }
r-align-items-end { align-items: flex-end }
r-align-items-stretch { align-items: stretch }
r-align-items-baseline { align-items: baseline }
r-align-self-start { align-self: flex-start }
r-align-self-end { align-self: flex-end }
r-align-self-center { align-self: center }
r-align-self-baseline { align-self: baseline }
r-align-self-stretch { align-self: stretch }Justify
/* Flexbox justify content helpers */
r-justify-content-center { justify-content: center }
r-justify-content-start { justify-content: flex-start }
r-justify-content-end { justify-content: flex-end }
r-justify-content-between { justify-content: space-between }
r-justify-content-around { justify-content: space-around }
r-justify-content-evenly { justify-content: space-evenly }Wrap
/* Flexbox wrap helpers */
r-flex-wrap { flex-wrap: wrap }
r-flex-nowrap { flex-wrap: nowrap }
r-flex-wrap-reverse { flex-wrap: wrap-reverse }Direction
/* Flexbox direction helpers */
r-flex-row { flex-direction: row }
r-flex-row-reverse { flex-direction: row-reverse }
r-flex-column { flex-direction: column }
r-flex-column-reverse { flex-direction: column-reverse }Border
Border radius
/* Border radius helpers */
r-rounded-0 { border-radius: 0 }
r-rounded-1 { border-radius: var(--r-border-radius-1) }
r-rounded-2 { border-radius: var(--r-border-radius-2) }
r-rounded-3 { border-radius: var(--r-border-radius-3) }
r-rounded-pill { border-radius: var(--r-border-radius-pill) }
r-rounded-circle { border-radius: var(--r-border-radius-circle) }Cursor
/* Cursor helpers */
r-cursor-pointer { cursor: pointer }
r-cursor-default { cursor: default }
r-cursor-text { cursor: text }
r-cursor-move { cursor: move }
r-cursor-not-allowed { cursor: not-allowed }Overflow
/* Overflow helpers */
r-overflow-hidden { overflow: hidden }
r-overflow-visible { overflow: visible }
r-overflow-auto { overflow: auto }
r-overflow-scroll { overflow: scroll }
r-overflow-scroll-x { overflow-x: scroll }
r-overflow-scroll-y { overflow-y: scroll }
r-overflow-hidden-x { overflow-x: hidden }
r-overflow-hidden-y { overflow-y: hidden }
r-overflow-visible-x { overflow-x: visible }
r-overflow-visible-y { overflow-y: visible }
r-overflow-auto-x { overflow-x: auto }
r-overflow-auto-y { overflow-y: auto }Position
/* Position helpers */
r-position-relative { position: relative }
r-position-absolute { position: absolute }
r-position-fixed { position: fixed }
r-position-sticky { position: sticky }Shadow
/* Box shadow helpers */
r-shadow-0 { box-shadow: var(--r-shadow-0) }
r-shadow-10 { box-shadow: var(--r-shadow-10) }
r-shadow-20 { box-shadow: var(--r-shadow-20) }
r-shadow-30 { box-shadow: var(--r-shadow-30) }
r-shadow-40 { box-shadow: var(--r-shadow-40) }
r-shadow-inset-10 { box-shadow: var(--r-shadow-inset-10) }
r-shadow-inset-20 { box-shadow: var(--r-shadow-inset-20) }