{"id":20060716,"url":"https://github.com/lyrklif/css-utility-classes","last_synced_at":"2025-05-05T15:33:23.033Z","repository":{"id":125956038,"uuid":"505295691","full_name":"Lyrklif/css-utility-classes","owner":"Lyrklif","description":"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","archived":true,"fork":false,"pushed_at":"2024-10-19T16:57:12.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-02T10:14:20.155Z","etag":null,"topics":["button-style","css","css-variables","flexbox-utilities","frontend","responsive-design","scss","styles","text-styles","ui-design","utility-classes","web-development"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lyrklif.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-20T04:39:21.000Z","updated_at":"2024-10-19T17:06:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"7d870b22-d355-4363-a98b-f7f4a42945a1","html_url":"https://github.com/Lyrklif/css-utility-classes","commit_stats":null,"previous_names":["lyrklif/css-utility-classes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lyrklif%2Fcss-utility-classes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lyrklif%2Fcss-utility-classes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lyrklif%2Fcss-utility-classes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lyrklif%2Fcss-utility-classes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lyrklif","download_url":"https://codeload.github.com/Lyrklif/css-utility-classes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252524310,"owners_count":21762072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button-style","css","css-variables","flexbox-utilities","frontend","responsive-design","scss","styles","text-styles","ui-design","utility-classes","web-development"],"created_at":"2024-11-13T13:16:27.656Z","updated_at":"2025-05-05T15:33:22.754Z","avatar_url":"https://github.com/Lyrklif.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# CSS Utility Classes and Functions\n\nThis documentation provides an overview of various utility classes and functions for styling text, buttons, borders, and more in your frontend project.\n\n## Table of Contents\n1. [Text Utility Classes](#text-utility-classes)\n  - [Text Color](#text-color)\n  - [Text Font Family](#text-font-family)\n  - [Text Weight](#text-weight)\n  - [Text Alignment](#text-alignment)\n  - [Text Decoration](#text-decoration)\n  - [Text Transformation](#text-transformation)\n  - [Text Size](#text-size)\n  - [Line Height](#line-height)\n2. [Margin and Padding Utility Classes](#margin-and-padding-utility-classes)\n  - [Margin Auto](#margin-auto)\n  - [Directional Margin and Padding](#directional-margin-and-padding)\n3. [Layout Width Utility Classes](#layout-width-utility-classes)\n4. [Display, Align Items, and Justify Content](#display-align-items-and-justify-content)\n5. [Cursor Utility Classes](#cursor-utility-classes)\n6. [Border and Rounded Utility Classes](#border-and-rounded-utility-classes)\n7. [Background Color Utility Classes](#background-color-utility-classes)\n8. [Button Utility Classes](#button-utility-classes)\n9. [Fill Utility Classes](#fill-utility-classes)\n10. [CSS Functions](#css-functions)\n  - [`em()` function](#em-function)\n  - [`rem()` function](#rem-function)\n\n---\n\n## Text Utility Classes\n\n### Text Color\nUse the `.text-color-[variant]` class to apply different text colors.\n\n**Template**: `\u003cp class=\"text-color-blue\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-color-[variant]`: Apply the specific color to text.\n\n### Text Font Family\nUse the `.text-ff-[variant]` class to set the font family.\n\n**Template**: `\u003cp class=\"text-ff-secondary\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-ff-primary`\n- `.text-ff-secondary`\n\n### Text Weight\nUse the `.text-weight-[variant]` class to set the font weight.\n\n**Template**: `\u003cp class=\"text-weight-bold\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-weight-regular`\n- `.text-weight-medium`\n- `.text-weight-semibold`\n- `.text-weight-bold`\n\n### Text Alignment\nUse the `.text-align-[variant]` class to align text.\n\n**Template**: `\u003cp class=\"text-align-center\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-align-left`\n- `.text-align-center`\n- `.text-align-right`\n- `.text-align-justify`\n- `.text-align-start`\n- `.text-align-end`\n\n### Text Decoration\nUse the `.text-decoration-[variant]` class to apply text decoration.\n\n**Template**: `\u003cp class=\"text-decoration-underline\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-decoration-underline`\n- `.text-decoration-overline`\n- `.text-decoration-line-through`\n- `.text-decoration-none`\n\n### Text Transformation\nUse the `.text-transform-[variant]` class to transform text.\n\n**Template**: `\u003cp class=\"text-transform-uppercase\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-transform-uppercase`\n- `.text-transform-lowercase`\n- `.text-transform-capitalize`\n- `.text-transform-none`\n\n### Text Size\nUse the `.text-size-[variant]` class to set the font size.\n\n**Template**: `\u003cp class=\"text-size-md\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-size-xs`\n- `.text-size-sm`\n- `.text-size-md`\n- `.text-size-lg`\n\n### Line Height\nUse `.text-line-height-[variant]` to specify the line height.\n\n**Template**: `\u003cp class=\"text-size-md text-line-height-sm\"\u003etext\u003c/p\u003e`\n\nAvailable variants:\n- `.text-line-height-xs`\n- `.text-line-height-sm`\n- `.text-line-height-md`\n\n---\n\n## Margin and Padding Utility Classes\n\n### Margin Auto\nUse the `.ml-auto`, `.mr-auto`, or `.m-auto` classes for automatic margin adjustment.\n\n### Directional Margin and Padding\nUse the `.m-[value]`, `.p-[value]` classes for specific margin and padding adjustments.\n\n**Example**:\n```html\n\u003cdiv class=\"mr-30\"\u003etext\u003c/div\u003e\n\u003cdiv class=\"p-30\"\u003etext\u003c/div\u003e\n```\n\n---\n\n## Layout Width Utility Classes\nUse the `.min-w-[value]`, `.max-w-[value]`, and `.w-[value]` classes for width adjustments.\n\n**Example**:\n```html\n\u003cdiv class=\"min-w-xl\"\u003eMinimum width of 800px\u003c/div\u003e\n```\n\n---\n\n## Display, Align Items, and Justify Content\nUse `.display-[value]`, `.ai-[value]`, and `.jc-[value]` for display, alignment, and justification.\n\n**Example**:\n```html\n\u003cdiv class=\"display-flex jc-center ai-center\"\u003e\n  \u003cp\u003eCentered content in a flex container.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n---\n\n## Cursor Utility Classes\nUse the `.cursor-[value]` class to apply cursor styles.\n\n**Example**:\n```html\n\u003cdiv class=\"cursor-pointer\"\u003eClickable element\u003c/div\u003e\n```\n\n---\n\n## Border and Rounded Utility Classes\nUse `.rounded-[value]`, `.border-color-[value]`, `.border-width-[value]`, and `.border-style-[value]` for border and rounded corner styles.\n\n**Example**:\n```html\n\u003cdiv class=\"rounded-sm border-width-1 border-color-grey-1 border-style-solid\"\u003e\n  Box with small rounded corners, 1px grey solid border.\n\u003c/div\u003e\n```\n\n---\n\n## Background Color Utility Classes\nUse the `.bg-color-[value]` class to set background colors.\n\n**Example**:\n```html\n\u003cdiv class=\"bg-color-grey-5\"\u003eThis div has a grey background.\u003c/div\u003e\n```\n\n---\n\n## Button Utility Classes\nUse `.btn-min-height-[value]`, `.btn-min-width-[value]`, and `.btn-line-height-[value]` for button size and line height.\n\n**Example**:\n```html\n\u003cdiv class=\"btn btn-min-height-md btn-min-width-md\"\u003eButton\u003c/div\u003e\n```\n\n---\n\n## Fill Utility Classes\nUse the `.fill-[value]` class to apply fill colors, typically for SVGs.\n\n**Example**:\n```html\n\u003csvg class=\"fill-grey-5\"\u003e\u003c/svg\u003e\n```\n\n---\n\n## CSS Functions\n\n### `em()` function\nConverts pixel values to `em` units based on the parent context.\n\n```scss\n@function em($pixels, $context: $browser-context) {\n  @if (unitless($pixels)) {\n    $pixels: $pixels * 1px;\n  }\n  @if (unitless($context)) {\n    $context: $context * 1px;\n  }\n  @return calc($pixels / $context) * 1em;\n}\n```\n\n### `rem()` function\nConverts pixel values to `rem` units based on the root context.\n\n```scss\n@function rem($pixels) {\n  $context: $browser-context;\n  @if (unitless($pixels)) {\n    $pixels: $pixels * 1px;\n  }\n  @if (unitless($context)) {\n    $context: $context * 1px;\n  }\n  @return calc($pixels / $context)+rem;\n}\n```\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyrklif%2Fcss-utility-classes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyrklif%2Fcss-utility-classes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyrklif%2Fcss-utility-classes/lists"}