@strato-css/preset-base

Base preset for Strato CSS - Tailwind compatible utilities.

Installation

pnpm add @strato-css/preset-base

Usage

// unocss.config.ts
import { defineConfig } from 'unocss';
import presetBase from '@strato-css/preset-base';

export default defineConfig({
  presets: [
    presetBase()
  ]
});

Features

Spacing Utilities

• Padding: p-4, px-2, py-4, pt-2, pr-4, pb-6, pl-2
• Margin: m-4, mx-auto, my-2, mt-0, mr-4, mb-6, ml-2
• Gap: gap-2, gap-4, gap-6, gap-x-4, gap-y-2

Layout Utilities

• Display: block, inline-block, inline, flex, grid, hidden
• Position: static, fixed, absolute, relative, sticky
• Overflow: overflow-auto, overflow-hidden, overflow-visible, overflow-scroll

Color Utilities

• Text color: text-white, text-primary, text-gray-500
• Background: bg-white, bg-primary, bg-gray-100
• Border: border-gray-200, border-primary

Typography Utilities

• Font size: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
• Font weight: font-thin, font-light, font-normal, font-medium, font-semibold, font-bold
• Line height: leading-none, leading-tight, leading-normal, leading-relaxed
• Text align: text-left, text-center, text-right, text-justify

Border Utilities

• Border width: border, border-0, border-2, border-4
• Border radius: rounded-none, rounded-sm, rounded, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full

Flexbox Utilities

• Direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse
• Wrap: flex-wrap, flex-nowrap, flex-wrap-reverse
• Justify: justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly
• Align: items-start, items-end, items-center, items-baseline, items-stretch
• Flex: flex-1, flex-auto, flex-initial, flex-none

Grid Utilities

• Columns: grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-6, grid-cols-12
• Rows: grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-6
• Column span: col-span-1, col-span-2, col-span-full, col-auto, col-start-1, col-end-3
• Row span: row-span-1, row-span-2, row-span-full, row-auto, row-start-1, row-end-3

Responsive Variants

<!-- Mobile: 1 column, tablet: 2 columns, desktop: 4 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- content -->
</div>

Dark Mode Variant

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Adaptive content
</div>

State Variants

<button class="bg-primary hover:bg-primary-600 focus:ring-2 active:bg-primary-700">
  Button
</button>

Shortcuts

Pre-built component combinations:

• Buttons: btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-sm, btn-lg
• Cards: card, card-dark
• Inputs: input, input-primary, input-error
• Layouts: flex-center, flex-between, flex-col-center, grid-2, grid-3, grid-4
• Typography: heading-1, heading-2, heading-3, heading-4, text-body, text-small, text-muted
• Spacing: section, gap-2, gap-4, gap-6, gap-8
• Effects: shadow, shadow-lg, shadow-xl, shadow-none, rounded, rounded-lg, rounded-full
• Transitions: transition, transition-fast, transition-slow

License

MIT