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
0
Dependencies
THE ANTSAND WAY

One Structure. Infinite Designs.

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

H

Header

Title, subtitle, navigation

B

Body

Main content, cards, lists

F

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

Ready to build something amazing?

Join developers who use ANTSAND Styles to create beautiful, consistent websites faster.

Read the Docs Browse Templates