{"id":15818737,"url":"https://github.com/viivue/atomic-css","last_synced_at":"2026-02-27T13:14:15.307Z","repository":{"id":55832536,"uuid":"492781732","full_name":"viivue/atomic-css","owner":"viivue","description":"⚛️  Customizable Atomic CSS Framework for everyone.","archived":false,"fork":false,"pushed_at":"2024-09-10T09:33:31.000Z","size":192,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-12T05:35:05.833Z","etag":null,"topics":["atomic-css","css","css-framework","sass","scss","stacks"],"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/viivue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2022-05-16T10:12:10.000Z","updated_at":"2024-04-26T04:14:03.000Z","dependencies_parsed_at":"2023-12-06T04:24:12.626Z","dependency_job_id":"cddd95d5-76c7-4ce1-861d-242e8df3809f","html_url":"https://github.com/viivue/atomic-css","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":"0.17708333333333337","last_synced_commit":"f2ed76aa116ac32ebc69838e4c85b94d39c3dbd6"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Fatomic-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Fatomic-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Fatomic-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Fatomic-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viivue","download_url":"https://codeload.github.com/viivue/atomic-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229636191,"owners_count":18102265,"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":["atomic-css","css","css-framework","sass","scss","stacks"],"created_at":"2024-10-05T06:04:48.449Z","updated_at":"2026-02-27T13:14:15.295Z","avatar_url":"https://github.com/viivue.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atomic CSS\n\n[![npm](https://badgen.net/npm/v/@viivue/atomic-css)](https://www.npmjs.com/package/@viivue/atomic-css)\n[![minified](https://badgen.net/badge/minified/~8KB/cyan)](https://www.jsdelivr.com/package/gh/viivue/atomic-css)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/viivue/atomic-css/badge?style=rounded)](https://www.jsdelivr.com/package/gh/viivue/atomic-css)\n[![license](https://badgen.net/github/license/viivue/atomic-css/)](https://github.com/viivue/atomic-css/blob/main/LICENSE)\n\n\u003e ⚛️ Customizable Atomic CSS Framework for everyone.\n\n- 💡Inspirited by [Atomic CSS, Vì Một Thế Giới Hoà Bình](https://ehkoo.com/bai-viet/introduction-to-functional-utility-first-atomic-css)\n- 👀 Guided by [Stacks](https://stackoverflow.design/product/guidelines/using-stacks/)\n- ✨ Build with [SCSS](https://sass-lang.com/)\n\n\nWe all might agree that Atomic CSS is a helpful tool for both FE and BE development. There's a lot of Atomic CSS \nframeworks out there (like [tailwindcss](https://tailwindcss.com/)), however, to **elevate the advantage of Atomic CSS**, while keeping\nit in **as light-weight as possible**, and even **customizable** for each project, we have this project on the go.\n\n## Usage\n\n### NPM\n\nInstall NPM package with basic config\n\n```shell\nnpm i @viivue/atomic-css\n```\n\nImport\n\n```js\nimport \"@viivue/atomic-css\";\n```\n\nOr, you can download the default Atomic CSS files in the [`/dist` folder](https://github.com/viivue/atomic-css/tree/main/dist).\n\n### CDN\nCheck the CDN served by jsDelivr [here](https://www.jsdelivr.com/package/gh/viivue/atomic-css?tab=files\u0026path=dist)\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/viivue/atomic-css@1.1.10/dist/atomic.min.css\"\u003e\n```\n\n### Customization\n\nTo add custom classes for a specific project, you will have to:\n\n1. Clone this repo to your local machine.\n2. Edit the `/scss/_config.scss`, you will find some example templates there.\n3. Generate the new Atomic CSS by `npm run prod`.\n\n## Deployment\n\n```shell\nnpm install\n\n# Watch SCSS files, then compile to previewed CSS\nnpm run dev\n\n# Compile compressed CSS for distribution.\n# Check version at `_defs.scss` and `package.json`\nnpm run prod\n\n# Publish NPM package\n# Auto-publish package on release using GitHub workflow\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviivue%2Fatomic-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviivue%2Fatomic-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviivue%2Fatomic-css/lists"}