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
Extend, Don't Replace
Keep your Bootstrap and Tailwind knowledge — Alfuix builds on top of them, enhancing rather than replacing their core structure.
Utility-Driven
Every class is composable. You can build clean, maintainable UIs without writing custom CSS.
Design Consistency
Built around shared SCSS variables, Alfuix ensures harmony across components, spacing, and breakpoints.
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. Alfuix does not assume a default text direction, so you must explicitly define dir="ltr" or dir="rtl" on the <html> tag.
<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="al-dark-blue" lang="en" dir="ltr" data-bs-theme="al-dark-blue">
<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 class="al-bg-attachment-fixed">
<section class="bg-primary bg-opacity-10 border-bottom border-top border-primary border-opacity-10 py-5">
<div class="px-4 py-5 text-center">
<h1 class="display-5 fw-bold">Welcome to Alfuix</h1>
<div class="al-w-250 border-bottom border-white border-opacity-25 d-flex justify-content-between mx-auto my-4 pe-none">
<span class="d-inline-flex al-size-2 bg-white position-relative al-bottom-n-1"></span>
<span class="d-inline-flex al-w-64 al-h-2 bg-warning position-relative al-bottom-n-1 mx-auto"></span>
<span class="d-inline-flex al-size-2 bg-white position-relative al-bottom-n-1"></span>
</div>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4"> Build modern and futuristic user interfaces faster — with Alfuix utilities, whether standalone or used alongside Bootstrap, Tailwind, or any other framework. </p>
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center">
<!-- button -->
<div class="position-relative d-inline-flex mt-3">
<span class="position-absolute z-1 top-0 start-0 al-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 al-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<a href="#!" class="btn btn-lg bg-primary bg-opacity-50 al-hover-bg-primary px-5 border-0 rounded-0 al-clip-border al-border-1 al-border-white-50 al-b-clip-x al-extend-b-35 al-b-7 text-white fw-bold al-h-50">
<span class="d-inline-flex pb-2 fw-normal al-fs-16">Get Started</span>
</a>
<span class="al-trapezoid-t-4 al-trapezoid-w-64px text-warning position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 al-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 al-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
<!-- button -->
<div class="position-relative d-inline-flex mt-3">
<span class="position-absolute z-1 top-0 start-0 al-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 al-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<a href="#!" class="btn btn-lg al-hover-bg-primary px-5 border-0 rounded-0 al-clip-border al-border-1 al-border-white-50 al-b-clip-x al-extend-b-35 al-b-7 text-white fw-bold al-h-50">
<span class="d-inline-flex pb-2 fw-normal al-fs-16">Learn More</span>
</a>
<span class="al-trapezoid-t-4 al-trapezoid-w-64px text-warning position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 al-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 al-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
</div>
</div>
</div>
</section>
<footer class="text-center py-4 border-top border-white border-opacity-10"> © 2025 Alfuix. Built with Bootstrap + Alfuix. </footer>
<!-- grid patterns -->
<div class="al-pattern-grid-dark-blue al-pattern-grid-double al-pattern-white-2 position-fixed top-0 start-0 bottom-0 end-0 z-n1 pe-none"></div>
</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