https://github.com/lyrklif/css-utility-classes
Comprehensive CSS Utility Classes and SCSS Functions for Responsive and Scalable Frontend Development. This toolkit provides essential styles for text, layout, buttons, and more, enabling fast and efficient UI design with minimal custom CSS
https://github.com/lyrklif/css-utility-classes
button-style css css-variables flexbox-utilities frontend responsive-design scss styles text-styles ui-design utility-classes web-development
Last synced: about 1 year ago
JSON representation
Comprehensive CSS Utility Classes and SCSS Functions for Responsive and Scalable Frontend Development. This toolkit provides essential styles for text, layout, buttons, and more, enabling fast and efficient UI design with minimal custom CSS
- Host: GitHub
- URL: https://github.com/lyrklif/css-utility-classes
- Owner: Lyrklif
- Archived: true
- Created: 2022-06-20T04:39:21.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T16:57:12.000Z (over 1 year ago)
- Last Synced: 2025-03-02T10:14:20.155Z (over 1 year ago)
- Topics: button-style, css, css-variables, flexbox-utilities, frontend, responsive-design, scss, styles, text-styles, ui-design, utility-classes, web-development
- Language: SCSS
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Utility Classes and Functions
This documentation provides an overview of various utility classes and functions for styling text, buttons, borders, and more in your frontend project.
## Table of Contents
1. [Text Utility Classes](#text-utility-classes)
- [Text Color](#text-color)
- [Text Font Family](#text-font-family)
- [Text Weight](#text-weight)
- [Text Alignment](#text-alignment)
- [Text Decoration](#text-decoration)
- [Text Transformation](#text-transformation)
- [Text Size](#text-size)
- [Line Height](#line-height)
2. [Margin and Padding Utility Classes](#margin-and-padding-utility-classes)
- [Margin Auto](#margin-auto)
- [Directional Margin and Padding](#directional-margin-and-padding)
3. [Layout Width Utility Classes](#layout-width-utility-classes)
4. [Display, Align Items, and Justify Content](#display-align-items-and-justify-content)
5. [Cursor Utility Classes](#cursor-utility-classes)
6. [Border and Rounded Utility Classes](#border-and-rounded-utility-classes)
7. [Background Color Utility Classes](#background-color-utility-classes)
8. [Button Utility Classes](#button-utility-classes)
9. [Fill Utility Classes](#fill-utility-classes)
10. [CSS Functions](#css-functions)
- [`em()` function](#em-function)
- [`rem()` function](#rem-function)
---
## Text Utility Classes
### Text Color
Use the `.text-color-[variant]` class to apply different text colors.
**Template**: `
text
`
Available variants:
- `.text-color-[variant]`: Apply the specific color to text.
### Text Font Family
Use the `.text-ff-[variant]` class to set the font family.
**Template**: `
text
`
Available variants:
- `.text-ff-primary`
- `.text-ff-secondary`
### Text Weight
Use the `.text-weight-[variant]` class to set the font weight.
**Template**: `
text
`
Available variants:
- `.text-weight-regular`
- `.text-weight-medium`
- `.text-weight-semibold`
- `.text-weight-bold`
### Text Alignment
Use the `.text-align-[variant]` class to align text.
**Template**: `
text
`
Available variants:
- `.text-align-left`
- `.text-align-center`
- `.text-align-right`
- `.text-align-justify`
- `.text-align-start`
- `.text-align-end`
### Text Decoration
Use the `.text-decoration-[variant]` class to apply text decoration.
**Template**: `
text
`
Available variants:
- `.text-decoration-underline`
- `.text-decoration-overline`
- `.text-decoration-line-through`
- `.text-decoration-none`
### Text Transformation
Use the `.text-transform-[variant]` class to transform text.
**Template**: `
text
`
Available variants:
- `.text-transform-uppercase`
- `.text-transform-lowercase`
- `.text-transform-capitalize`
- `.text-transform-none`
### Text Size
Use the `.text-size-[variant]` class to set the font size.
**Template**: `
text
`
Available variants:
- `.text-size-xs`
- `.text-size-sm`
- `.text-size-md`
- `.text-size-lg`
### Line Height
Use `.text-line-height-[variant]` to specify the line height.
**Template**: `
text
`
Available variants:
- `.text-line-height-xs`
- `.text-line-height-sm`
- `.text-line-height-md`
---
## Margin and Padding Utility Classes
### Margin Auto
Use the `.ml-auto`, `.mr-auto`, or `.m-auto` classes for automatic margin adjustment.
### Directional Margin and Padding
Use the `.m-[value]`, `.p-[value]` classes for specific margin and padding adjustments.
**Example**:
```html
text
text
```
---
## Layout Width Utility Classes
Use the `.min-w-[value]`, `.max-w-[value]`, and `.w-[value]` classes for width adjustments.
**Example**:
```html
Minimum width of 800px
```
---
## Display, Align Items, and Justify Content
Use `.display-[value]`, `.ai-[value]`, and `.jc-[value]` for display, alignment, and justification.
**Example**:
```html
Centered content in a flex container.
```
---
## Cursor Utility Classes
Use the `.cursor-[value]` class to apply cursor styles.
**Example**:
```html
Clickable element
```
---
## Border and Rounded Utility Classes
Use `.rounded-[value]`, `.border-color-[value]`, `.border-width-[value]`, and `.border-style-[value]` for border and rounded corner styles.
**Example**:
```html
Box with small rounded corners, 1px grey solid border.
```
---
## Background Color Utility Classes
Use the `.bg-color-[value]` class to set background colors.
**Example**:
```html
This div has a grey background.
```
---
## Button Utility Classes
Use `.btn-min-height-[value]`, `.btn-min-width-[value]`, and `.btn-line-height-[value]` for button size and line height.
**Example**:
```html
Button
```
---
## Fill Utility Classes
Use the `.fill-[value]` class to apply fill colors, typically for SVGs.
**Example**:
```html
```
---
## CSS Functions
### `em()` function
Converts pixel values to `em` units based on the parent context.
```scss
@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return calc($pixels / $context) * 1em;
}
```
### `rem()` function
Converts pixel values to `rem` units based on the root context.
```scss
@function rem($pixels) {
$context: $browser-context;
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return calc($pixels / $context)+rem;
}
```
---