|
1 | 1 | # CSSTextLib |
2 | | -Atomic CSS text utility library – 500+ single-purpose classes for color, size, spacing, opacity, alignment, highlight, dark mode & responsive. One-file Sass source, < 3 kB minified. Drop in and style text instantly. |
| 2 | + |
| 3 | +Atomic CSS text utility library – 500+ single-purpose classes that let you style text in seconds. |
| 4 | + |
| 5 | +> One Sass file → compile to **< 3 kB minified** |
| 6 | +> Drop it in and forget about writing new text styles ever again. |
| 7 | +
|
| 8 | +--- |
| 9 | + |
| 10 | +## ⚡ Quick Start |
| 11 | + |
| 12 | +1. Download `csstextlib.min.css` |
| 13 | +2. Put it in `<head>` |
| 14 | + |
| 15 | +``` |
| 16 | +<link rel="stylesheet" href="cssttextlib.min.css"> |
| 17 | +``` |
| 18 | + |
| 19 | +3. Use classes in your markup: |
| 20 | + |
| 21 | +``` |
| 22 | +<p class="text-color-red text-bold text-size-large"> |
| 23 | + Red, bold, large text – done. |
| 24 | +</p> |
| 25 | +``` |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## 🎨 What You Get |
| 30 | + |
| 31 | +| Category | Example Classes | Count | |
| 32 | +| --- | --- | --- | |
| 33 | +| **Color** | `.text-color-blue`, `.text-color-light-green` | 22 | |
| 34 | +| **Highlight** | `.text-highlight-yellow`, `.text-highlight-black` | 22 | |
| 35 | +| **Size** | `.text-size-small` → `.text-size-xxxlarge` | 10 | |
| 36 | +| **Opacity** | `.text-opacity-0` → `.text-opacity-100` (5-step) | 21 | |
| 37 | +| **Align** | `.text-align-center`, `.text-align-justify` | 4 | |
| 38 | +| **Decoration** | `.text-underline`, `.text-line-through` | 6 | |
| 39 | +| **Font** | `.text-font-monospace`, `.text-font-ui-rounded` | 7 | |
| 40 | +| **Spacing** | `.text-letter-spacing-large`, `.text-word-spacing-small` | 4 | |
| 41 | +| **Dark Mode** | auto switch via `@media (prefers-color-scheme: dark)` | ✔ | |
| 42 | +| **Responsive** | `.text-hide-sm`, `.text-show-lg` | 8 | |
| 43 | +| **Animation** | `.text-animate-fade` | 1 | |
| 44 | + |
| 45 | +**Total ≈ 500+ classes** – all generated from a single Sass file. |
| 46 | + |
| 47 | +--- |
| 48 | + |
| 49 | +## 🛠 Build Yourself |
| 50 | + |
| 51 | +```bash |
| 52 | +# install dart-sass once |
| 53 | +npm i -g sass # or use standalone zip |
| 54 | + |
| 55 | +# generate both expanded & minified |
| 56 | +sass csstextlib.scss csstextlib.css --style=expanded |
| 57 | +sass csstextlib.scss csstextlib.min.css --style=compressed |
| 58 | +``` |
| 59 | + |
| 60 | +> Windows? Use the included `build.bat` – double-click done. |
| 61 | +
|
| 62 | +--- |
| 63 | + |
| 64 | +## 🧩 Customise |
| 65 | + |
| 66 | +Edit the **variables map** inside `csstextlib.scss`: |
| 67 | + |
| 68 | +```scss |
| 69 | +$color-map: ( |
| 70 | + 'brand': #ff4757, // add your brand colour |
| 71 | + 'gray': #6c757d, |
| 72 | +); |
| 73 | +``` |
| 74 | + |
| 75 | +Re-compile – new classes `.text-color-brand` / `.text-highlight-brand` are auto-generated. |
| 76 | + |
| 77 | +--- |
| 78 | + |
| 79 | +## 📄 License |
| 80 | + |
| 81 | +Eclipse Public License 2.0 |
| 82 | +(see [LICENSE](LICENSE) file) |
| 83 | +--- |
| 84 | + |
| 85 | +## 🤝 Contributing |
| 86 | + |
| 87 | +PRs welcome! Please run `build.bat` before commit so both `.css` & `.min.css` stay in sync. |
0 commit comments