{"id":20251693,"url":"https://github.com/jfmdev/purecss-utilities","last_synced_at":"2026-02-03T20:42:31.432Z","repository":{"id":237691514,"uuid":"795011853","full_name":"jfmdev/purecss-utilities","owner":"jfmdev","description":"Utility classes that complement PureCSS","archived":false,"fork":false,"pushed_at":"2024-05-22T16:28:33.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-21T19:54:46.836Z","etag":null,"topics":["css","purecss","purecss-framework","purecss-plugin","scss","utilities-library"],"latest_commit_sha":null,"homepage":"https://jfmdev.github.io/purecss-utilities/demo.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jfmdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2024-05-02T12:11:35.000Z","updated_at":"2024-05-22T16:26:24.000Z","dependencies_parsed_at":"2024-05-22T17:41:33.974Z","dependency_job_id":"2774cb43-9124-4965-928a-726ff52bf036","html_url":"https://github.com/jfmdev/purecss-utilities","commit_stats":null,"previous_names":["jfmdev/purecss-utilities"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/jfmdev/purecss-utilities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfmdev%2Fpurecss-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfmdev%2Fpurecss-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfmdev%2Fpurecss-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfmdev%2Fpurecss-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfmdev","download_url":"https://codeload.github.com/jfmdev/purecss-utilities/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfmdev%2Fpurecss-utilities/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29056731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T20:13:53.544Z","status":"ssl_error","status_checked_at":"2026-02-03T20:13:40.507Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","purecss","purecss-framework","purecss-plugin","scss","utilities-library"],"created_at":"2024-11-14T10:12:21.301Z","updated_at":"2026-02-03T20:42:31.412Z","avatar_url":"https://github.com/jfmdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PureCSS Utilities\n\nA CSS library that provides utility CSS classes which complement [PureCSS](https://purecss.io/).\n\n[See Demo](https://jfmdev.github.io/purecss-utilities/demo.html)\n\n## Installation\n\nYou can add this library to your page using the CDN from jsDelivr, just add a `\u003clink\u003e` element into your page's `\u003chead\u003e`, before your project's stylesheets but after PureCSS stylesheets. E.g.:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/purecss-utilities@main/dist/all.css\"\u003e\n\u003c/head\u003e\n```\n\nYou can also install the package using NPM:\n\n```\nnpm install purecss purecss-utilities --save\n```\n\nAnd then reference the `css` files (from the `dist/` folder) or the `scss` files (from the `src/` folder), like:\n\n```js\nimport 'purecss/build/pure-min.css'\nimport 'purecss-utilities/dist/all.css'\n```\n\n## Utilities\n\n### Texts\n\nYou can set the text font size using classes `.pure-txt-xxs` / `.pure-txt-xs` / `.pure-txt-sm` / `.pure-txt-md` / `.pure-txt-lg` / `.pure-txt-xl` / `.pure-txt-xxl`.\n\nYou can change the colors of texts using classes `.pure-txt-black` / `.pure-txt-blue` / `.pure-txt-cyan` / `.pure-txt-green` / `.pure-txt-magenta` / `.pure-txt-red` / `.pure-txt-white` / `.pure-txt-yellow`.\n\nAdditionally, you can modify the opacity of the colors the `pure-txt-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.\n\nFor additional utilities, you can use the [Utility classes for text styling](https://gist.github.com/jfmdev/855d8b20823c89fc8f196812b2d3eb39) Gist.\n\n### Background colors\n\nYou can change the colors of backgrounds using classes `.pure-bg-black` / `.pure-bg-blue` / `.pure-bg-cyan` / `.pure-bg-green` / `.pure-bg-magenta` / `.pure-bg-red` / `.pure-bg-white` / `.pure-bg-yellow`.\n\nAdditionally, you can modify the opacity of the colors the `pure-bg-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.\n\n### Borders\n\nYou can define borders using the classes `.pure-bd-*` / `.pure-bd-bottom-*` / `.pure-bd-left-*` / `.pure-bd-right-*` / `.pure-bd-top-*`, where `*` can be any number between 1 and 5, defining the width (in pixels) of the border. By default the border will be solid and black.\n\nTo change the style of a border you can use classes `.pure-bd-solid` / `.pure-bd-dotted` / `.pure-bd-dashed`.\n\nTo change the color of a border you can use classes  `.pure-bd-black` / `.pure-bd-blue` / `.pure-bd-cyan` / `.pure-bd-green` / `.pure-bd-magenta` / `.pure-bd-red` / `.pure-bd-white` / `.pure-bd-yellow`.\n\nAdditionally, you can modify the opacity of the border colors using the `pure-bg-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.\n\nTo set the radius of the border you can use classes `.pure-bd-radius-*` (where `*` can be any number between 1 and 5) / `.pure-bd-radius-circle` / `.pure-bd-radius-pill`.\n\n### Buttons\n\nYou can style buttons using classes `.pure-button-black` / `.pure-button-blue` / `.pure-button-cyan` / `.pure-button-green` / `.pure-button-magenta` / `.pure-button-red` / `.pure-button-white` / `.pure-button-yellow`.\n\nAlso you can use the `.pure-button-disabled` class to make the button to _look_ disabled.\n\n### Opacity\n\nThe opacity of elements can be modified using the `.pure-opacity-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.\n\n### Spacing\n\nThe library provides `pure-m-*` and `pure-p-*` classes for controlling an element's margin or padding, where `*` can be replaced with any number between `1` and `8`.  \n\nTo set the margin or padding to a single side, you can use classes `pure-mb-*` / `pure-ml-*` / `pure-mr-*` / `pure-mt-*` and `pure-pb-*` / `pure-pl-*` / `pure-pr-*` / `pure-pt-*`; and to set the margin or padding to the horizontal or vertical sides, you can use classes `pure-mx-*` / `pure-my-*` and `pure-px-*` / `pure-py-*`.\n\n### Flex\n\nThe library doesn't provide utilities for Flexbox containers, for that you can use the [Flexbox utility classes](https://gist.github.com/jfmdev/e3541b3d9e94866fe429b9baf89e6303) Gist.\n\n## Customization\n\n### Colors\n\nThe library uses variables `--pureBlack` / `--pureBlue` / `--pureCyan` / `--pureGreen` / `--pureMagenta` / `--pureRed` / `--pureWhite` / `--pureYellow` to define colors that later are used to define utility classes for texts, background, borders and buttons.\n\nYou can override these variables to change the colors used, but on that case you must also override the corresponding RBG variables: `--pureBlackRgb` / `--pureBlueRgb` / `--pureCyanRgb` / `--pureGreenRgb` / `--pureMagentaRgb` / `--pureRedRgb` / `--pureWhiteRgb` / `--pureYellowRgb`.\n\nAdditionally, for the case of buttons, you may also need to override the variables `---pureBlackContrastRgb` / `---pureBlueContrastRgb` / `---pureCyanContrastRgb` / `---pureGreenContrastRgb` / `---pureGreyContrastRgb` / `---pureMagentaContrastRgb` / `---pureRedContrastRgb` / `---pureWhiteContrastRgb` / `---pureYellowContrastRgb` that define the color of the labels inside the buttons.\n\n### Spacing\n\nThe base spacing used is `0.25rem`, but you can change this value by overriding the value of the `--pureSpacingUnit` variable.\n\n## Development\n\nThe library was implemented using [Sass](https://sass-lang.com/), you can use the following commands to build it:\n\n* `npm run build`\n* `npm run dev`\n\n## License\n\nPureCSS Utilities is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this software, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfmdev%2Fpurecss-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfmdev%2Fpurecss-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfmdev%2Fpurecss-utilities/lists"}