Skip to main content

Introducation

Stybber is a fast and modern utility-first CSS framework that helps you build clean, responsive websites with ease. Built by Higoverse Engineers, it’s perfect for developers who want simplicity without sacrificing flexibility.

🚀 Features​

Utility-first Design​

Stybber adopts a utility-first approach, giving you small, reusable CSS classes like:

  • p-4 – for padding
  • text-center – for text alignment
  • bg-blue – for background color
  • flex – for flexbox layout

This design method allows you to build modern, responsive layouts directly in your HTML, without needing to write custom CSS files.

💡 Benefits of Utility-first​

  • 🚀 Faster development – style elements instantly while you code
  • 🧼 Cleaner codebase – less custom CSS, fewer style conflicts
  • 📐 Consistent design – follow a shared utility structure
  • 🔧 Easy to maintain – reuse the same classes across your project

Utility-first makes your workflow smoother, especially when building interfaces fast, prototyping, or maintaining large-scale apps.

💬 “Build interfaces like stacking LEGO blocks—just with CSS classes.”

Pre-built Components​

Stybber comes with a collection of ready-to-use UI components to help you build modern websites faster — without writing custom CSS or JS.

📦 Included Components​

  • Buttons – Primary, secondary, outline, and more
  • Cards – Clean and responsive content containers
  • Alerts – Informational, success, warning, and error messages
  • Forms – Styled inputs, selects, checkboxes, and layout helpers
  • Modals – Simple popups with built-in styling
  • Grids – Responsive layouts using utility classes

🧠 Why Use Them?​

  • ⏱️ Saves time – No need to build from scratch
  • 🎨 Visually consistent – All components follow a unified design system
  • 🛠️ Customizable – Extend or override styles easily
  • 📱 Mobile-friendly – Responsive by default

You can simply drop components into your HTML and customize their classes to match your style. Perfect for building clean and functional UIs with zero setup.

<!-- Example button -->
<button class="btn-primary">Get Started</button>

<!-- Example card -->
<div class="card">
  <h3 class="card-title">Stybber Card</h3>
  <p class="card-body">This is a pre-styled card component.</p>
</div>

Explore the Components section to see them all in action! Would you like a styled Installation or Customization section next?

JavaScript Enhancements (Optional)​

While Stybber is primarily a CSS framework, it also offers optional JavaScript utilities to add interactivity without extra setup.

🔹 What’s Included?​

  • Dropdowns — Easily toggle menus and dropdown content
  • Modals — Open and close dialog boxes with simple attributes
  • Toggles — Show/hide elements on user actions like clicks
  • Tabs — Switch between tabbed content areas
  • Accordions — Expand and collapse sections smoothly

🚀 How It Works​

You can activate these behaviors by adding simple data attributes to your HTML elements. For example:

<button data-toggle="#menu">Toggle Menu</button>
<div id="menu" class="hidden">
  <!-- Dropdown content -->
</div>

The minimal JavaScript file listens for user events and applies the necessary show/hide logic automatically — no manual scripting needed!

🎯 Why Use Stybber JS?​

  • ✅ Keep your markup clean and semantic

  • ✅ Add common UI interactions effortlessly

  • ✅ Avoid bulky JavaScript libraries or frameworks

  • ✅ Seamlessly integrate with the CSS utilities

Mobile-First & Fully Responsive​

Stybber is built with a mobile-first philosophy, ensuring your websites look and perform beautifully on all devices — from smartphones to large desktop screens.

🔍 What Does Mobile-First Mean?​

It means styles and layouts are designed initially for smaller screens, then progressively enhanced for larger screens using responsive utilities and media queries.

⚙️ Responsive Utilities​

Stybber provides a rich set of responsive utility classes that let you control layout, spacing, typography, and visibility based on device size:

  • md:grid-cols-3 — Use a 3-column grid starting at medium screen sizes
  • sm:text-center — Center text on small screens
  • lg:p-8 — Apply larger padding on large screens

🎯 Benefits​

  • 📐 Flexible layouts that adapt smoothly to any screen
  • 🏃 Faster development with built-in responsiveness
  • 🔄 Consistent user experience across devices
  • 🛠 Easy to customize per breakpoint

✨ Example​

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="card">Content 1</div>
  <div class="card">Content 2</div>
  <div class="card">Content 3</div>
</div>

Lightweight and Fast​

Minimal CSS, no bloat, ideal for fast loading...

🚀 Features​

  • ✅ Utility-first and mobile-first design
  • 🧩 Pre-built responsive components
  • ⚡ Works instantly with or without JavaScript
  • 📱 Designed for all screen sizes
  • 🧠 Super easy to learn and lightweight

📦 Installation (CDN)​

Just add the following lines to your HTML to start using Stybber right away:

<!-- Stybber CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/njosuedev/stybber@latest/dist/stybber.main.css" />

<!-- Stybber JavaScript (optional) -->
<script src="https://cdn.jsdelivr.net/gh/njosuedev/stybber@latest/dist/stybber.main.js"></script>

✨ Example Usage​

<button class="btn-primary">Click Me</button>

<div class="grid gap-4 md:grid-cols-3">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Would you like me to help polish the last section about Lightweight and Fast?

🛠 Customize & Extend​

Stybber is designed to be flexible and extensible, so you can tailor it to your project’s unique needs without hassle.

🔧 How to Customize​

  • Add your own utility classes alongside Stybber’s core classes for custom spacing, colors, or layouts.
  • Override default styles by writing CSS that targets Stybber’s class names or using CSS variables if supported.
  • Extend components by combining utility classes or creating your own reusable component styles.

⚡ Zero Setup, Maximum Control​

No complex build tools or configuration are required to start customizing. Just include your CSS after Stybber’s stylesheet to override or add new styles.

🌱 Perfect for Everyone​

Whether you’re a beginner learning CSS or a seasoned developer building large-scale apps, Stybber’s clean structure keeps your code maintainable and scalable.

📘 Continue exploring Stybber’s components and utilities to see what you can build!