Overview

Alfuix is a modern CSS framework that extends and enhances Bootstrap and Tailwind — combining the simplicity of utilities with the elegance of design consistency.

Built for designers and developers who want more flexibility, smarter defaults, and scalable UI systems.

What is Alfuix?

Alfuix is not a replacement — it's a progressive extension to frameworks you already know. It bridges the gap between utility-first design and component-based systems by introducing:

Extended responsive utilities
Advanced clipping and border utilities
Enhanced sizing and spacing controls
Fully customizable SCSS architecture

Whether you're prototyping or building production-grade interfaces, Alfuix helps you move faster without sacrificing control.

Our Core Principles

Utility-First Fundamentals icon

Extend, Don't Replace

Keep your Bootstrap and Tailwind knowledge — Alfuix builds on top of them, enhancing rather than replacing their core structure.

Utility-First Fundamentals icon

Utility-Driven

Every class is composable. You can build clean, maintainable UIs without writing custom CSS.

Utility-First Fundamentals icon

Design Consistency

Built around shared SCSS variables, Alfuix ensures harmony across components, spacing, and breakpoints.

Utility-First Fundamentals icon

Performance Focused

Lightweight by design — only pure CSS and SCSS, no JavaScript dependencies.

Starter Template

Here's a basic example to get started with Alfuix — including Bootstrap, Bootstrap Icons, and Alfuix CSS. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alfuix Starter Template</title>

    <!-- bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" />

    <!-- alfuix CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alfuix/dist/css/alfuix.min.css" />
  </head>
  <body>
    <section class="py-5 text-center">
      <div class="container">
        <h1 class="display-5 fw-bold mb-3">Welcome to Alfuix</h1>
        <p class="lead mb-4">
          Build modern, responsive interfaces faster — powered by Bootstrap and extended with Alfuix utilities.
        </p>
        <a href="#" class="btn btn-primary px-4 me-2">Get Started</a>
        <a href="#" class="btn btn-outline-secondary px-4">Learn More</a>
      </div>
    </section>

    <footer class="text-center py-4 border-top">
      <small class="text-muted">© 2025 Alfuix. Built with Bootstrap + Alfuix.</small>
    </footer>
  </body>
</html>

Learn the System

Alfuix extends your design language through utility classes, variable-driven customization, and scalable SCSS architecture. From quick prototypes to production systems, Alfuix adapts to your workflow.

Open Source & Evolving

Alfuix is an open-source project by Alfuix Authors, built with the vision to modernize traditional CSS frameworks. It continues to evolve with community input — adding new utilities, mixins, and design features over time.

Contribute on GitHub

On this page

Overview
Installation