https://github.com/swlkr/totallycss
Like tailwind but with css variables
https://github.com/swlkr/totallycss
css css-framework pollen styleguide tailwind tailwindcss
Last synced: 5 days ago
JSON representation
Like tailwind but with css variables
- Host: GitHub
- URL: https://github.com/swlkr/totallycss
- Owner: swlkr
- License: mit
- Created: 2021-12-11T19:45:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-25T15:03:04.000Z (about 3 years ago)
- Last Synced: 2025-02-20T23:04:28.572Z (3 months ago)
- Topics: css, css-framework, pollen, styleguide, tailwind, tailwindcss
- Language: CSS
- Homepage:
- Size: 26.4 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# totally.css
Like tailwind but with css variables.
# What?
This will explain everything:
```css
.hero {
color: var(--color-indigo-700);
font-size: var(--scale-10);
font-family: var(--font-sans);
font-weight: var(--weight-extrabold);
}
```
These are the variables:
Colors
| Rule | Variable | Property |
| --- | --- | --- |
| color | --color-black | #14141B |
| color | --color-gray-50 | #f9fafb |
| color | --color-gray-100 | #f2f4f5 |
| color | --color-gray-200 | #e8eaed |
| color | --color-gray-300 | #d4d7dd |
| color | --color-gray-400 | #a5aab4 |
| color | --color-gray-500 | #767c89 |
| color | --color-gray-600 | #555d6e |
| color | --color-gray-700 | #3f4754 |
| color | --color-gray-800 | #2c343f |
| color | --color-gray-900 | #10181C |
| color | --color-gray | var(--color-gray-500) |
| color | --color-red-300 | #fc8181 |
| color | --color-red-500 | #e53e3e |
| color | --color-red-700 | #c53030 |
| color | --color-red | var(--color-red-500) |
| color | --color-green-300 | #9ae6b4 |
| color | --color-green-500 | #48bb78 |
| color | --color-green-700 | #2f855a |
| color | --color-green | var(--color-green-500) |
| color | --color-blue-300 | #63b3ed |
| color | --color-blue-500 | #4299e1 |
| color | --color-blue-700 | #3182ce |
| color | --color-blue | var(--color-blue-500) |
| color | --color-pink-300 | #fbb6ce |
| color | --color-pink-500 | #ed64a6 |
| color | --color-pink-700 | #d53f8c |
| color | --color-pink | var(--color-pink-500) |
| color | --color-purple-300 | #b794f4 |
| color | --color-purple-500 | #805ad5 |
| color | --color-purple-700 | #6b46c1 |
| color | --color-purple | var(--color-purple-500) |
| color | --color-teal-300 | #81e6d9 |
| color | --color-teal-500 | #38b2ac |
| color | --color-teal-700 | #2c7a7b |
| color | --color-teal | var(--color-teal-500) |
| color | --color-indigo-300 | #7f9cf5 |
| color | --color-indigo-500 | #5a67d8 |
| color | --color-indigo-700 | #4c51bf |
| color | --color-indigo | var(--color-indigo-500) |
| color | --color-yellow-300 | #faf089 |
| color | --color-yellow-500 | #ecc94b |
| color | --color-yellow-700 | #d69e2e |
| color | --color-yellow | var(--color-yellow-500) |
| color | --color-orange-300 | #fbd38d |
| color | --color-orange-500 | #ed8936 |
| color | --color-orange-700 | #dd6b20 |
| color | --color-orange | var(--color-orange-500) |
| color | --color-brown-300 | #a1887f |
| color | --color-brown-500 | #795548 |
| color | --color-brown-700 | #5d4037 |
| color | --color-brown | var(--color-brown-500) |
| background-color | --color-black | #14141B |
| background-color | --color-gray-50 | #f9fafb |
| background-color | --color-gray-100 | #f2f4f5 |
| background-color | --color-gray-200 | #e8eaed |
| background-color | --color-gray-300 | #d4d7dd |
| background-color | --color-gray-400 | #a5aab4 |
| background-color | --color-gray-500 | #767c89 |
| background-color | --color-gray-600 | #555d6e |
| background-color | --color-gray-700 | #3f4754 |
| background-color | --color-gray-800 | #2c343f |
| background-color | --color-gray-900 | #10181C |
| background-color | --color-gray | var(--color-gray-500) |
| background-color | --color-red-300 | #fc8181 |
| background-color | --color-red-500 | #e53e3e |
| background-color | --color-red-700 | #c53030 |
| background-color | --color-red | var(--color-red-500) |
| background-color | --color-green-300 | #9ae6b4 |
| background-color | --color-green-500 | #48bb78 |
| background-color | --color-green-700 | #2f855a |
| background-color | --color-green | var(--color-green-500) |
| background-color | --color-blue-300 | #63b3ed |
| background-color | --color-blue-500 | #4299e1 |
| background-color | --color-blue-700 | #3182ce |
| background-color | --color-blue | var(--color-blue-500) |
| background-color | --color-pink-300 | #fbb6ce |
| background-color | --color-pink-500 | #ed64a6 |
| background-color | --color-pink-700 | #d53f8c |
| background-color | --color-pink | var(--color-pink-500) |
| background-color | --color-purple-300 | #b794f4 |
| background-color | --color-purple-500 | #805ad5 |
| background-color | --color-purple-700 | #6b46c1 |
| background-color | --color-purple | var(--color-purple-500) |
| background-color | --color-teal-300 | #81e6d9 |
| background-color | --color-teal-500 | #38b2ac |
| background-color | --color-teal-700 | #2c7a7b |
| background-color | --color-teal | var(--color-teal-500) |
| background-color | --color-indigo-300 | #7f9cf5 |
| background-color | --color-indigo-500 | #5a67d8 |
| background-color | --color-indigo-700 | #4c51bf |
| background-color | --color-indigo | var(--color-indigo-500) |
| background-color | --color-yellow-300 | #faf089 |
| background-color | --color-yellow-500 | #ecc94b |
| background-color | --color-yellow-700 | #d69e2e |
| background-color | --color-yellow | var(--color-yellow-500) |
| background-color | --color-orange-300 | #fbd38d |
| background-color | --color-orange-500 | #ed8936 |
| background-color | --color-orange-700 | #dd6b20 |
| background-color | --color-orange | var(--color-orange-500) |
| background-color | --color-brown-300 | #a1887f |
| background-color | --color-brown-500 | #795548 |
| background-color | --color-brown-700 | #5d4037 |
| background-color | --color-brown | var(--color-brown-500) |
Typography
| Rule | Variable | Property |
| --- | --- | --- |
| font-size | --scale-000 | 0.75rem |
| font-size | --scale-00 | 0.875rem |
| font-size | --scale-0 | 1rem |
| font-size | --scale-1 | 1.125rem |
| font-size | --scale-2 | 1.25rem |
| font-size | --scale-3 | 1.5rem |
| font-size | --scale-4 | 1.875rem |
| font-size | --scale-5 | 2.25rem |
| font-size | --scale-6 | 3rem |
| font-size | --scale-7 | 3.75rem |
| font-size | --scale-8 | 4.5rem |
| font-size | --scale-9 | 6rem |
| font-size | --scale-10 | 8rem |
| font-family | --font-sans | system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue |
| font-family | --font-serif | Georgia, Cambria, "Times New Roman", Times, serif |
| font-family | --font-mono | Consolas, Menlo, Monaco, "Liberation Mono", monospace |
| font-weight | --weight-light | 300 |
| font-weight | --weight-regular | 400 |
| font-weight | --weight-medium | 500 |
| font-weight | --weight-semibold | 600 |
| font-weight | --weight-bold | 700 |
| font-weight | --weight-extrabold | 800 |
| font-weight | --weight-black | 900 |
| line-height | --line-none | 1 |
| line-height | --line-xs | 1.125 |
| line-height | --line-sm | 1.275 |
| line-height | --line-md | 1.5 |
| line-height | --line-lg | 1.625 |
| line-height | --line-xl | 2 |
| letter-spacing | --letter-xs | -0.05em |
| letter-spacing | --letter-sm | -0.025em |
| letter-spacing | --letter-none | 0em |
| letter-spacing | --letter-lg | 0.025em |
| letter-spacing | --letter-xl | 0.05em |
| max-width | --prose-xs | 45ch |
| max-width | --prose-sm | 55ch |
| max-width | --prose-md | 65ch |
| max-width | --prose-lg | 75ch |
| max-width | --prose-xl | 85ch |
Layout
| Rule | Variable | Property |
| --- | --- | --- |
| margin | --size-1 | 4px |
| margin | --size-2 | 8px |
| margin | --size-3 | 12px |
| margin | --size-4 | 16px |
| margin | --size-5 | 20px |
| margin | --size-6 | 24px |
| margin | --size-7 | 28px |
| margin | --size-8 | 32px |
| margin | --size-9 | 36px |
| margin | --size-10 | 40px |
| margin | --size-11 | 44px |
| margin | --size-12 | 48px |
| margin | --size-14 | 56px |
| margin | --size-16 | 64px |
| margin | --size-20 | 80px |
| margin | --size-24 | 96px |
| margin | --size-28 | 112px |
| margin | --size-32 | 128px |
| margin | --size-36 | 144px |
| margin | --size-40 | 160px |
| margin | --size-44 | 176px |
| margin | --size-48 | 192px |
| margin | --size-52 | 208px |
| margin | --size-56 | 224px |
| margin | --size-60 | 240px |
| margin | --size-64 | 256px |
| margin | --size-72 | 288px |
| margin | --size-80 | 320px |
| margin | --size-96 | 384px |
| margin | --size-px | 1px |
| margin | --size-full | 100% |
| margin | --size-screen | 100vw |
| margin | --size-min | min-content |
| margin | --size-max | max-content |
| padding | --size-1 | 4px |
| padding | --size-2 | 8px |
| padding | --size-3 | 12px |
| padding | --size-4 | 16px |
| padding | --size-5 | 20px |
| padding | --size-6 | 24px |
| padding | --size-7 | 28px |
| padding | --size-8 | 32px |
| padding | --size-9 | 36px |
| padding | --size-10 | 40px |
| padding | --size-11 | 44px |
| padding | --size-12 | 48px |
| padding | --size-14 | 56px |
| padding | --size-16 | 64px |
| padding | --size-20 | 80px |
| padding | --size-24 | 96px |
| padding | --size-28 | 112px |
| padding | --size-32 | 128px |
| padding | --size-36 | 144px |
| padding | --size-40 | 160px |
| padding | --size-44 | 176px |
| padding | --size-48 | 192px |
| padding | --size-52 | 208px |
| padding | --size-56 | 224px |
| padding | --size-60 | 240px |
| padding | --size-64 | 256px |
| padding | --size-72 | 288px |
| padding | --size-80 | 320px |
| padding | --size-96 | 384px |
| padding | --size-px | 1px |
| padding | --size-full | 100% |
| padding | --size-screen | 100vw |
| padding | --size-min | min-content |
| padding | --size-max | max-content |
| width | --size-1 | 4px |
| width | --size-2 | 8px |
| width | --size-3 | 12px |
| width | --size-4 | 16px |
| width | --size-5 | 20px |
| width | --size-6 | 24px |
| width | --size-7 | 28px |
| width | --size-8 | 32px |
| width | --size-9 | 36px |
| width | --size-10 | 40px |
| width | --size-11 | 44px |
| width | --size-12 | 48px |
| width | --size-14 | 56px |
| width | --size-16 | 64px |
| width | --size-20 | 80px |
| width | --size-24 | 96px |
| width | --size-28 | 112px |
| width | --size-32 | 128px |
| width | --size-36 | 144px |
| width | --size-40 | 160px |
| width | --size-44 | 176px |
| width | --size-48 | 192px |
| width | --size-52 | 208px |
| width | --size-56 | 224px |
| width | --size-60 | 240px |
| width | --size-64 | 256px |
| width | --size-72 | 288px |
| width | --size-80 | 320px |
| width | --size-96 | 384px |
| width | --size-px | 1px |
| width | --size-full | 100% |
| width | --size-screen | 100vw |
| width | --size-min | min-content |
| width | --size-max | max-content |
| height | --size-1 | 4px |
| height | --size-2 | 8px |
| height | --size-3 | 12px |
| height | --size-4 | 16px |
| height | --size-5 | 20px |
| height | --size-6 | 24px |
| height | --size-7 | 28px |
| height | --size-8 | 32px |
| height | --size-9 | 36px |
| height | --size-10 | 40px |
| height | --size-11 | 44px |
| height | --size-12 | 48px |
| height | --size-14 | 56px |
| height | --size-16 | 64px |
| height | --size-20 | 80px |
| height | --size-24 | 96px |
| height | --size-28 | 112px |
| height | --size-32 | 128px |
| height | --size-36 | 144px |
| height | --size-40 | 160px |
| height | --size-44 | 176px |
| height | --size-48 | 192px |
| height | --size-52 | 208px |
| height | --size-56 | 224px |
| height | --size-60 | 240px |
| height | --size-64 | 256px |
| height | --size-72 | 288px |
| height | --size-80 | 320px |
| height | --size-96 | 384px |
| height | --size-px | 1px |
| height | --size-full | 100% |
| height | --size-screen | 100vw |
| height | --size-min | min-content |
| height | --size-max | max-content |
| max-width | --width-xs | 480px |
| max-width | --width-sm | 640px |
| max-width | --width-md | 768px |
| max-width | --width-lg | 1024px |
| max-width | --width-xl | 1280px |
UI
| Rule | Variable | Property |
| --- | --- | --- |
| border-radius | --radius-100 | 100% |
| border-radius | --radius-xs | 3px |
| border-radius | --radius-sm | 6px |
| border-radius | --radius-md | 8px |
| border-radius | --radius-lg | 12px |
| border-radius | --radius-xl | 16px |
| border-radius | --radius-full | 9999px |
| box-shadow | --elevation-1 | 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
| box-shadow | --elevation-2 | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
| box-shadow | --elevation-3 | 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06) |
| box-shadow | --elevation-4 | 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
| box-shadow | --elevation-5 | 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04) |
| box-shadow | --elevation-6 | 0 24px 48px -12px rgba(0, 0, 0, 0.25) |
| box-shadow | --elevation-7 | 0 32px 64px -12px rgba(0, 0, 0, 0.2) |
| backdrop-filter | --blur-xs | blur(4px) |
| backdrop-filter | --blur-sm | blur(8px) |
| backdrop-filter | --blur-md | blur(16px) |
| backdrop-filter | --blur-lg | blur(24px) |
| backdrop-filter | --blur-xl | blur(40px) |
| transition | --easing-standard | cubic-bezier(0.4, 0, 0.2, 1) |
| transition | --easing-accelerate | cubic-bezier(0.4, 0, 1, 1) |
| transition | --easing-decelerate | cubic-bezier(0, 0, 0.2, 1) |
| z-index | --layer-1 | 10 |
| z-index | --layer-2 | 20 |
| z-index | --layer-3 | 30 |
| z-index | --layer-4 | 40 |
| z-index | --layer-5 | 50 |
| z-index | --layer-below | -1 |
| z-index | --layer-top | 2147483647 |
# Why
I really liked pollen.style but I don't use npm or node,
I just wanted something like pollen but with just plain css files.
This project is totally simple, just drop the `totally.min.css` file in your
assets folder (or wherever) and viola, you have a decent style guide
with css variables.