Skip to content

FEATURES.md

Latest commit

 

History

History
205 lines (157 loc) · 5.87 KB

FEATURES.md

File metadata and controls

205 lines (157 loc) · 5.87 KB

🚗💖✨ CURSY Framework v4.20a - Feature List

The Bulma/Tailwind Killer Edition! 💪

What Makes CURSY Different 🌟

  • ✅ Hand-crafted CSS ✋ - Every line written by hand
  • ✅ Unique color palette 🌈 - Green-cyan-purple-orange (NOT purple gradients!)
  • ✅ Synthwave aesthetic 🌃 - Retro-futuristic vibes
  • ✅ Zero JavaScript 🚫 - Pure CSS framework
  • ✅ Modular 📦 - Use what you need
  • ✅ Lightweight ⚡ - Fast and efficient
  • ✅ Custom animations 🎬 - Orbit glows, light sweeps, scanlines

📦 Package Structure

Core Files

  • cursy.css - Base components (buttons, cards, forms, alerts, modals, tables)
  • cursy-utilities.css - Utility classes (spacing, colors, typography, layout)
  • cursy-components.css - Additional components (tabs, breadcrumbs, pagination, etc.)
  • cursy-full.css - Everything combined (imports all three)

🎨 Components (30+)

Core Components 🎯

  • ✅ Buttons (Primary, Ghost)
  • ✅ Cards (with hover effects)
  • ✅ Badges & Pills
  • ✅ Navigation (Header, Brand mark)
  • ✅ Hero Sections
  • ✅ Grid System (2, 3 columns)

Form Components 📝

  • ✅ Input fields
  • ✅ Textareas
  • ✅ Select dropdowns
  • ✅ Checkboxes & Radio buttons
  • ✅ File uploads
  • ✅ Range sliders
  • ✅ Switches/Toggles
  • ✅ Form labels & help text

UI Components 🎨

  • ✅ Alerts (Success, Info, Warning, Error)
  • ✅ Modals (with overlay)
  • ✅ Tables (with hover effects)
  • ✅ Code blocks (syntax highlighting)
  • ✅ Tabs
  • ✅ Breadcrumbs
  • ✅ Pagination
  • ✅ Dropdowns
  • ✅ Tooltips
  • ✅ Progress bars
  • ✅ Loading spinners
  • ✅ Accordion/Collapsible

Layout Components 📐

  • ✅ Containers (sm, md, lg, xl, 2xl)
  • ✅ Columns (12-column grid)
  • ✅ Media objects
  • ✅ Level (horizontal layout)
  • ✅ Flexbox utilities
  • ✅ Grid utilities

🛠️ Utility Classes (200+)

Spacing 📏

  • Margin: .m-0 to .m-16, .mt-*, .mb-*, .ml-*, .mr-*, .mx-*, .my-*
  • Padding: .p-0 to .p-12, .pt-*, .pb-*, .pl-*, .pr-*, .px-*, .py-*

Colors 🌈

  • Text: .text-green, .text-cyan, .text-purple, .text-orange, .text-slate-*
  • Background: .bg-green, .bg-cyan, .bg-purple, .bg-orange, .bg-slate-*
  • Border: .border-green, .border-cyan, .border-purple, .border-orange

Typography 📖

  • Sizes: .text-xs to .text-4xl
  • Fonts: .font-orbitron, .font-inter
  • Weights: .font-light to .font-extrabold
  • Transform: .uppercase, .lowercase, .capitalize
  • Letter-spacing: .tracking-tight to .tracking-widest
  • Alignment: .text-left, .text-center, .text-right
  • Style: .italic

Display & Layout 📐

  • Display: .block, .inline-block, .inline, .flex, .grid, .hidden
  • Flexbox: .flex-row, .flex-col, .flex-wrap, .items-*, .justify-*, .gap-*
  • Width: .w-full, .w-auto, .w-1/2, .w-1/3, .w-2/3, .w-1/4, .w-3/4
  • Height: .h-full, .h-auto, .h-screen
  • Max-width: .max-w-xs to .max-w-6xl

Position 📍

  • Position: .static, .fixed, .absolute, .relative, .sticky
  • Positioning: .inset-0, .top-0, .right-0, .bottom-0, .left-0
  • Z-index: .z-0 to .z-100

Borders 🔲

  • Width: .border, .border-0, .border-2, .border-t, .border-r, .border-b, .border-l
  • Radius: .rounded to .rounded-full

Shadows 🌑

  • Standard: .shadow-sm to .shadow-xl
  • Glow: .shadow-glow-green, .shadow-glow-cyan, .shadow-glow-purple

Effects ✨

  • Opacity: .opacity-0 to .opacity-100
  • Visibility: .visible, .invisible
  • Overflow: .overflow-auto, .overflow-hidden, .overflow-x-auto, .overflow-y-auto
  • Cursor: .cursor-pointer, .cursor-not-allowed, .cursor-wait, .cursor-text, .cursor-move
  • Transitions: .transition, .transition-all, .duration-*, .ease-*
  • Transforms: .transform, .scale-*, .rotate-*, .translate-*

📱 Responsive Utilities

Breakpoints (Mobile-first)

  • sm: - 640px+
  • md: - 768px+
  • lg: - 1024px+
  • xl: - 1280px+

Responsive Classes

  • Display: .sm:block, .md:flex, .lg:grid, .xl:hidden
  • Text alignment: .sm:text-left, .md:text-center, .lg:text-right

🎬 Animations

  • ✅ Orbit Glow - Rotating conic gradient background
  • ✅ Light Sweep - Animated light strip
  • ✅ Scanlines - Retro CRT effect
  • ✅ Spinner - Loading animation
  • ✅ Smooth transitions - Built into components

🌈 Color Palette

  • Green: #22c55e 💚 - Energy, growth
  • Cyan: #22d3ee 🔵 - Tech, clarity
  • Purple: #a855f7 💜 - Magic, creativity
  • Orange: #f97316 🧡 - Warmth, excitement
  • Slate: #020617 to #f9fafb ⚫⚪ - Foundation colors

📊 Comparison

vs Tailwind CSS

  • ✅ Similar utility-first approach
  • ✅ More unique aesthetic (synthwave vs generic)
  • ✅ Hand-crafted (not generated)
  • ✅ Smaller file size (modular)
  • ✅ Built-in components (Tailwind needs plugins)

vs Bulma

  • ✅ More utility classes
  • ✅ Better responsive system
  • ✅ Unique design language
  • ✅ More animations
  • ✅ Modern CSS features

📚 Documentation

  • ✅ README.md - Overview
  • ✅ QUICK_START.md - Quick start guide
  • ✅ docs/COMPONENTS.md - Component reference
  • ✅ FEATURES.md - This file!
  • ✅ CHANGELOG.md - Version history
  • ✅ RELEASE_NOTES.md - Release notes
  • ✅ promo.html - Landing page
  • ✅ index.html - Interactive demo

🚀 Getting Started

  1. Include Google Fonts
  2. Link CSS files (cursy.css + utilities + components OR cursy-full.css)
  3. Add scanlines class to body
  4. Start building!

💖 Built For

  • Mini-Cursy 🚗
  • The Imaginatorium 🏛️
  • FutureVision Labs / Team DC 💖
  • Any synthwave project 🌃

CURSY Framework v4.20a · The Bulma/Tailwind Killer 💪 · Built with love 💖 🚗💖✨