Welcome to HCSS

A lightweight, modular CSS framework designed to help you build responsive, modern web interfaces quickly and efficiently.

⚡ Lightweight

Minimal CSS with maximum functionality. Only includes what you need to build beautiful interfaces.

🧩 Modular

Use what you need. Every component and utility is independent and can be used separately.

📱 Responsive

Mobile-first approach with responsive utilities built in. Works perfectly on all screen sizes.

🎨 Customizable

Easy to customize through SCSS variables. Adapt HCSS to match your brand perfectly.

Installation

Getting started with HCSS is simple. Include the compiled CSS in your HTML file:

<link rel="stylesheet" href="/dist/hcss.min.css">

Or install via npm:

npm install hcss

Quick Start

Here's a basic example to get you started:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/dist/hcss.min.css">
</head>
<body>
  <nav class="navbar">
    <div class="navbar-brand">My App</div>
  </nav>
  
  <main class="container p-6">
    <h1>Hello HCSS</h1>
    <button class="btn btn-primary">Get Started</button>
  </main>
</body>
</html>

Explore the Documentation

Components

Browse all available UI components like buttons, cards, forms, modals, tables, and more.

View Components →

Utilities

Learn about spacing, flexbox, grid, typography, colors, and layout utility classes.

View Utilities →