{"id":20390528,"url":"https://github.com/swlkr/totallycss","last_synced_at":"2026-01-25T06:37:54.564Z","repository":{"id":145296916,"uuid":"437374062","full_name":"swlkr/totallycss","owner":"swlkr","description":"Like tailwind but with css variables","archived":false,"fork":false,"pushed_at":"2022-04-25T15:03:04.000Z","size":27,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-01T12:19:39.575Z","etag":null,"topics":["css","css-framework","pollen","styleguide","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/swlkr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2021-12-11T19:45:38.000Z","updated_at":"2023-02-26T18:37:04.000Z","dependencies_parsed_at":"2023-07-05T15:02:57.005Z","dependency_job_id":null,"html_url":"https://github.com/swlkr/totallycss","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/swlkr/totallycss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swlkr%2Ftotallycss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swlkr%2Ftotallycss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swlkr%2Ftotallycss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swlkr%2Ftotallycss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swlkr","download_url":"https://codeload.github.com/swlkr/totallycss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swlkr%2Ftotallycss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28746769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T05:12:38.112Z","status":"ssl_error","status_checked_at":"2026-01-25T05:04:50.338Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["css","css-framework","pollen","styleguide","tailwind","tailwindcss"],"created_at":"2024-11-15T03:25:36.880Z","updated_at":"2026-01-25T06:37:54.535Z","avatar_url":"https://github.com/swlkr.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![2021-12-11 at 10 57 33](https://user-images.githubusercontent.com/159336/145689758-20df4c9b-b3a1-4ff5-a0fa-308931924138.jpg)\n\n# totally.css\n\nLike tailwind but with css variables.\n\n# What?\n\nThis will explain everything:\n\n```css\n.hero {\n  color: var(--color-indigo-700);\n  font-size: var(--scale-10);\n  font-family: var(--font-sans);\n  font-weight: var(--weight-extrabold);\n}\n```\n\nThese are the variables:\n\n\u003cdetails\u003e\n\u003csummary\u003eColors\u003c/summary\u003e\n\n| Rule | Variable | Property |\n| ---  | ---      | ---      |\n| color            | --color-black      | #14141B                 |\n| color            | --color-gray-50    | #f9fafb                 |\n| color            | --color-gray-100   | #f2f4f5                 |\n| color            | --color-gray-200   | #e8eaed                 |\n| color            | --color-gray-300   | #d4d7dd                 |\n| color            | --color-gray-400   | #a5aab4                 |\n| color            | --color-gray-500   | #767c89                 |\n| color            | --color-gray-600   | #555d6e                 |\n| color            | --color-gray-700   | #3f4754                 |\n| color            | --color-gray-800   | #2c343f                 |\n| color            | --color-gray-900   | #10181C                 |\n| color            | --color-gray       | var(--color-gray-500)   |\n| color            | --color-red-300    | #fc8181                 |\n| color            | --color-red-500    | #e53e3e                 |\n| color            | --color-red-700    | #c53030                 |\n| color            | --color-red        | var(--color-red-500)    |\n| color            | --color-green-300  | #9ae6b4                 |\n| color            | --color-green-500  | #48bb78                 |\n| color            | --color-green-700  | #2f855a                 |\n| color            | --color-green      | var(--color-green-500)  |\n| color            | --color-blue-300   | #63b3ed                 |\n| color            | --color-blue-500   | #4299e1                 |\n| color            | --color-blue-700   | #3182ce                 |\n| color            | --color-blue       | var(--color-blue-500)   |\n| color            | --color-pink-300   | #fbb6ce                 |\n| color            | --color-pink-500   | #ed64a6                 |\n| color            | --color-pink-700   | #d53f8c                 |\n| color            | --color-pink       | var(--color-pink-500)   |\n| color            | --color-purple-300 | #b794f4                 |\n| color            | --color-purple-500 | #805ad5                 |\n| color            | --color-purple-700 | #6b46c1                 |\n| color            | --color-purple     | var(--color-purple-500) |\n| color            | --color-teal-300   | #81e6d9                 |\n| color            | --color-teal-500   | #38b2ac                 |\n| color            | --color-teal-700   | #2c7a7b                 |\n| color            | --color-teal       | var(--color-teal-500)   |\n| color            | --color-indigo-300 | #7f9cf5                 |\n| color            | --color-indigo-500 | #5a67d8                 |\n| color            | --color-indigo-700 | #4c51bf                 |\n| color            | --color-indigo     | var(--color-indigo-500) |\n| color            | --color-yellow-300 | #faf089                 |\n| color            | --color-yellow-500 | #ecc94b                 |\n| color            | --color-yellow-700 | #d69e2e                 |\n| color            | --color-yellow     | var(--color-yellow-500) |\n| color            | --color-orange-300 | #fbd38d                 |\n| color            | --color-orange-500 | #ed8936                 |\n| color            | --color-orange-700 | #dd6b20                 |\n| color            | --color-orange     | var(--color-orange-500) |\n| color            | --color-brown-300  | #a1887f                 |\n| color            | --color-brown-500  | #795548                 |\n| color            | --color-brown-700  | #5d4037                 |\n| color            | --color-brown      | var(--color-brown-500)  |\n| background-color | --color-black      | #14141B                 |\n| background-color | --color-gray-50    | #f9fafb                 |\n| background-color | --color-gray-100   | #f2f4f5                 |\n| background-color | --color-gray-200   | #e8eaed                 |\n| background-color | --color-gray-300   | #d4d7dd                 |\n| background-color | --color-gray-400   | #a5aab4                 |\n| background-color | --color-gray-500   | #767c89                 |\n| background-color | --color-gray-600   | #555d6e                 |\n| background-color | --color-gray-700   | #3f4754                 |\n| background-color | --color-gray-800   | #2c343f                 |\n| background-color | --color-gray-900   | #10181C                 |\n| background-color | --color-gray       | var(--color-gray-500)   |\n| background-color | --color-red-300    | #fc8181                 |\n| background-color | --color-red-500    | #e53e3e                 |\n| background-color | --color-red-700    | #c53030                 |\n| background-color | --color-red        | var(--color-red-500)    |\n| background-color | --color-green-300  | #9ae6b4                 |\n| background-color | --color-green-500  | #48bb78                 |\n| background-color | --color-green-700  | #2f855a                 |\n| background-color | --color-green      | var(--color-green-500)  |\n| background-color | --color-blue-300   | #63b3ed                 |\n| background-color | --color-blue-500   | #4299e1                 |\n| background-color | --color-blue-700   | #3182ce                 |\n| background-color | --color-blue       | var(--color-blue-500)   |\n| background-color | --color-pink-300   | #fbb6ce                 |\n| background-color | --color-pink-500   | #ed64a6                 |\n| background-color | --color-pink-700   | #d53f8c                 |\n| background-color | --color-pink       | var(--color-pink-500)   |\n| background-color | --color-purple-300 | #b794f4                 |\n| background-color | --color-purple-500 | #805ad5                 |\n| background-color | --color-purple-700 | #6b46c1                 |\n| background-color | --color-purple     | var(--color-purple-500) |\n| background-color | --color-teal-300   | #81e6d9                 |\n| background-color | --color-teal-500   | #38b2ac                 |\n| background-color | --color-teal-700   | #2c7a7b                 |\n| background-color | --color-teal       | var(--color-teal-500)   |\n| background-color | --color-indigo-300 | #7f9cf5                 |\n| background-color | --color-indigo-500 | #5a67d8                 |\n| background-color | --color-indigo-700 | #4c51bf                 |\n| background-color | --color-indigo     | var(--color-indigo-500) |\n| background-color | --color-yellow-300 | #faf089                 |\n| background-color | --color-yellow-500 | #ecc94b                 |\n| background-color | --color-yellow-700 | #d69e2e                 |\n| background-color | --color-yellow     | var(--color-yellow-500) |\n| background-color | --color-orange-300 | #fbd38d                 |\n| background-color | --color-orange-500 | #ed8936                 |\n| background-color | --color-orange-700 | #dd6b20                 |\n| background-color | --color-orange     | var(--color-orange-500) |\n| background-color | --color-brown-300  | #a1887f                 |\n| background-color | --color-brown-500  | #795548                 |\n| background-color | --color-brown-700  | #5d4037                 |\n| background-color | --color-brown      | var(--color-brown-500)  |\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTypography\u003c/summary\u003e\n\n| Rule | Variable | Property |\n| ---  | ---      | ---      |\n| font-size      | --scale-000        | 0.75rem                                                                                  |\n| font-size      | --scale-00         | 0.875rem                                                                                 |\n| font-size      | --scale-0          | 1rem                                                                                     |\n| font-size      | --scale-1          | 1.125rem                                                                                 |\n| font-size      | --scale-2          | 1.25rem                                                                                  |\n| font-size      | --scale-3          | 1.5rem                                                                                   |\n| font-size      | --scale-4          | 1.875rem                                                                                 |\n| font-size      | --scale-5          | 2.25rem                                                                                  |\n| font-size      | --scale-6          | 3rem                                                                                     |\n| font-size      | --scale-7          | 3.75rem                                                                                  |\n| font-size      | --scale-8          | 4.5rem                                                                                   |\n| font-size      | --scale-9          | 6rem                                                                                     |\n| font-size      | --scale-10         | 8rem                                                                                     |\n| font-family    | --font-sans        | system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue |\n| font-family    | --font-serif       | Georgia, Cambria, \"Times New Roman\", Times, serif                                        |\n| font-family    | --font-mono        | Consolas, Menlo, Monaco, \"Liberation Mono\", monospace                                    |\n| font-weight    | --weight-light     | 300                                                                                      |\n| font-weight    | --weight-regular   | 400                                                                                      |\n| font-weight    | --weight-medium    | 500                                                                                      |\n| font-weight    | --weight-semibold  | 600                                                                                      |\n| font-weight    | --weight-bold      | 700                                                                                      |\n| font-weight    | --weight-extrabold | 800                                                                                      |\n| font-weight    | --weight-black     | 900                                                                                      |\n| line-height    | --line-none        | 1                                                                                        |\n| line-height    | --line-xs          | 1.125                                                                                    |\n| line-height    | --line-sm          | 1.275                                                                                    |\n| line-height    | --line-md          | 1.5                                                                                      |\n| line-height    | --line-lg          | 1.625                                                                                    |\n| line-height    | --line-xl          | 2                                                                                        |\n| letter-spacing | --letter-xs        | -0.05em                                                                                  |\n| letter-spacing | --letter-sm        | -0.025em                                                                                 |\n| letter-spacing | --letter-none      | 0em                                                                                      |\n| letter-spacing | --letter-lg        | 0.025em                                                                                  |\n| letter-spacing | --letter-xl        | 0.05em                                                                                   |\n| max-width      | --prose-xs         | 45ch                                                                                     |\n| max-width      | --prose-sm         | 55ch                                                                                     |\n| max-width      | --prose-md         | 65ch                                                                                     |\n| max-width      | --prose-lg         | 75ch                                                                                     |\n| max-width      | --prose-xl         | 85ch                                                                                     |\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003eLayout\u003c/summary\u003e\n\n| Rule | Variable | Property |\n| ---  | ---      | ---      |\n| margin    | --size-1      | 4px         |\n| margin    | --size-2      | 8px         |\n| margin    | --size-3      | 12px        |\n| margin    | --size-4      | 16px        |\n| margin    | --size-5      | 20px        |\n| margin    | --size-6      | 24px        |\n| margin    | --size-7      | 28px        |\n| margin    | --size-8      | 32px        |\n| margin    | --size-9      | 36px        |\n| margin    | --size-10     | 40px        |\n| margin    | --size-11     | 44px        |\n| margin    | --size-12     | 48px        |\n| margin    | --size-14     | 56px        |\n| margin    | --size-16     | 64px        |\n| margin    | --size-20     | 80px        |\n| margin    | --size-24     | 96px        |\n| margin    | --size-28     | 112px       |\n| margin    | --size-32     | 128px       |\n| margin    | --size-36     | 144px       |\n| margin    | --size-40     | 160px       |\n| margin    | --size-44     | 176px       |\n| margin    | --size-48     | 192px       |\n| margin    | --size-52     | 208px       |\n| margin    | --size-56     | 224px       |\n| margin    | --size-60     | 240px       |\n| margin    | --size-64     | 256px       |\n| margin    | --size-72     | 288px       |\n| margin    | --size-80     | 320px       |\n| margin    | --size-96     | 384px       |\n| margin    | --size-px     | 1px         |\n| margin    | --size-full   | 100%        |\n| margin    | --size-screen | 100vw       |\n| margin    | --size-min    | min-content |\n| margin    | --size-max    | max-content |\n| padding   | --size-1      | 4px         |\n| padding   | --size-2      | 8px         |\n| padding   | --size-3      | 12px        |\n| padding   | --size-4      | 16px        |\n| padding   | --size-5      | 20px        |\n| padding   | --size-6      | 24px        |\n| padding   | --size-7      | 28px        |\n| padding   | --size-8      | 32px        |\n| padding   | --size-9      | 36px        |\n| padding   | --size-10     | 40px        |\n| padding   | --size-11     | 44px        |\n| padding   | --size-12     | 48px        |\n| padding   | --size-14     | 56px        |\n| padding   | --size-16     | 64px        |\n| padding   | --size-20     | 80px        |\n| padding   | --size-24     | 96px        |\n| padding   | --size-28     | 112px       |\n| padding   | --size-32     | 128px       |\n| padding   | --size-36     | 144px       |\n| padding   | --size-40     | 160px       |\n| padding   | --size-44     | 176px       |\n| padding   | --size-48     | 192px       |\n| padding   | --size-52     | 208px       |\n| padding   | --size-56     | 224px       |\n| padding   | --size-60     | 240px       |\n| padding   | --size-64     | 256px       |\n| padding   | --size-72     | 288px       |\n| padding   | --size-80     | 320px       |\n| padding   | --size-96     | 384px       |\n| padding   | --size-px     | 1px         |\n| padding   | --size-full   | 100%        |\n| padding   | --size-screen | 100vw       |\n| padding   | --size-min    | min-content |\n| padding   | --size-max    | max-content |\n| width     | --size-1      | 4px         |\n| width     | --size-2      | 8px         |\n| width     | --size-3      | 12px        |\n| width     | --size-4      | 16px        |\n| width     | --size-5      | 20px        |\n| width     | --size-6      | 24px        |\n| width     | --size-7      | 28px        |\n| width     | --size-8      | 32px        |\n| width     | --size-9      | 36px        |\n| width     | --size-10     | 40px        |\n| width     | --size-11     | 44px        |\n| width     | --size-12     | 48px        |\n| width     | --size-14     | 56px        |\n| width     | --size-16     | 64px        |\n| width     | --size-20     | 80px        |\n| width     | --size-24     | 96px        |\n| width     | --size-28     | 112px       |\n| width     | --size-32     | 128px       |\n| width     | --size-36     | 144px       |\n| width     | --size-40     | 160px       |\n| width     | --size-44     | 176px       |\n| width     | --size-48     | 192px       |\n| width     | --size-52     | 208px       |\n| width     | --size-56     | 224px       |\n| width     | --size-60     | 240px       |\n| width     | --size-64     | 256px       |\n| width     | --size-72     | 288px       |\n| width     | --size-80     | 320px       |\n| width     | --size-96     | 384px       |\n| width     | --size-px     | 1px         |\n| width     | --size-full   | 100%        |\n| width     | --size-screen | 100vw       |\n| width     | --size-min    | min-content |\n| width     | --size-max    | max-content |\n| height    | --size-1      | 4px         |\n| height    | --size-2      | 8px         |\n| height    | --size-3      | 12px        |\n| height    | --size-4      | 16px        |\n| height    | --size-5      | 20px        |\n| height    | --size-6      | 24px        |\n| height    | --size-7      | 28px        |\n| height    | --size-8      | 32px        |\n| height    | --size-9      | 36px        |\n| height    | --size-10     | 40px        |\n| height    | --size-11     | 44px        |\n| height    | --size-12     | 48px        |\n| height    | --size-14     | 56px        |\n| height    | --size-16     | 64px        |\n| height    | --size-20     | 80px        |\n| height    | --size-24     | 96px        |\n| height    | --size-28     | 112px       |\n| height    | --size-32     | 128px       |\n| height    | --size-36     | 144px       |\n| height    | --size-40     | 160px       |\n| height    | --size-44     | 176px       |\n| height    | --size-48     | 192px       |\n| height    | --size-52     | 208px       |\n| height    | --size-56     | 224px       |\n| height    | --size-60     | 240px       |\n| height    | --size-64     | 256px       |\n| height    | --size-72     | 288px       |\n| height    | --size-80     | 320px       |\n| height    | --size-96     | 384px       |\n| height    | --size-px     | 1px         |\n| height    | --size-full   | 100%        |\n| height    | --size-screen | 100vw       |\n| height    | --size-min    | min-content |\n| height    | --size-max    | max-content |\n| max-width | --width-xs    | 480px       |\n| max-width | --width-sm    | 640px       |\n| max-width | --width-md    | 768px       |\n| max-width | --width-lg    | 1024px      |\n| max-width | --width-xl    | 1280px      |\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003eUI\u003c/summary\u003e\n\n| Rule | Variable | Property |\n| ---  | ---      | ---      |\n| border-radius   | --radius-100        | 100%                                                                    |\n| border-radius   | --radius-xs         | 3px                                                                     |\n| border-radius   | --radius-sm         | 6px                                                                     |\n| border-radius   | --radius-md         | 8px                                                                     |\n| border-radius   | --radius-lg         | 12px                                                                    |\n| border-radius   | --radius-xl         | 16px                                                                    |\n| border-radius   | --radius-full       | 9999px                                                                  |\n| box-shadow      | --elevation-1       | 0 1px 2px 0 rgba(0, 0, 0, 0.05)                                         |\n| box-shadow      | --elevation-2       | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)         |\n| box-shadow      | --elevation-3       | 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06)   |\n| box-shadow      | --elevation-4       | 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |\n| box-shadow      | --elevation-5       | 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04) |\n| box-shadow      | --elevation-6       | 0 24px 48px -12px rgba(0, 0, 0, 0.25)                                   |\n| box-shadow      | --elevation-7       | 0 32px 64px -12px rgba(0, 0, 0, 0.2)                                    |\n| backdrop-filter | --blur-xs           | blur(4px)                                                               |\n| backdrop-filter | --blur-sm           | blur(8px)                                                               |\n| backdrop-filter | --blur-md           | blur(16px)                                                              |\n| backdrop-filter | --blur-lg           | blur(24px)                                                              |\n| backdrop-filter | --blur-xl           | blur(40px)                                                              |\n| transition      | --easing-standard   | cubic-bezier(0.4, 0, 0.2, 1)                                            |\n| transition      | --easing-accelerate | cubic-bezier(0.4, 0, 1, 1)                                              |\n| transition      | --easing-decelerate | cubic-bezier(0, 0, 0.2, 1)                                              |\n| z-index         | --layer-1           | 10                                                                      |\n| z-index         | --layer-2           | 20                                                                      |\n| z-index         | --layer-3           | 30                                                                      |\n| z-index         | --layer-4           | 40                                                                      |\n| z-index         | --layer-5           | 50                                                                      |\n| z-index         | --layer-below       | -1                                                                      |\n| z-index         | --layer-top         | 2147483647                                                              |\n\n\u003c/details\u003e\n\n\n# Why\n\nI really liked pollen.style but I don't use npm or node,\nI just wanted something like pollen but with just plain css files.\n\nThis project is totally simple, just drop the `totally.min.css` file in your\nassets folder (or wherever) and viola, you have a decent style guide\nwith css variables.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswlkr%2Ftotallycss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswlkr%2Ftotallycss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswlkr%2Ftotallycss/lists"}