Getting Started

Installation

AtomAttr works instantly in the browser. It's designed for rapid prototyping and projects where you don't want a complex build step.

CDN (Zero Config)


                        <!-- 1. Base Styles -->

                        <link rel="stylesheet" href="https://unpkg.com/atomattr/dist/defaults.css">


                        <!-- 2. The Engine -->

                        <script src="https://unpkg.com/atomattr/dist/atomattr.min.js" defer></script>

NPM

$ npm install atomattr

Syntax & Logic

AtomAttr uses HTML attributes instead of classes. The structure is:
modifier-property="value"

1. Standard Attributes

Direct mapping to CSS properties using the built-in design tokens.

p="4" padding: 1rem

bg="primary" background: var(--primary)

flex display: flex

2. Arbitrary Values

Use raw CSS values anytime. No configuration needed.

w="350px" width: 350px

top="15%" top: 15%

bg="#ff0000" background: #ff0000

Responsive Design

Prefix any attribute with a breakpoint key to apply it conditionally. AtomAttr uses a mobile-first approach.

Prefix	Min-Width	Description
(none)	0px	Default styles (Mobile)
`sm-`	640px	Small tablets / Landscape phones
`md-`	768px	Tablets (iPad Portrait)
`lg-`	1024px	Laptops / Desktops
`xl-`	1280px	Large Screens

Hover & States

Add interaction styles by prefixing attributes with state modifiers like hover-, focus-, or active-.

Prefix	Trigger	Example
`hover-`	Mouse hover	`hover-bg="primary"`
`focus-`	Element focus	`focus-border-color="accent"`
`active-`	Click/Press	`active-scale="0.95"`
`disabled-`	Disabled state	`disabled-opacity="0.5"`
`group-hover-`	Parent hover	`group-hover-text="white"`

Interactive Example:


                            <button bg="primary" hover-bg="accent" hover-scale="1.05" ...>

Dark Mode

AtomAttr includes a native dark mode engine. Prefix any attribute with dark- to apply styles only when dark mode is active.

Try toggling the theme button in the navbar!

Dark Mode Card

This card changes appearance automatically based on the theme.


                            <div bg="white" dark-bg="slate-800" text="slate-900" dark-text="white">

Layout & Flexbox

Flexbox

Attribute	CSS Property	Example Values
`flex`	display: flex	Boolean
`col`	flex-direction: column	Boolean
`row`	flex-direction: row	Boolean
`wrap`	flex-wrap: wrap	Boolean
`items="..."`	align-items	start, end, center, stretch
`justify="..."`	justify-content	start, end, center, between, around
`gap="..."`	gap	4, 8, 1rem, 20px

Grid System

Attribute	Description	CSS Output
`grid`	Initialize Grid	display: grid
`grid-cols="..."`	Define Columns	repeat(n, minmax(0, 1fr))
`grid-rows="..."`	Define Rows	repeat(n, minmax(0, 1fr))
`col-span="..."`	Span Columns	grid-column: span n / span n
`row-span="..."`	Span Rows	grid-row: span n / span n

Spacing & Sizing

AtomAttr uses a standard spacing scale where 1 unit = 0.25rem (4px).

Value	Pixels	Rem
`1`	4px	0.25rem
`2`	8px	0.5rem
`4`	16px	1rem
`8`	32px	2rem
`16`	64px	4rem

Properties

p, pt, pb, px, py
m, mt, mb, mx, my
w, min-w, max-w
h, min-h, max-h

Visuals

Attribute	Description	Values
`radius="..."`	Border Radius	sm, md, lg, xl, full, none, 10px
`shadow="..."`	Box Shadow	sm, md, lg, xl, 2xl, none
`border="..."`	Border Width	1, 2, 4px
`border-color="..."`	Border Color	slate-200, primary
`opacity="..."`	Opacity	0.5, 1, 0

Transforms

Compositing transforms handled automatically via CSS variables.

Attribute	Logic	Example
`scale="..."`	Scale factor	1.05, 0.9
`rotate="..."`	Degrees	45, 90, 180
`translate-x="..."`	Spacing unit or literal	4, 10px, 50%
`translate-y="..."`	Spacing unit or literal	4, 10px, 50%

Color Palette

Includes the full 2025 standard palette (50-950). Use with bg, text, border-color.