grabcss

A minimal, utility-first CSS framework for rapid UI development.

View Playground »

Features

• Lightweight: Minimal footprint with only essential utilities
• Customizable: Easy theming with CSS custom properties and SCSS variables
• Responsive: Mobile-first breakpoint system (sm, md, lg, xl)
• Utility-First: Compose designs directly in your markup
• Modern: Built with modern CSS features and SCSS
• Focused: Core utilities without unnecessary bloat

Installation

npm install grabcss

Quick Start

Import Pre-built CSS

import "grabcss/grab.css";

Use with SCSS

@use "grabcss/scss/main";

Custom Configuration

// your-theme.scss
@use "sass:map";
@use "grabcss/scss/variables" with (
  $color-primary: #00a596,
  $color-secondary: #2563eb,
  $define-colors: (
    "primary": #00a596,
    "secondary": #2563eb,
    "success": #10b981,
    "warning": #f59e0b,
    "danger": #ef4444,
    "info": #3b82f6
  )
);

@use "grabcss/scss/main";

Utility Classes

Colors

<div class="text-primary bg-secondary">Primary text on secondary background</div>
<div class="text-danger">Danger text</div>

Typography

<h1 class="fs-4xl fw-bold">Large bold heading</h1>
<p class="fs-md lh-md text-muted">Regular paragraph with medium line height</p>

Layout & Flexbox

<div class="d-flex justify-center items-center">
  <div class="flex-1">Flexible item</div>
</div>

<div class="d-grid grid-cols-3 g-md">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
</div>

Spacing

<div class="m-lg p-md">Margin large, padding medium</div>
<div class="mx-auto">Centered horizontally</div>
<div class="py-sm">Vertical padding small</div>

Responsive Design

<div class="d-block sm:d-flex lg:d-grid">
  <!-- Block on mobile, flex on small+, grid on large+ -->
</div>

<div class="fs-sm md:fs-lg">
  <!-- Small text on mobile, large on medium+ screens -->
</div>

Breakpoints

| Breakpoint | Min Width | Usage | |------------|-----------|-----------------| | sm | 640px | Small devices | | md | 768px | Tablets | | lg | 1024px | Desktops | | xl | 1280px | Large desktops |

Design Tokens

Colors

• Primary: #00a596
• Secondary: #000000
• Background: #ffffff
• Border: #dce1e6
• Text: #000000
• Muted: #787878
• Link: #0064e6
• Warning: #ffc107
• Danger: #dc3545

Font Sizes

• xs: 0.75rem (12px)
• sm: 0.875rem (14px)
• md: 1rem (16px, base)
• lg: 1.125rem (18px)
• xl: 1.25rem (20px)
• 2xl: 1.375rem (22px)
• 3xl: 1.5rem (24px)
• 4xl: 2.25rem (36px)
• 5xl: 2.5rem (40px)

Spacing Scale

• 2xs: 5px
• xs: 10px
• sm: 15px
• md: 20px
• lg: 25px
• xl: 30px
• 2xl: 35px
• 3xl: 40px
• 4xl: 45px
• 5xl: 50px

Border Widths

• none: 0 (Remove border)
• default: 1px
• lg: 2px
• xl: 4px
• 2xl: 8px

Border Radius

• sm: 4px
• md: 6px
• lg: 8px
• xl: 12px
• 2xl: 16px
• 3xl: 24px
• full: 9999px

Available Utilities

Display

.d-{value} - none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell, contents

Position

.ps-{value} - static, relative, absolute, fixed, sticky

Flexbox

• .flex-{value} - row, row-reverse, column, column-reverse
• .flex-nowrap, .flex-wrap, .flex-wrap-reverse
• .justify-{value} - start, center, end, flex-start, flex-end, space-between, space-around
• .items-{value} - start, center, end, flex-start, flex-end
• .flex-1, .flex-shrink-0

Grid

• .grid-cols-{value} - 1, 2, 3, 4, 5, 6, 12, none
• .grid-rows-{value} - 1, 2, 3, 4, 5, 6, none
• .col-{value} - auto, span-1 to span-6, span-full
• .row-{value} - auto, span-1 to span-6, span-full
• .place-content-{value}, .place-items-{value}, .place-self-{value}

Spacing

• Margin: .m-{size}, .mx-{size}, .my-{size}, .mt-{size}, .mr-{size}, .mb-{size}, .ml-{size}
• Padding: .p-{size}, .px-{size}, .py-{size}, .pt-{size}, .pr-{size}, .pb-{size}, .pl-{size}
• Gap: .g-{size}, .rg-{size}, .cg-{size}

Sizing

.w-{value}, .h-{value} - auto, fit-content, none, 50, 100

Text

• .text-{color} - primary, secondary, muted, etc.
• .text-{value} - left, center, right
• .fs-{size} - xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
• .fw-{weight} - normal, bold
• .lh-{value} - none, default, xs, sm, md, lg, xl, 2xl
• .ws-{value} - normal, nowrap, pre, pre-wrap, pre-line
• .wb-{value} - normal, break-all, keep-all, break-word

Background

.bg-{color} - primary, secondary, background, etc.

Opacity

• .op-{value} - 0, 25, 50, 75, 100

Borders

• Border Width: .border, .border-{size} - none, lg, xl, 2xl
• Individual Sides: .border-{side}, .border-{side}-{size} - top, right, bottom, left
• Axis Groups: .border-x, .border-y - horizontal, vertical borders
• Border Colors: .border-{color} - primary, secondary, warning, danger, etc.
• Border Radius: .rounded-{radius} - sm, md, lg, xl, 2xl, 3xl, full

Visibility

.v-{value} - visible, hidden

Examples

Card Component

<div class="bg-background border rounded-lg p-lg">
  <h2 class="fs-xl fw-bold text-heading mb-sm">Card Title</h2>
  <p class="text-body lh-md mb-md">Card description with proper line height.</p>
  <button class="bg-primary text-background px-md py-sm rounded-md">Action Button</button>
</div>

Border Examples

<!-- Border widths -->
<div class="border">Default border</div>
<div class="border-lg">Large border</div>
<div class="border-xl">Extra large border</div>
<div class="border-none">No border</div>

<!-- Individual border sides -->
<div class="border-top">Top border only</div>
<div class="border-left-lg">Thick left border</div>
<div class="border-x">Horizontal borders</div>
<div class="border-y-xl">Thick vertical borders</div>

<!-- Border colors -->
<div class="border border-primary">Primary border color</div>
<div class="border-top-lg border-warning">Warning top border</div>

<!-- Border radius -->
<div class="rounded-sm">Small rounded corners</div>
<div class="rounded-lg">Large rounded corners</div>
<div class="rounded-full">Pill shape</div>

<!-- Combined examples -->
<div class="border border-lg rounded-xl bg-background p-md">
  Bordered card with rounded corners
</div>
<div class="border-left-xl border-primary bg-background p-md">
  Left accent card with primary color
</div>

Responsive Layout

<div class="d-flex flex-column md:flex-row g-md">
  <div class="flex-1 bg-primary text-background p-md">
    <h3 class="fs-lg mb-sm">Main Content</h3>
    <p class="fs-sm">This adapts from vertical stack on mobile to horizontal on tablets and up.</p>
  </div>
  <div class="w-100 md:w-auto bg-secondary text-background p-md">
    <h4 class="fs-md mb-xs">Sidebar</h4>
    <p class="fs-sm">Fixed width on larger screens.</p>
  </div>
</div>

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.