This documentation provides an overview of various utility classes and functions for styling text, buttons, borders, and more in your frontend project.
- Text Color
- Text Font Family
- Text Weight
- Text Alignment
- Text Decoration
- Text Transformation
- Text Size
- Line Height
- Layout Width Utility Classes
- Display, Align Items, and Justify Content
- Cursor Utility Classes
- Border and Rounded Utility Classes
- Background Color Utility Classes
- Button Utility Classes
- Fill Utility Classes
- CSS Functions
Use the .text-color-[variant] class to apply different text colors.
Template: <p class="text-color-blue">text</p>
Available variants:
.text-color-[variant]: Apply the specific color to text.
Use the .text-ff-[variant] class to set the font family.
Template: <p class="text-ff-secondary">text</p>
Available variants:
.text-ff-primary.text-ff-secondary
Use the .text-weight-[variant] class to set the font weight.
Template: <p class="text-weight-bold">text</p>
Available variants:
.text-weight-regular.text-weight-medium.text-weight-semibold.text-weight-bold
Use the .text-align-[variant] class to align text.
Template: <p class="text-align-center">text</p>
Available variants:
.text-align-left.text-align-center.text-align-right.text-align-justify.text-align-start.text-align-end
Use the .text-decoration-[variant] class to apply text decoration.
Template: <p class="text-decoration-underline">text</p>
Available variants:
.text-decoration-underline.text-decoration-overline.text-decoration-line-through.text-decoration-none
Use the .text-transform-[variant] class to transform text.
Template: <p class="text-transform-uppercase">text</p>
Available variants:
.text-transform-uppercase.text-transform-lowercase.text-transform-capitalize.text-transform-none
Use the .text-size-[variant] class to set the font size.
Template: <p class="text-size-md">text</p>
Available variants:
.text-size-xs.text-size-sm.text-size-md.text-size-lg
Use .text-line-height-[variant] to specify the line height.
Template: <p class="text-size-md text-line-height-sm">text</p>
Available variants:
.text-line-height-xs.text-line-height-sm.text-line-height-md
Use the .ml-auto, .mr-auto, or .m-auto classes for automatic margin adjustment.
Use the .m-[value], .p-[value] classes for specific margin and padding adjustments.
Example:
<div class="mr-30">text</div>
<div class="p-30">text</div>Use the .min-w-[value], .max-w-[value], and .w-[value] classes for width adjustments.
Example:
<div class="min-w-xl">Minimum width of 800px</div>Use .display-[value], .ai-[value], and .jc-[value] for display, alignment, and justification.
Example:
<div class="display-flex jc-center ai-center">
<p>Centered content in a flex container.</p>
</div>Use the .cursor-[value] class to apply cursor styles.
Example:
<div class="cursor-pointer">Clickable element</div>Use .rounded-[value], .border-color-[value], .border-width-[value], and .border-style-[value] for border and rounded corner styles.
Example:
<div class="rounded-sm border-width-1 border-color-grey-1 border-style-solid">
Box with small rounded corners, 1px grey solid border.
</div>Use the .bg-color-[value] class to set background colors.
Example:
<div class="bg-color-grey-5">This div has a grey background.</div>Use .btn-min-height-[value], .btn-min-width-[value], and .btn-line-height-[value] for button size and line height.
Example:
<div class="btn btn-min-height-md btn-min-width-md">Button</div>Use the .fill-[value] class to apply fill colors, typically for SVGs.
Example:
<svg class="fill-grey-5"></svg>Converts pixel values to em units based on the parent context.
@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return calc($pixels / $context) * 1em;
}Converts pixel values to rem units based on the root context.
@function rem($pixels) {
$context: $browser-context;
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return calc($pixels / $context)+rem;
}