Version 2.0 - Now with DSL Templates

Build stunning websites
with modern CSS

A lightweight, utility-first CSS library with 200+ classes and 12+ components. Based on the Header/Body/Footer philosophy for consistent design.

Get Started View on GitHub

200+

Utility Classes

12+

Components

<20kb

Gzipped Size

Dependencies

THE ANTSAND WAY

One Structure. Infinite Designs.

Every section follows the same pattern. Same HTML + Different CSS = Unlimited possibilities.

Header

Title, subtitle, navigation

Body

Main content, cards, lists

Footer

Actions, links, metadata

section.volt

<section class="antsand-section">
  <!-- Header: Title & Description -->
  <div class="section-header">
    <h2>{{ header.title }}</h2>
  </div>

  <!-- Body: Dynamic Content -->
  <div class="section-body grid-3">
    {% for item in data %}
      <div class="card">{{ item }}</div>
    {% endfor %}
  </div>

  <!-- Footer: Actions -->
  <div class="section-footer">
    <a href="#" class="btn-primary">View All</a>
  </div>
</section>

FEATURES

Everything you need to build fast

12+ Components

Accordion, Tabs, Modal, Navbar, Dropdown, Cards, Buttons, Forms, and more.

200+ Utility Classes

Spacing, colors, typography, flexbox, grid, borders, shadows - build anything.

DSL Templates

Pre-built section templates with data structures. Copy JSON, paste, done.

Mobile First

Responsive by default. Every component works beautifully on all devices.

Easy Customization

SCSS variables and CSS custom properties. Customize everything easily.

Zero Dependencies

Pure CSS + minimal JS. No jQuery, no frameworks required. Just drop in and go.

QUICK START

Up and running in seconds

Include via CDN or install with npm

CDN

<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/gh/
antsand/styles@v2/css/antsand.css">

NPM

npm install antsand-styles

Download

Download ZIP

Build stunning websites with modern CSS