{"_id":"@eldrex/unboilerplate","name":"@eldrex/unboilerplate","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@eldrex/unboilerplate","version":"1.0.0","type":"commonjs","description":"Style without thinking. Think without boilerplate. A pure CSS styling system with design tokens, magic classes, and Gen Z aesthetics.","main":"dist/unboilerplate.css","style":"dist/unboilerplate.css","unpkg":"dist/unboilerplate.min.css","jsdelivr":"dist/unboilerplate.min.css","exports":{".":"./dist/unboilerplate.css","./min":"./dist/unboilerplate.min.css","./core":"./dist/unboilerplate.core.css","./core.min":"./dist/unboilerplate.core.min.css","./aesthetics":"./dist/unboilerplate.aesthetics.css","./aesthetics.min":"./dist/unboilerplate.aesthetics.min.css","./themes/*":"./dist/themes/*","./presets/*":"./src/presets/*","./src/*":"./src/*","./package.json":"./package.json"},"scripts":{"dev":"npm run --prefix docs dev","build":"node scripts/build.js","build:all":"node scripts/build.js && npm run docs:build","test":"node scripts/build.js","check":"npm run --prefix docs check","docs:dev":"npm run --prefix docs dev","docs:build":"npm run --prefix docs build","docs:preview":"npm run --prefix docs preview"},"keywords":["css","css-framework","design-system","glassmorphism","gen-z","cyberpunk","cottagecore","y2k","zero-boilerplate","responsive","tokens"],"author":{"name":"Eldrex Delos Reyes Bula"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/EldrexDelosReyesBula/Unboilerplate.git"},"bugs":{"url":"https://github.com/EldrexDelosReyesBula/Unboilerplate/issues"},"homepage":"https://unboilerplate.vercel.app","gitHead":"fba3fdc8db42ee45ef0e50d6331c1c552c5b1c32","_id":"@eldrex/unboilerplate@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-xk+MeerCg/qjEAEKk2eZxXnFE1kfTed/wSmP/Cjb5/MV+nYBe8IUNDGU32+y/IoZOUumTwAqyKVyhZZMy5gTCQ==","shasum":"bdc644257cc87fd3036de4653f1cc237dd884eb6","tarball":"https://registry.npmjs.org/@eldrex/unboilerplate/-/unboilerplate-1.0.0.tgz","fileCount":68,"unpackedSize":1066942,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDR00+SFkiA1+IieNA5eo5lfaH/tm4pe0woQZ2OJHTJnAiBJ1yAknfRXT11edC1us7R71OsZTtSzTSgUkO2pP2KaOQ=="}]},"_npmUser":{"name":"eldrex","email":"eldrexdelosreyesbula@gmail.com"},"directories":{},"maintainers":[{"name":"eldrex","email":"eldrexdelosreyesbula@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/unboilerplate_1.0.0_1787843500360_0.47454602366036425"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-27T15:11:40.195Z","1.0.0":"2026-08-27T15:11:40.535Z","modified":"2026-08-27T15:11:40.789Z"},"maintainers":[{"name":"eldrex","email":"eldrexdelosreyesbula@gmail.com"}],"description":"Style without thinking. Think without boilerplate. A pure CSS styling system with design tokens, magic classes, and Gen Z aesthetics.","homepage":"https://unboilerplate.vercel.app","keywords":["css","css-framework","design-system","glassmorphism","gen-z","cyberpunk","cottagecore","y2k","zero-boilerplate","responsive","tokens"],"repository":{"type":"git","url":"git+https://github.com/EldrexDelosReyesBula/Unboilerplate.git"},"author":{"name":"Eldrex Delos Reyes Bula"},"bugs":{"url":"https://github.com/EldrexDelosReyesBula/Unboilerplate/issues"},"license":"MIT","readme":"# 🎯 UNBOILERPLATE\n\n> *\"CSS that basically styles itself — Style without thinking. Think without boilerplate.\"*\n>\n> Created by **Eldrex Delos Reyes Bula**\n> A pure CSS styling universe designed for Gen Z creators, artists, aesthetic lovers, and clean code enthusiasts.\n\n[![npm version](https://img.shields.io/npm/v/@eldrex/unboilerplate.svg?color=00f2fe&label=npm)](https://www.npmjs.com/package/@eldrex/unboilerplate)\n[![License: MIT](https://img.shields.io/badge/License-MIT-ff007f.svg)](LICENSE)\n[![Zero JS](https://img.shields.io/badge/Zero-JavaScript-00ffa3.svg)](https://unboilerplate.vercel.app)\n\n---\n\n## 🤯 The \"Wait, That's It?\" Philosophy\n\nYou know how Apple products just... work? You don't read a manual for an iPhone. You just touch it and go.\n\n**That's Unboilerplate.**\n\n```html\n<!-- That's it. That's literally it. -->\n<div class=\"card\">✨</div>\n\n<!-- Need it prettier? -->\n<div class=\"card pretty\">✨</div>\n\n<!-- Need it animated? -->\n<div class=\"card pretty float\">✨</div>\n\n<!-- Need a whole section? -->\n<section class=\"hero\">✨</section>\n```\n\n**No thinking. Just typing. Done.**\n\n---\n\n## 🎯 The One-Class Wonder System\n\n### Everything is ONE word\n\n```html\n<!-- LAYOUT - one word each -->\n<header class=\"hero\">Hero section, auto-styled</header>\n<nav class=\"navbar\">Navigation, responsive by default</nav>\n<main class=\"gallery\">Auto-grid gallery</main>\n<section class=\"features\">Feature section</section>\n<footer class=\"footer\">Auto-footer</footer>\n\n<!-- Microscopic Elements -->\n<button class=\"btn\">Click</button>\n<input class=\"input\">\n<img class=\"pic\">\n<h1 class=\"title\">Hello</h1>\n<p class=\"text\">Content</p>\n<a class=\"link\">Link</a>\n```\n\n---\n\n## ✨ Feature Overview\n\n| Feature | Description |\n|---|---|\n| 🎯 **One-Class Wonder** | `.card`, `.btn`, `.navbar`, `.hero`, `.gallery`, `.footer` — styles itself |\n| 🎬 **Micro-Animations** | `.hover-lift`, `.hover-glow`, `.tap-pop`, `.animate-float`, `.loader-heart` |\n| 🧈 **Butter Motion** | `.smooth-butter`, `.smooth-spring`, fluid responsive typography clamps |\n| 🧊 **3D Dimension System** | GPU-accelerated flip cards, books, cubes, orbital carousels |\n| 🕹️ **Time Machine** | Windows 95, CRT screens, Winamp, GeoCities — faithfully recreated |\n| 🌈 **Aesthetic Themes** | Cyberpunk, Cottagecore, Dark Academia, Clean Girl, Y2K |\n| 📐 **Design Tokens** | 60+ `--ub-*` CSS custom properties for complete theming |\n| 💎 **Zero JavaScript** | Every effect is pure CSS — no runtime, no bloat |\n| 🚀 **Interactive Playground** | Visual preset selector, custom classes, and Monaco-powered IDE |\n\n---\n\n## ⚡ Quick Start\n\n### 1. CDN (Fastest — Zero Setup)\n\nAdd to your HTML `<head>`:\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@eldrex/unboilerplate@1.0.0/dist/unboilerplate.min.css\">\n```\n\n### 2. npm\n\n```bash\nnpm install @eldrex/unboilerplate\n```\n\nImport in JavaScript/TypeScript:\n\n```javascript\nimport '@eldrex/unboilerplate';\n```\n\nImport in CSS:\n\n```css\n@import '@eldrex/unboilerplate';\n```\n\n\n### 3. Selective Imports\n\nImport only what you need for smaller bundles:\n\n```css\n/* Core utilities + tokens only */\n@import '@eldrex/unboilerplate/core';\n\n/* Aesthetic packs only (themes, retro, 3D) */\n@import '@eldrex/unboilerplate/aesthetics';\n```\n\n---\n\n## 🚀 Interactive Playground & Web IDE\n\nExperience the live **Unboilerplate Playground** equipped with **Monaco Editor**, custom IntelliSense, multi-viewport device testing, and **Pure CSS Creative Presets**:\n\n👉 **Launch Playground**: [https://unboilerplate.vercel.app/playground](https://unboilerplate.vercel.app/playground)\n\n---\n\n## 📚 Class Reference (Top 30 Most-Used)\n\n| Class | Category | Description |\n|---|---|---|\n| `.vibe-card` | Components | Glassmorphic surface card with border + glass bg |\n| `.vibe-btn` | Components | Primary gradient action button with spring press |\n| `.vibe-badge` | Components | Small label chip / tag |\n| `.vibe-grid` | Layout | Responsive auto-fill grid (minmax 280px, 1fr) |\n| `.stack` | Layout | Flex column stack (display: flex; flex-direction: column) |\n| `.center` | Layout | Flex centering both axes |\n| `.flex` | Layout | display: flex |\n| `.effect-glass` | Effects | Frosted glass backdrop-filter blur |\n| `.hover-glow` | Effects | Neon cyan box-shadow glow on hover |\n| `.hover-bounce` | Effects | Spring scale-up pop on hover |\n| `.text-gradient` | Effects | Cyan-to-blue gradient text fill |\n| `.text-neon` | Effects | High-voltage neon cyan text glow |\n| `.text-rainbow` | Effects | Infinite hue-rotating rainbow gradient text |\n| `.ambient-float` | Animation | Slow sinusoidal vertical float loop |\n| `.marquee` | Animation | GPU-accelerated smooth horizontal scrolling |\n| `.particles-3d` | Animation | Pure CSS 3D floating particle universe |\n| `.card-3d-flip` | 3D | Hardware-accelerated 180° card flip on hover |\n| `.book-3d` | 3D | Interactive 3D book that opens on hover |\n| `.cube-3d` | 3D | Auto-rotating 6-face 3D CSS cube |\n| `.btn-3d` | 3D | Physical extruded tactile button |\n| `.card-conic-glow` | Effects | Infinite rotating conic gradient border |\n| `.window-95` | Retro | Authentic Windows 95 beveled window frame |\n| `.crt-screen` | Retro | CRT monitor viewport with phosphor glow |\n| `.winamp-player` | Retro | Classic Winamp media player skin UI |\n| `.site-retro` | Retro | 1999 GeoCities-era homepage container |\n| `.theme-cyberpunk` | Themes | Cyberpunk neon/void aesthetic mode |\n| `.brutal-neo` | Effects | Neo-brutalism hard shadow card |\n| `.polaroid-stack` | Art | Scattered polaroid photo gallery |\n| `.canvas` | Art | Photoshop-like layer context container |\n| `.vapor-sunset` | Effects | Vaporwave 80s retro gradient card |\n\n> 📖 **Full reference**: [unboilerplate.vercel.app/docs](https://unboilerplate.vercel.app/docs)\n\n---\n\n## 🎨 Pure CSS Creative Universe\n\n```html\n<!-- Photoshop-like Image Layering & Blend Modes -->\n<div class=\"canvas canvas-landscape\">\n  <img src=\"background.jpg\" class=\"layer-back\">\n  <img src=\"person.png\" class=\"layer-mid\">\n  <img src=\"sparkles.png\" class=\"layer-front blend-screen\">\n</div>\n\n<!-- Pure CSS 3D Particle System -->\n<div class=\"particles-3d\">\n  <div class=\"particle --float-slow\">✦</div>\n  <div class=\"particle --spin\">💫</div>\n  <div class=\"particle --orbit\">✨</div>\n</div>\n\n<!-- 1999 Personal Homepage -->\n<div class=\"site-retro\">\n  <h1 class=\"text-rainbow\">~*~ Welcome to My Site ~*~</h1>\n  <div class=\"marquee\"><span>Thanks for visiting! Sign my guestbook!</span></div>\n  <button class=\"btn-3d\">🏠 Enter</button>\n  <div class=\"visitor-counter\"><span class=\"counter-digits\">000420</span></div>\n</div>\n```\n\n---\n\n## 🧊 The Dimension System (3D & 2D)\n\n```html\n<!-- 3D Card Flip on Hover -->\n<div class=\"card-3d-flip\">\n  <div class=\"card-3d-inner\">\n    <div class=\"card-3d-front\">\n      <h3>Front Face</h3>\n    </div>\n    <div class=\"card-3d-back\">\n      <h3>Back Face</h3>\n    </div>\n  </div>\n</div>\n\n<!-- Tactile Physical 3D Button -->\n<button class=\"btn-3d\">Press Me 🚀</button>\n\n<!-- Auto-Rotating 3D Cube -->\n<div class=\"cube-3d-scene\">\n  <div class=\"cube-3d\">\n    <div class=\"cube-face --front\">F</div>\n    <div class=\"cube-face --back\">B</div>\n    <div class=\"cube-face --left\">L</div>\n    <div class=\"cube-face --right\">R</div>\n    <div class=\"cube-face --top\">T</div>\n    <div class=\"cube-face --bottom\">Bot</div>\n  </div>\n</div>\n```\n\n---\n\n## 🎨 Design Movements Built-In\n\n```html\n<!-- Neo-Brutalism -->\n<div class=\"brutal-neo p-6\">\n  <h3>Neo-Brutalist Card</h3>\n  <button class=\"btn-brutal\">CLICK ME</button>\n</div>\n\n<!-- Skeuomorphism -->\n<div class=\"card-wood p-6\">\n  <button class=\"btn-leather\">Leather Button</button>\n</div>\n\n<!-- Vaporwave -->\n<div class=\"vapor-sunset p-6 rounded-xl\">\n  <h1 class=\"vapor-chrome\">Vaporwave Aesthetic</h1>\n</div>\n\n<!-- Cyberpunk Theme -->\n<div class=\"theme-cyberpunk p-6\">\n  <h2 class=\"text-neon\">NEO TOKYO 2099</h2>\n</div>\n```\n\n---\n\n## 🔧 Token Customization Guide\n\nEvery visual property in Unboilerplate is driven by CSS custom properties with the `--ub-` namespace. Override any token to retheme the system globally or locally.\n\n### Global Theme Override\n\nAdd this to your own stylesheet **after** the Unboilerplate import:\n\n```css\n:root {\n  /* Change the primary background */\n  --ub-bg: #ffffff;\n  --ub-bg-surface: #f5f5f5;\n  --ub-text: #0a0a0e;\n  --ub-text-muted: #6b7280;\n\n  /* Change accent color */\n  --ub-accent: #8b5cf6;\n  --ub-focus-ring: #8b5cf6;\n\n  /* Change glass values */\n  --ub-glass-bg: rgba(255, 255, 255, 0.6);\n  --ub-glass-blur: 20px;\n}\n```\n\n### Scoped Component Override\n\nOverride tokens inline on any element — children inherit the scoped values:\n\n```html\n<!-- Light card on dark page -->\n<div class=\"vibe-card\" style=\"--ub-bg-surface: #fff; --ub-text: #000;\">\n  Light themed card\n</div>\n\n<!-- Hot pink accent section -->\n<section style=\"--ub-accent: #f43f5e; --ub-focus-ring: #f43f5e;\">\n  <button class=\"vibe-btn\">Pink Accent Button</button>\n</section>\n```\n\n### Key Tokens Reference\n\n| Token | Default | Purpose |\n|---|---|---|\n| `--ub-bg` | `#0d0e15` | Page background |\n| `--ub-bg-surface` | `#1c1e2e` | Card/surface background |\n| `--ub-text` | `#f3f4f8` | Primary text |\n| `--ub-text-muted` | `#9499ad` | Muted/secondary text |\n| `--ub-accent` | `#ff007f` | Primary accent |\n| `--ub-focus-ring` | `#00f2fe` | Focus/interactive cyan |\n| `--ub-glass-blur` | `16px` | Backdrop-filter blur amount |\n| `--ub-transition-spring` | `500ms cubic-bezier(0.34,1.56,0.64,1)` | Spring easing |\n| `--ub-radius-lg` | `20px` | Large border radius |\n\n> 📖 **Full token list**: [unboilerplate.vercel.app/docs#tokens](https://unboilerplate.vercel.app/docs#tokens)\n\n---\n\n## 🌐 Browser Support\n\n| Browser | Support |\n|---|---|\n| Chrome 88+ | ✅ Full |\n| Firefox 90+ | ✅ Full |\n| Safari 15.4+ | ✅ Full (`backdrop-filter` requires) |\n| Edge 88+ | ✅ Full |\n| Samsung Internet 14+ | ✅ Full |\n| Opera 74+ | ✅ Full |\n\n> **Note:** `backdrop-filter` (glass effects) requires a Chromium or WebKit browser. Firefox 126+ added `backdrop-filter` support. Fallback graceful degradation is included.\n\n---\n\n## 🛠️ Building\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the CSS bundles into dist/\nnpm run build\n\n# Run docs dev server\nnpm run docs:dev\n\n# Build docs site\nnpm run docs:build\n```\n\n---\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/my-class`)\n3. **Add** your CSS classes to the appropriate file in `src/`\n4. **Test** using the Playground in `docs/`\n5. **Document** your classes — add entries to the relevant docs page\n6. **Submit** a Pull Request\n\n### Contribution Guidelines\n\n- All classes must be pure CSS — no JavaScript dependencies\n- Follow the `--ub-` namespace for new CSS custom properties\n- Use BEM-style `--modifier` classes for variants\n- Test across Chrome, Firefox, and Safari before submitting\n- Add `will-change: transform` and `backface-visibility: hidden` to all 3D transforms\n- Respect `@media (prefers-reduced-motion: reduce)` for animations\n\n---\n\n## 📄 License\n\nMIT © [Eldrex Delos Reyes Bula](https://unboilerplate.vercel.app)\n\n---\n\n*\"CSS is boring. Your designs shouldn't be.\"*\n","readmeFilename":"README.md","_rev":"1-f026a1f99558a39251e5186f9ff9a627"}