Introduction

Get started with ANTSAND STYLES - a responsive CSS framework built for speed and flexibility.

💡 A Note for New Developers

ANTSAND isn't unreadable. It's unfamiliar.

If you're coming from React, Tailwind, or Next.js, this will look different. That's okay. The system is intentional, well-documented, and has 10+ years of production use behind it. Give it a few hours before judging—the patterns will start making sense.

🚀 Quick Start

ANTSAND STYLES helps you create stunning responsive websites quickly. The framework is built around a simple concept: one structure, infinite designs.

Include the CSS

<link rel="stylesheet" href="https://styles.antsand.com/css/antsand-v2.css">

Use a Component

<section class="antsand-section">
  <div class="section-header">
    <h2>Welcome</h2>
  </div>
  <div class="section-body">
    <p>Your content here</p>
  </div>
</section>

📱 Responsive Breakpoints

ANTSAND uses 6 breakpoints to ensure your designs look perfect on every device. Each breakpoint has a class suffix you can use to target specific screen sizes.

<600
Small
*-sm
600
Tablet
*-tablet
1090
Mini Desktop
*-minidesktop
1300
Semi Desktop
*-semidesktop
1500
Desktop
*-desktop
1900
Big Desktop
*-bigdesktop

Breakpoint Reference Table

Small< 600px Tablet≥ 600px Mini Desktop≥ 1090px Semi Desktop≥ 1300px Desktop≥ 1500px Big Desktop≥ 1900px
Max container width auto 600px 1090px 1300px 1500px 1900px
Class suffix -sm -tablet -minidesktop -semidesktop -desktop -bigdesktop
# of columns 12
Gutter width Variable
Nestable Yes
Column ordering Yes

🎯 Using Responsive Classes

You can target specific device ranges by combining class suffixes. This gives you fine-grained control over your layouts.

Example: Show/Hide by Device

<!-- Show only on mobile -->
<div class="show-sm hide-tablet">Mobile Only</div>

<!-- Show on tablet and up -->
<div class="hide-sm show-tablet">Tablet & Desktop</div>

<!-- Different columns per breakpoint -->
<div class="span-12-of-12-sm span-6-of-12-tablet span-4-of-12-desktop">
  Responsive Column
</div>

Grid Span Classes

Use the pattern span-{n}-of-12-{breakpoint} to create responsive grids:

.span-6-of-12-sm        /* 50% width on small screens */
.span-4-of-12-tablet    /* 33% width on tablet */
.span-3-of-12-desktop   /* 25% width on desktop */

📚 Next Steps

Now that you understand the basics, explore more: