🕷️ Spider.css v2.2.0 – A Sleek Utility-First Framework Built with Sass

Welcome to Spider.css v2.2.0 — a modern, utility-first CSS framework written in pure .sass. This version is built for speed, flexibility, and real-world UI components — without the bloat.

Let’s walk through the key features that make it awesome. 👇

✨ 1. Written in Clean Sass (Indented)

Spider.css is powered by .sass syntax, making it cleaner than regular CSS or SCSS. No curly braces, no semicolons — just structure and speed.

Plus, Sass maps and loops make the framework modular and easy to extend.

📐 2. Grid System (12 Columns)

The framework includes a full 12-column CSS Grid system.

• .grid for container
• .grid-cols-1 to .grid-cols-12
• .col-span-1 to .col-span-12
• Responsive variants like md:grid-cols-4

Just drop in the classes — layout made easy.

📦 3. Utility-First Flexbox

Flex utilities are first-class citizens here:

• .flex, .inline-flex
• Directional: .flex-row, .flex-col
• Wrapping: .flex-wrap, .flex-nowrap
• Alignment: .items-center, .justify-between, .self-start
• Responsive too: lg:flex-row-reverse

Perfect for building responsive layouts without custom CSS.

🃏 4. Ready-to-Use Card Components

Need UI cards? Done.

• .card with shadows and transitions
• .card-img, .card-body, .card-footer
• Light and .card-dark themes included
• Button support with .btn

Just plug and play for product cards, blog previews, or dashboards.

🧭 5. Fully Featured Navbar System

Spider.css comes with a built-in navbar module:

• .navbar, .navbar-brand, .navbar-links
• Mobile toggles with .navbar-toggle
• Themes: light, dark, blur, transparent
• Fixed and sticky support
• Dropdown menus and sidenav support

Ideal for building responsive headers in seconds.

📱 6. Mobile-First Responsive Classes

Built with mobile-first breakpoints:

• sm: for ≥640px
• md: for ≥768px
• lg: for ≥1024px
• xl: for ≥1280px

Use them like:

<div class="sm:flex-col md:flex-row lg:items-center xl:justify-around">

`

Write once, look great everywhere.

⚙️ 7. Theming + Extensibility

Spider.css uses Sass maps like:

sass
$breakpoints: (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)


Want to add a new size, column, or breakpoint? Just update the map and recompile. That’s it.

🤏 No JavaScript, All Power

Spider.css is JavaScript-free — just drop in the compiled CSS and you're done. Use it in:

• Static websites
• JAMstack apps
• Modern SPAs
• Flutter web or hybrid frontends

🚀 Use Cases

✅ Developer portfolios
✅ Admin panels
✅ Landing pages
✅ Blog templates
✅ Custom dashboards

👨‍💻 Created by Developer Prasoon

Spider.css is an open-source, flexible CSS framework designed for real devs by a dev who needed something faster than Bootstrap and simpler than Tailwind.

💬 Final Words

If you want a utility-first CSS framework that’s customizable, responsive, and written in pure Sass — give Spider.css v2.2.0 a spin.

Let it crawl into your workflow. 🕸️

🧑‍💻 GitHub: Pjdeveloper896/Spider.css
🌐 Demo & Docs: Coming Soon!

`