{"id":18881641,"url":"https://github.com/claudiusayadi/ketocss","last_synced_at":"2026-04-28T12:01:52.870Z","repository":{"id":190201178,"uuid":"682147211","full_name":"claudiusayadi/ketocss","owner":"claudiusayadi","description":"The #1 variable-first atomic design framework! This is my personal CSS Framework or project starter kit based on SASS (SCSS) and CSS Variables.","archived":false,"fork":false,"pushed_at":"2023-11-18T07:12:54.000Z","size":1926,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-31T08:39:13.917Z","etag":null,"topics":["adun-css","adun-studio","css-framework","cssnano","ecommerce","modern-css-features","postcss","postcss-preset-env","postcss-sass","responsive-design","sass","sass-starterkit","scss","service-based"],"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/claudiusayadi.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":"2023-08-23T14:40:27.000Z","updated_at":"2023-11-18T06:03:20.000Z","dependencies_parsed_at":"2024-11-08T06:50:44.308Z","dependency_job_id":"ee32a92a-1cd9-4887-8fc7-40deffb3c020","html_url":"https://github.com/claudiusayadi/ketocss","commit_stats":null,"previous_names":["claudiusayadi/adun.css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/claudiusayadi/ketocss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudiusayadi%2Fketocss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudiusayadi%2Fketocss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudiusayadi%2Fketocss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudiusayadi%2Fketocss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/claudiusayadi","download_url":"https://codeload.github.com/claudiusayadi/ketocss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudiusayadi%2Fketocss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32379629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T11:25:28.583Z","status":"ssl_error","status_checked_at":"2026-04-28T11:25:05.435Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["adun-css","adun-studio","css-framework","cssnano","ecommerce","modern-css-features","postcss","postcss-preset-env","postcss-sass","responsive-design","sass","sass-starterkit","scss","service-based"],"created_at":"2024-11-08T06:50:32.854Z","updated_at":"2026-04-28T12:01:52.852Z","avatar_url":"https://github.com/claudiusayadi.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KetoCSS\n\n**_The super-performant, variable-based, mobile-first, stack-agnostic (refactoring towards React since its my main stack now), lean atomic design framework!_**\n\n---\n\nThis is my personal CSS Framework or project starter kit based on SASS (SCSS) and CSS Variables. This Framework is heavily inspired by `ACSS` ([Automatic CSS by Kevin Geary](https://automaticcss.com/)). It is the second version of my former SASS Starter Template. It simply shows my learning growth. So, it will always be a WIP (work-in-progress).\n\nThis framework is meant to express simplicity and speed, helping devs to quickly start designing their apps in no time.\n\nIf you are here, I would love your contributions no matter how little. The goal is to have a flexible CSS Framework that gives us needed utility classes without clogging up our HTML like TailwindCSS, and still allows unlimited freedom to use custom BEM classes powered by the keto-variables.\n\n### FEATURES\n\nThe framework includes classes for common CSS rules (e.g. grids, flex, column-counts, buttons, font-related classes, etc.), and tons of readily available CSS variables for nearly every property you would need in your projects - global (root) and local (element, e.g. buttons) scoped.\n\nBest of it, KetoCSS automatically generates all your color tints, shades, and transparent variants, and gives you a well-balanced theme to work with.\n\n**This is a work in progress. If you notice any bug, please let me know**\n**All suggestion and feature requests are welcomed too.**\n\n## GETTING STARTED\n\n1. Clone the repo or download the zip file and extract it.\n2. Copy the `package.json` and the `postcss.config.cjs` to your project root.\n3. Move the `keto` folder into your project `/src` and delete everything else here.\n4. Install all dependencies:\n\n```bash\nyarn\n```\n\n5. Customize and make it yours:\n\nYou have two files to edit here _(These are the only files you should modify)_.\n\n```bash\nedit the variables in _global.scss\nedit _fonts.scss and copy your fonts into the fonts folder\nimport \"./keto/keto.scss\" into your main.jsx or layout.jsx\n```\n\n6. Start up your project:\n\n```bash\nyarn dev\n```\n\n7. Build away 🎉\n\nPostCSS handles everything and you don't have to do any extra configuration.\n\n_You can use `npm or pnpm` too._\n\n\u003cbr\u003e\n\n**NOTE: PurgeCSS ensures that only used classes are compiled in the final build.**\n\n**I assume you use Vite.js for all your React project. The setup is the same for Next.js**\n\n**Always check back for the newest updates. I'm working on creating React components based on the framework that anyone can easily copy and use.**\n\n**Want to contribute? Let me know, please.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaudiusayadi%2Fketocss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclaudiusayadi%2Fketocss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaudiusayadi%2Fketocss/lists"}