|
1 | | -# 🖌️ BrushCSS |
2 | | -🎨🖌️ Brush CSS |
| 1 | +# 🎨🖌️ BrushCSS |
| 2 | + |
| 3 | +> A PHP-native utility-first CSS engine with JIT compilation, plugin marketplace support, and deep framework integration (Hurricane-ready). |
| 4 | +
|
| 5 | +--- |
| 6 | + |
| 7 | +### 🚀 What is BrushCSS? |
| 8 | + |
| 9 | +BrushCSS is a backend-driven CSS compiler that scans your PHP/HTML views and generates only the CSS you actually use. |
| 10 | + |
| 11 | +Instead of shipping large static stylesheets, BrushCSS builds CSS on demand (JIT) and integrates directly into your PHP application lifecycle. |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +### ⚡ Key Features |
| 16 | + |
| 17 | +- 🔍 JIT Compilation — Generates CSS only from used classes |
| 18 | +- 🧠 View Scanner — Extracts classes from ".php" / ".html" views |
| 19 | +- 🔌 Plugin System — Extend utilities and variants easily |
| 20 | +- 📦 Composer Ready — Install via Packagist |
| 21 | +- 🌪️ Hurricane Integration — Middleware + DI ready |
| 22 | +- 🔁 HMR Support — Live CSS reload during development |
| 23 | +- 🧱 Grid System (12-column) — Built-in layout engine |
| 24 | +- 🎨 Utility-first design system |
| 25 | +- 🌐 Remote Plugin Marketplace (CLI "add") |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +### 📦 Installation |
| 30 | + |
| 31 | +```bash |
| 32 | +composer require brushcss/brushcss |
| 33 | +``` |
| 34 | + |
| 35 | +--- |
| 36 | + |
| 37 | +### ⚙️ Initialization |
| 38 | + |
| 39 | +`php vendor/bin/brushcss init` |
| 40 | + |
| 41 | +This creates: |
| 42 | + |
| 43 | +* config/brushcss.php |
| 44 | +* public/style.css |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +### 🧪 Build CSS |
| 49 | + |
| 50 | +```bash |
| 51 | +php vendor/bin/brushcss build |
| 52 | +``` |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +### 👀 Watch Mode (HMR) |
| 57 | + |
| 58 | +```bash |
| 59 | +php vendor/bin/brushcss watch |
| 60 | +``` |
| 61 | + |
| 62 | +--- |
| 63 | + |
| 64 | +### 🔥 Example Usage |
| 65 | + |
| 66 | +View file ("views/login.php"). |
| 67 | +```html |
| 68 | +<h2 class="bg-blue-500 p-4 mt-5"> |
| 69 | + Hello BrushCSS |
| 70 | +</h2> |
| 71 | +``` |
| 72 | +**Generated CSS:** |
| 73 | + |
| 74 | +```css |
| 75 | +.bg-blue-500 { background-color: #3b82f6; } |
| 76 | +.p-4 { padding: 16px; } |
| 77 | +.mt-5 { margin-top: 20px; } |
| 78 | +``` |
| 79 | +--- |
| 80 | + |
| 81 | +### 🧱 Grid System |
| 82 | + |
| 83 | +```html |
| 84 | +<div class="grid grid-cols-12 gap-4"> |
| 85 | + <div class="col-span-6">Left</div> |
| 86 | + <div class="col-span-6">Right</div> |
| 87 | +</div> |
| 88 | +``` |
| 89 | + |
| 90 | +--- |
| 91 | + |
| 92 | +### 🎨 Utility Classes |
| 93 | + |
| 94 | +Spacing |
| 95 | + |
| 96 | +p-4, p-6, mt-5, mb-2 |
| 97 | + |
| 98 | +Colors |
| 99 | + |
| 100 | +bg-blue-500, text-red-100 |
| 101 | + |
| 102 | +Layout |
| 103 | + |
| 104 | +flex, grid, hidden, block |
| 105 | + |
| 106 | +Effects |
| 107 | + |
| 108 | +transition, duration-300, hover:bg-blue-500 |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +### 🔌 Plugin System |
| 113 | + |
| 114 | +BrushCSS supports extensible plugins. |
| 115 | + |
| 116 | +**Install plugin:** |
| 117 | + |
| 118 | +```bash |
| 119 | +brushcss add grid |
| 120 | +``` |
| 121 | + |
| 122 | +**Example plugins:** |
| 123 | + |
| 124 | +- grid system |
| 125 | +- typography system |
| 126 | +- forms system |
| 127 | +- animation system |
| 128 | + |
| 129 | +--- |
| 130 | + |
| 131 | +### 🌐 Plugin Marketplace |
| 132 | + |
| 133 | +BrushCSS supports a remote registry: |
| 134 | + |
| 135 | +brushcss add typography |
| 136 | + |
| 137 | +_Internally:_ |
| 138 | + |
| 139 | +CLI → Registry API → Composer → Activation → Config injection |
| 140 | + |
| 141 | +--- |
| 142 | + |
| 143 | +### 🌪️ Hurricane Integration |
| 144 | + |
| 145 | +BrushCSS can be used inside the Hurricane PHP framework: |
| 146 | + |
| 147 | +**Middleware compilation** |
| 148 | + |
| 149 | +- Auto-scans views per request |
| 150 | +- Generates scoped CSS |
| 151 | +- Injects into response pipeline |
| 152 | + |
| 153 | +_BrushCSSMiddleware::class_ |
| 154 | + |
| 155 | +--- |
| 156 | + |
| 157 | +### ⚡ Architecture |
| 158 | + |
| 159 | +View Files |
| 160 | + ↓ |
| 161 | +Class Extractor |
| 162 | + ↓ |
| 163 | +JIT Engine |
| 164 | + ↓ |
| 165 | +Variant Compiler |
| 166 | + ↓ |
| 167 | +Plugin System |
| 168 | + ↓ |
| 169 | +CSS Output |
| 170 | + ↓ |
| 171 | +public/style.css |
| 172 | + |
| 173 | +--- |
| 174 | + |
| 175 | +🧠 Advanced Features (Roadmap) |
| 176 | + |
| 177 | +### 🔥 JIT Engine Enhancements |
| 178 | + |
| 179 | +- Incremental builds |
| 180 | +- File hashing cache |
| 181 | +- Dependency graph tracking |
| 182 | + |
| 183 | +#### ⚡ Variant System |
| 184 | + |
| 185 | +hover:, md:, lg:, dark: |
| 186 | + |
| 187 | +### 🧱 Grid & Layout Engine |
| 188 | + |
| 189 | +- 12-column grid |
| 190 | +- flex utilities |
| 191 | +- responsive breakpoints |
| 192 | + |
| 193 | +### 🌐 Plugin Marketplace |
| 194 | + |
| 195 | +- versioning |
| 196 | +- remote registry |
| 197 | +- CLI install/remove/update |
| 198 | + |
| 199 | +### 🔁 HMR WebSocket Server |
| 200 | + |
| 201 | +- instant CSS injection |
| 202 | +- no page reload |
| 203 | + |
| 204 | +#### 🧩 Component System (future) |
| 205 | + |
| 206 | +- "<Card />", "<Button />" style UI engine |
| 207 | + |
| 208 | +--- |
| 209 | + |
| 210 | +### 🛠️ CLI Commands |
| 211 | + |
| 212 | +brushcss init |
| 213 | +brushcss build |
| 214 | +brushcss watch |
| 215 | +brushcss add <plugin> |
| 216 | +brushcss remove <plugin> |
| 217 | +brushcss list |
| 218 | + |
| 219 | +--- |
| 220 | + |
| 221 | +### 📁 Project Structure |
| 222 | + |
| 223 | +src/ |
| 224 | +bin/ |
| 225 | +config/ |
| 226 | +plugins/ |
| 227 | +public/ |
| 228 | +storage/ |
| 229 | +tests/ |
| 230 | + |
| 231 | +--- |
| 232 | + |
| 233 | +### ⚠️ Philosophy |
| 234 | + |
| 235 | +BrushCSS is built on one principle: |
| 236 | + |
| 237 | +> “Generate only what you use — nothing more.” |
| 238 | +
|
| 239 | +No heavy bundles. No unused CSS. No frontend build dependency. |
| 240 | + |
| 241 | +--- |
| 242 | + |
| 243 | +### 🚀 Future Vision |
| 244 | + |
| 245 | +BrushCSS is evolving into: |
| 246 | + |
| 247 | +«A PHP-native styling compiler ecosystem with plugin marketplace and framework-level integration» |
| 248 | + |
| 249 | +Comparable in concept to modern frontend tooling, but fully backend-driven. |
| 250 | + |
| 251 | +--- |
| 252 | + |
| 253 | +### 📜 License |
| 254 | + |
| 255 | +MIT License |
| 256 | + |
| 257 | +--- |
| 258 | + |
| 259 | +### ✨ Author |
| 260 | + |
| 261 | +Built for modern PHP ecosystems and deep framework integration (Hurricane-ready architecture). |
0 commit comments