{"id":18709357,"url":"https://github.com/buuug7/utilities-css","last_synced_at":"2025-04-12T10:35:18.095Z","repository":{"id":38238641,"uuid":"137228952","full_name":"buuug7/utilities-css","owner":"buuug7","description":"Simple and easy to use utilities CSS","archived":false,"fork":false,"pushed_at":"2023-06-22T21:56:29.000Z","size":238,"stargazers_count":10,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T05:51:12.534Z","etag":null,"topics":["css","utilities"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buuug7.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2018-06-13T14:42:52.000Z","updated_at":"2025-03-02T02:19:36.000Z","dependencies_parsed_at":"2024-11-07T12:32:36.141Z","dependency_job_id":"d3ad2f4f-5092-4730-8d83-6068cd4d2915","html_url":"https://github.com/buuug7/utilities-css","commit_stats":{"total_commits":136,"total_committers":6,"mean_commits":"22.666666666666668","dds":0.6102941176470589,"last_synced_commit":"0ab141cf08fff201e3b8106b8416f204ae89ff0d"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuug7%2Futilities-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuug7%2Futilities-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuug7%2Futilities-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuug7%2Futilities-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buuug7","download_url":"https://codeload.github.com/buuug7/utilities-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248553928,"owners_count":21123552,"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":["css","utilities"],"created_at":"2024-11-07T12:27:16.973Z","updated_at":"2025-04-12T10:35:17.846Z","avatar_url":"https://github.com/buuug7.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Utility CSS\n\nSimple and easy to use utilities CSS, inspired by [tailwindcss](https://github.com/tailwindcss/tailwindcss), but the\ntailwindcss is more complex and verbose to use. This only focused on wrap the most common used css into class name. Most\nof them is steal from [Bootstrap](https://github.com/twbs/bootstrap) utilities.\n\n \u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/utilities-css?minimal=true\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/utilities-css.svg\" alt=\"npm version\"\u003e\n  \t\u003c/a\u003e\n  \t\u003ca href=\"https://npmcharts.com/compare/utilities-css?minimal=true\"\u003e\n  \t    \u003cimg src=\"https://img.shields.io/npm/dm/utilities-css.svg\" alt=\"npm downloads\"\u003e \n  \t\u003c/a\u003e\n  \t\u003ca href=\"#\"\u003e\n  \t   \u003cimg src=\"https://img.shields.io/bundlephobia/min/utilities-css.svg\" alt=\"minified size\"/\u003e\n  \t\u003c/a\u003e\n \u003c/p\u003e\n\n## Usage\n\n```\nnpm install utilities-css\n```\n\nOr from CDN\n\n```\n\u003clink href=\"https://unpkg.com/utilities-css\" rel=\"stylesheet\"\u003e\n```\n\n## Utilities\n\n#### Display\n\nThe naming is `display-{value}`, `{value}` is one\nof `none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex, grid`.\n\n```html\n\u003cdiv class=\"display-block\"\u003esome text\u003c/div\u003e\n```\n\n#### Float\n\nBeware the float utilities have no effect on flex items. `float-{value}`, `{value}` is one of `left, right, none`.\n\n```html\n\u003cdiv class=\"float-left\"\u003esome text\u003c/div\u003e\n```\n\n#### Position\n\nThe naming is `position-{value}`, `{value}` is one of `static, relative, absolute, fixed, sticky`.\n\n```html\n\u003cdiv class=\"position-relative\"\u003esome text\u003c/div\u003e\n```\n\n#### Visibility\n\nThe naming is `visible` or `invisible`.\n\n```html\n\u003cdiv class=\"invisible\"\u003esome text\u003c/div\u003e\n```\n\n#### Overflow\n\nThe naming as blow\n\n- `overflow-{value}`, {value} is one of `visible, hidden, scroll, auto`\n- `overflow-{x|y}-{value}`, {value} is one of `visible, hidden, scroll, auto`\n\n```html\n\u003cdiv class=\"overflow-hidden\"\u003esome text\u003c/div\u003e\n\u003cdiv class=\"overflow-x-hidden\"\u003esome text\u003c/div\u003e\n```\n\n#### z-index\n\nThe naming is `z-{value}`, {value} for 0|10|20|30|40|50|auto\n\n```html\n\u003cdiv class=\"z-10\"\u003esome text\u003c/div\u003e\n```\n\n#### Spacing\n\nThe classes are naming using the format `{property}{sides}-{size}`\n\nThe `{property}` is one of:\n\n- **m** for classes that set margin\n- **p** for classes that set padding\n\nWhere {sides} is one of:\n\n- **t** for classes that set margin-top or padding-top\n- **b** for classes that set margin-bottom or padding-bottom\n- **l** for classes that set margin-left or padding-left\n- **r** for classes that set margin-right or padding-right\n- **x** for classes that set both _-left and _-right\n- **y** for classes that set both _-top and _-bottom\n- **blank** for classes that set a margin or padding on all 4 sides of the element\n\nWhere {size} is one of:\n\n- **0** for classes that eliminate the margin or padding by setting it to 0\n- **1** for classes that set the margin or padding to `$spacer * .25`\n- **2** for classes that set the margin or padding to `$spacer * .5`\n- **3** for classes that set the margin or padding to `$spacer`\n- **4** for classes that set the margin or padding to `$spacer * 1.5`\n- **5** for classes that set the margin or padding to `$spacer * 3`\n- **auto** for classes that set the margin to auto\n\n\u003e the `$spacer` default 1rem\n\nExample:\n\n```html\n\u003c!-- mt-0 set the element margin-top with 0 value --\u003e\n\u003cdiv class=\"mt-0\"\u003esome text\u003c/div\u003e\n\n\u003c!-- px-0 set the element padding left and right with 0 value --\u003e\n\u003cdiv class=\"px-0\"\u003esome text\u003c/div\u003e\n\n\u003c!-- mx-auto set the element margin left and right with auto value --\u003e\n\u003cdiv class=\"mx-auto\"\u003esome text\u003c/div\u003e\n```\n\n#### Shadow\n\nThe shadow utility copied from bootstrap.\n\n- `shadow-none`\n- `shadow-sm`\n- `shadow`\n- `shadow-lg`\n\n```html\n\u003cdiv class=\"shadow-sm\"\u003esome text\u003c/div\u003e\n```\n\n#### Border\n\nThe border default width is `1px solid #6c757d`\n\n- `border`\n- `border-top`\n- `border-right`\n- `border-bottom`\n- `border-left`\n\nBorder style:\n\n- `border-solid`\n- `border-dashed`\n- `border-dotted`\n- `border-none`\n\nBorder width:\n\n- `.border-{0|1|2|3|4|5}`\n- `.border-{top|right|bottom|left}-{0|1|2|3|4|5}`\n\nBorder radius:\n\n- `rounded`\n- `rounded-{sm|lg}` radius size\n- `rounded-{top|right|bottom|left}`\n- `rounded-{top|right|bottom|left}-{sm|lg}`\n- `rounded-circle` circle\n- `rounded-0` no radius\n\n```html\n\u003cdiv class=\"border-top border-dashed rounded-top\"\u003esome text\u003c/div\u003e\n```\n\n#### Sizing\n\n- `w-{25|50|75|100|auto}` for width 25%, 50%, 75%, 100% and auto\n- `h-{25|50|75|100|auto}` for height 25%, 50%, 75%, 100% and auto\n- `mw-100` set the max-width 100%\n- `mh-100` set the max-height 100%\n- `w-100` set width 100%\n- `h-100` set height 100%\n- `wh-100` set both the with and height 100%\n\n```html\n\u003cdiv class=\"w-100\"\u003esome text\u003c/div\u003e\n```\n\n#### Flex\n\nSupport most features of flex layout and let user quickly manage the layout, alignment and more of control. steal from\nBootstrap flex utilities.\n\n- flex direction\n  - `flex-row`\n  - `flex-row-reverse`\n  - `flex-column`\n  - `flex-column-reverse`\n- flex wrap\n  - `flex-wrap`\n  - `flex-nowrap`\n  - `flex-wrap-reverse`\n- flex grow and shrink\n  - `flex-fill`\n  - `flex-grow-0`\n  - `flex-grow-1`\n  - `flex-shrink-0`\n  - `flex-shrink-1`\n- justify content\n  - `justify-content-start`\n  - `justify-content-end`\n  - `justify-content-center`\n  - `justify-content-between`\n  - `justify-content-around`\n- align items\n  - `align-items-start`\n  - `align-items-end`\n  - `align-items-center`\n  - `align-items-baseline`\n  - `align-items-stretch`\n- align content\n  - `align-content-start`\n  - `align-content-end`\n  - `align-content-center`\n  - `align-content-between`\n  - `align-content-around`\n  - `align-content-stretch`\n- align self\n  - `align-self-auto`\n  - `align-self-start`\n  - `align-self-end`\n  - `align-self-center`\n  - `align-self-baseline`\n  - `align-self-stretch`\n- other\n  - flex-center (display flex and set both horizontal and vertical center)\n\n```html\n\u003cdiv class=\"display-flex justify-content-center align-content-center\"\u003e\n  some text\n\u003c/div\u003e\n```\n\n#### font\n\nfont weight\n\n- `fw-light` font weight with 300\n- `fw-normal` font weight with 400\n- `fw-bold` font weight with 700\n\nfont style\n\n- `fst-italic` font-style with italic\n- `fst-normal` font-style with normal\n\nfont size\n\n- `fs-1` font-size with 2.5rem , it related to h1\n- `fs-2` font-size with 2rem , it related to h2\n- `fs-3` font-size with 1.75rem , it related to h3\n- `fs-4` font-size with 1.5rem , it related to h4\n- `fs-5` font-size with 1.25rem , it related to h5\n- `fs-6` font-size with 1rem , it related to h6\n\n#### text\n\ntext align\n\n- `text-align-start` text-align with left\n- `text-align-end` text-align with right\n- `text-align-center` text-align with center\n\nwhite space\n\n- `text-wrap` white space with normal\n- `text-nowrap` white space with nowrap\n\nword break\n\n- `text-break` with break-word\n\ntext transform\n\n- `text-lowercase` text-transform with lowercase\n- `text-uppercase` text-transform with uppercase\n- `text-capitalize` text-transform with capitalize\n\ntext decoration\n\n- `text-decoration-none` text-decoration with none\n- `text-decoration-underline` text-decoration with underline\n- `text-decoration-line-through` text-decoration with line-through\n\nline height\n\n- `lh-1` line-height with 1\n- `lh-sm` line-height with 1.25\n- `lh-base` line-height with 1.5\n- `lh-lg` line-height with 2\n\ntext reset\n\n- `text-reset` reset text color with parent\n\n#### Other utilities\n\n- `clearfix`\n- `text-center`\n- `list-unstyled`\n\n## Contributing\n\nIf you're interested in contributing to Utilities CSS, please read\nour [CONTRIBUTING.md](https://github.com/buuug7/utilities-css/blob/master/CONTRIBUTING.md) before submitting a pull\nrequest.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuuug7%2Futilities-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuuug7%2Futilities-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuuug7%2Futilities-css/lists"}