https://github.com/grabss/grabcss
A minimal, utility-first CSS framework for rapid UI development.
https://github.com/grabss/grabcss
css css-framework minimal postcss utility-first
Last synced: 2 months ago
JSON representation
A minimal, utility-first CSS framework for rapid UI development.
- Host: GitHub
- URL: https://github.com/grabss/grabcss
- Owner: grabss
- License: mit
- Created: 2024-10-16T00:37:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-24T05:26:25.000Z (3 months ago)
- Last Synced: 2026-03-25T05:48:50.007Z (3 months ago)
- Topics: css, css-framework, minimal, postcss, utility-first
- Language: TypeScript
- Homepage: https://grabss.github.io/grabcss
- Size: 211 KB
- Stars: 3
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# grabcss
*A minimal, utility-first CSS framework for rapid UI development.*
[](https://www.npmjs.com/package/grabcss)
[](https://github.com/grabss/grabcss/blob/main/LICENSE)
**[View Playground »](https://grabss.github.io/grabcss/)**
## 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
```bash
npm install grabcss
```
## Quick Start
### Import Pre-built CSS
```js
import "grabcss/grab.css";
```
### Use with SCSS
```scss
@use "grabcss/scss/main";
```
### Custom Configuration
```scss
// 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
```html
Primary text on secondary background
Danger text
```
### Typography
```html
Large bold heading
Regular paragraph with medium line height
```
### Layout & Flexbox
```html
Flexible item
Grid item 1
Grid item 2
Grid item 3
```
### Spacing
```html
Margin large, padding medium
Centered horizontally
Vertical padding small
```
### Responsive Design
```html
```
## 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
```html
Card Title
Card description with proper line height.
Action Button
```
### Border Examples
```html
Default border
Large border
Extra large border
No border
Top border only
Thick left border
Horizontal borders
Thick vertical borders
Primary border color
Warning top border
Small rounded corners
Large rounded corners
Pill shape
Bordered card with rounded corners
Left accent card with primary color
```
### Responsive Layout
```html
Main Content
This adapts from vertical stack on mobile to horizontal on tablets and up.
Sidebar
Fixed width on larger screens.
```
## License
MIT License - see [LICENSE](https://github.com/grabss/grabcss/blob/main/LICENSE) file for details.
## Contributing
Contributions are welcome! Please see [CONTRIBUTING.md](https://github.com/grabss/grabcss/blob/main/CONTRIBUTING.md) for guidelines.