A CSS library to design beautiful webpages using wireframes, styles and classes

🔧 How the Utility Transpiler Works

Unlike Tailwind which scans your HTML files, ANTSAND's utility system works through the SASS Editor in Databoard:

1. You Add Classes

Add utility classes to any section's css_class field in Databoard.

2. Click Generate

The SASS Editor scans your entire databoard and identifies utility patterns.

3. CSS Created

Matching classes are converted to CSS rules in _utilities.scss.

4. Auto-Imported

The utilities file is automatically imported into your custom.scss.

// Example: In Databoard, you set css_class to:
"flex gap-4 p-6 justify-center items-center rounded-lg shadow-md"

// The transpiler generates _utilities.scss:
.flex { display: flex; }
.gap-4 { gap: 1.5rem; }
.p-6 { padding: 3rem; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.rounded-lg { border-radius: 0.75rem; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

📏 Spacing Scale

ANTSAND uses a consistent spacing scale for padding, margin, and gap utilities:

0 = 0

1 = 0.25rem

2 = 0.5rem

3 = 1rem

4 = 1.5rem

5 = 2rem

6 = 3rem

7 = 4rem

8 = 6rem

Padding Utilities

Class	CSS Property	Example
`p-{n}`	padding	`p-4` → padding: 1.5rem
`px-{n}`	padding-left, padding-right	`px-2` → padding: 0 0.5rem
`py-{n}`	padding-top, padding-bottom	`py-6` → padding: 3rem 0
`pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}`	Individual sides	`pt-3` → padding-top: 1rem

Margin Utilities

Class	CSS Property	Example
`m-{n}`	margin	`m-4` → margin: 1.5rem
`mx-{n}`, `my-{n}`	Horizontal/Vertical	`mx-auto` → margin: 0 auto
`mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}`	Individual sides	`mb-4` → margin-bottom: 1.5rem
`-m-{n}`, `-mt-{n}`, etc.	Negative margins	`-mt-2` → margin-top: -0.5rem

Gap Utilities

Class	CSS Property	Example
`gap-{n}`	gap	`gap-4` → gap: 1.5rem
`gap-x-{n}`	column-gap	`gap-x-2` → column-gap: 0.5rem
`gap-y-{n}`	row-gap	`gap-y-4` → row-gap: 1.5rem

📦 Flexbox Utilities

Complete flexbox support with familiar naming:

Class	CSS
`flex`	display: flex
`inline-flex`	display: inline-flex
`flex-col`	flex-direction: column
`flex-row`	flex-direction: row
`flex-wrap`	flex-wrap: wrap
`flex-nowrap`	flex-wrap: nowrap

Justify Content

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }

Align Items

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }
.items-stretch   { align-items: stretch; }

Flex Grow/Shrink

.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.flex-grow    { flex-grow: 1; }
.flex-shrink  { flex-shrink: 1; }

🔲 Grid Utilities

CSS Grid layout utilities for complex layouts:

Class	CSS
`grid`	display: grid
`inline-grid`	display: inline-grid
`grid-cols-{n}`	grid-template-columns: repeat(n, 1fr)
`grid-rows-{n}`	grid-template-rows: repeat(n, 1fr)
`col-span-{n}`	grid-column: span n / span n
`row-span-{n}`	grid-row: span n / span n

Example: 3-Column Grid

<div class="grid grid-cols-3 gap-4">
    <div class="p-4">Column 1</div>
    <div class="p-4 col-span-2">Spans 2 columns</div>
</div>

✍️ Typography Utilities

Text Alignment

.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-justify  { text-align: justify; }

Class	Size
`text-xs`	0.75rem
`text-sm`	0.875rem
`text-base`	1rem
`text-lg`	1.125rem
`text-xl`	1.25rem
`text-2xl`	1.5rem
`text-3xl`	1.875rem
`text-4xl`	2.25rem

Font Weight

.font-thin      { font-weight: 100; }
.font-light     { font-weight: 300; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

Text Transform & Decoration

// Transform
.uppercase      { text-transform: uppercase; }
.lowercase      { text-transform: lowercase; }
.capitalize     { text-transform: capitalize; }
.normal-case    { text-transform: none; }

// Decoration
.underline      { text-decoration: underline; }
.line-through   { text-decoration: line-through; }
.no-underline   { text-decoration: none; }

// Style
.italic         { font-style: italic; }
.not-italic     { font-style: normal; }

📐 Width & Height Utilities

Class	CSS
`w-{n}`	width: {spacing}
`w-full`	width: 100%
`w-screen`	width: 100vw
`w-auto`	width: auto
`w-fit`	width: fit-content
`w-min`	width: min-content
`w-max`	width: max-content
`h-{n}`	height: {spacing}
`h-full`	height: 100%
`h-screen`	height: 100vh
`min-w-full`	min-width: 100%
`max-w-full`	max-width: 100%

🔳 Borders & Border Radius

Border Width

.border    { border-width: 1px; }
.border-0  { border-width: 0; }
.border-2  { border-width: 2px; }
.border-4  { border-width: 4px; }

Border Radius

Class	Radius
`rounded-none`	0
`rounded-sm`	0.25rem
`rounded`	0.5rem
`rounded-md`	0.5rem
`rounded-lg`	0.75rem
`rounded-xl`	1rem
`rounded-full`	9999px (circle)

✨ Effects

Box Shadow

.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.shadow-none { box-shadow: none; }

Opacity

Use opacity-{n} where n is 0-100:

.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

📍 Positioning & Display

Position

.static    { position: static; }
.fixed     { position: fixed; }
.absolute  { position: absolute; }
.relative  { position: relative; }
.sticky    { position: sticky; }

Z-Index

Use z-{n} where n is any number:

.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

Display

.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

Overflow

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }

Visibility

.visible   { visibility: visible; }
.invisible { visibility: hidden; }

👆 Cursor & Interaction

// Cursor
.cursor-pointer      { cursor: pointer; }
.cursor-default      { cursor: default; }
.cursor-not-allowed  { cursor: not-allowed; }

// User Select
.select-none  { user-select: none; }
.select-text  { user-select: text; }
.select-all   { user-select: all; }

// Pointer Events
.pointer-events-none  { pointer-events: none; }
.pointer-events-auto  { pointer-events: auto; }

♿ Accessibility

// Screen reader only
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

// Undo screen reader only
.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

🚀 Using Utilities in Databoard

To use these utilities in your ANTSAND project:

Open any section in Databoard and find the css_class field
Add your utility classes: "flex gap-4 p-6 justify-center"
Open the SASS Editor from the toolbar
Click "Generate Utilities" to scan and generate CSS
Save and compile your SASS

Need more info? Read the Philosophy →

Utility-First CSS

If you know Tailwind, you know ANTSAND utilities