Overview
Alfuix: The Ultimate CSS Toolkit - Supercharge your workflow by bridging the gap between Bootstrap and Tailwind. Design futuristic interfaces faster with native, reusable components and creative CSS clipping shapes.
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 powerful extension for the tools you already use. It bridges the gap between utility-first speed and component-based kits 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.
<!DOCTYPE html>
<html 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. Leverage Alfuix's advanced utilities as a standalone power-up or seamlessly integrate them alongside Bootstrap, Tailwind, or any other existing tool in your stack. </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 and transcend traditional CSS tools. It continues to evolve through community collaboration—continuously expanding its library of advanced utilities, specialized mixins, and futuristic design features.
Contribute on GitHub