{"id":17516879,"url":"https://github.com/grabss/grabcss","last_synced_at":"2026-04-02T11:52:51.551Z","repository":{"id":258074028,"uuid":"873313416","full_name":"grabss/grabcss","owner":"grabss","description":"A minimal, utility-first CSS framework for rapid UI development.","archived":false,"fork":false,"pushed_at":"2026-03-24T05:26:25.000Z","size":216,"stargazers_count":3,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-25T05:48:50.007Z","etag":null,"topics":["css","css-framework","minimal","postcss","utility-first"],"latest_commit_sha":null,"homepage":"https://grabss.github.io/grabcss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grabss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-16T00:37:39.000Z","updated_at":"2026-03-24T05:26:12.000Z","dependencies_parsed_at":"2024-12-24T00:27:04.396Z","dependency_job_id":"e6f0c97d-4c50-471f-9626-021a90e2fb77","html_url":"https://github.com/grabss/grabcss","commit_stats":null,"previous_names":["grabss/grabcss"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/grabss/grabcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabss%2Fgrabcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabss%2Fgrabcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabss%2Fgrabcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabss%2Fgrabcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grabss","download_url":"https://codeload.github.com/grabss/grabcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grabss%2Fgrabcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31305867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T09:48:21.550Z","status":"ssl_error","status_checked_at":"2026-04-02T09:48:19.196Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","minimal","postcss","utility-first"],"created_at":"2024-10-20T08:10:17.874Z","updated_at":"2026-04-02T11:52:51.532Z","avatar_url":"https://github.com/grabss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# grabcss\n\n*A minimal, utility-first CSS framework for rapid UI development.*\n\n[![NPM Version](https://img.shields.io/npm/v/grabcss.svg)](https://www.npmjs.com/package/grabcss)\n[![License](https://img.shields.io/npm/l/grabcss.svg)](https://github.com/grabss/grabcss/blob/main/LICENSE)\n\n**[View Playground »](https://grabss.github.io/grabcss/)**\n\n\u003c/div\u003e\n\n## Features\n\n- **Lightweight**: Minimal footprint with only essential utilities\n- **Customizable**: Easy theming with CSS custom properties and SCSS variables\n- **Responsive**: Mobile-first breakpoint system (sm, md, lg, xl)\n- **Utility-First**: Compose designs directly in your markup\n- **Modern**: Built with modern CSS features and SCSS\n- **Focused**: Core utilities without unnecessary bloat\n\n## Installation\n\n```bash\nnpm install grabcss\n```\n\n## Quick Start\n\n### Import Pre-built CSS\n\n```js\nimport \"grabcss/grab.css\";\n```\n\n### Use with SCSS\n\n```scss\n@use \"grabcss/scss/main\";\n```\n\n### Custom Configuration\n\n```scss\n// your-theme.scss\n@use \"sass:map\";\n@use \"grabcss/scss/variables\" with (\n  $color-primary: #00a596,\n  $color-secondary: #2563eb,\n  $define-colors: (\n    \"primary\": #00a596,\n    \"secondary\": #2563eb,\n    \"success\": #10b981,\n    \"warning\": #f59e0b,\n    \"danger\": #ef4444,\n    \"info\": #3b82f6\n  )\n);\n\n@use \"grabcss/scss/main\";\n```\n\n## Utility Classes\n\n### Colors\n```html\n\u003cdiv class=\"text-primary bg-secondary\"\u003ePrimary text on secondary background\u003c/div\u003e\n\u003cdiv class=\"text-danger\"\u003eDanger text\u003c/div\u003e\n```\n\n### Typography\n```html\n\u003ch1 class=\"fs-4xl fw-bold\"\u003eLarge bold heading\u003c/h1\u003e\n\u003cp class=\"fs-md lh-md text-muted\"\u003eRegular paragraph with medium line height\u003c/p\u003e\n```\n\n### Layout \u0026 Flexbox\n```html\n\u003cdiv class=\"d-flex justify-center items-center\"\u003e\n  \u003cdiv class=\"flex-1\"\u003eFlexible item\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"d-grid grid-cols-3 g-md\"\u003e\n  \u003cdiv\u003eGrid item 1\u003c/div\u003e\n  \u003cdiv\u003eGrid item 2\u003c/div\u003e\n  \u003cdiv\u003eGrid item 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Spacing\n```html\n\u003cdiv class=\"m-lg p-md\"\u003eMargin large, padding medium\u003c/div\u003e\n\u003cdiv class=\"mx-auto\"\u003eCentered horizontally\u003c/div\u003e\n\u003cdiv class=\"py-sm\"\u003eVertical padding small\u003c/div\u003e\n```\n\n### Responsive Design\n```html\n\u003cdiv class=\"d-block sm:d-flex lg:d-grid\"\u003e\n  \u003c!-- Block on mobile, flex on small+, grid on large+ --\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"fs-sm md:fs-lg\"\u003e\n  \u003c!-- Small text on mobile, large on medium+ screens --\u003e\n\u003c/div\u003e\n```\n\n## Breakpoints\n\n| Breakpoint | Min Width | Usage           |\n|------------|-----------|-----------------|\n| `sm`       | 640px     | Small devices   |\n| `md`       | 768px     | Tablets         |\n| `lg`       | 1024px    | Desktops        |\n| `xl`       | 1280px    | Large desktops  |\n\n## Design Tokens\n\n### Colors\n- Primary: `#00a596`\n- Secondary: `#000000`\n- Background: `#ffffff`\n- Border: `#dce1e6`\n- Text: `#000000`\n- Muted: `#787878`\n- Link: `#0064e6`\n- Warning: `#ffc107`\n- Danger: `#dc3545`\n\n### Font Sizes\n- `xs`: 0.75rem (12px)\n- `sm`: 0.875rem (14px)\n- `md`: 1rem (16px, base)\n- `lg`: 1.125rem (18px)\n- `xl`: 1.25rem (20px)\n- `2xl`: 1.375rem (22px)\n- `3xl`: 1.5rem (24px)\n- `4xl`: 2.25rem (36px)\n- `5xl`: 2.5rem (40px)\n\n### Spacing Scale\n- `2xs`: 5px\n- `xs`: 10px\n- `sm`: 15px\n- `md`: 20px\n- `lg`: 25px\n- `xl`: 30px\n- `2xl`: 35px\n- `3xl`: 40px\n- `4xl`: 45px\n- `5xl`: 50px\n\n### Border Widths\n- `none`: 0 (Remove border)\n- `default`: 1px\n- `lg`: 2px\n- `xl`: 4px\n- `2xl`: 8px\n\n### Border Radius\n- `sm`: 4px\n- `md`: 6px\n- `lg`: 8px\n- `xl`: 12px\n- `2xl`: 16px\n- `3xl`: 24px\n- `full`: 9999px\n\n## Available Utilities\n\n### Display\n`.d-{value}` - none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell, contents\n\n### Position\n`.ps-{value}` - static, relative, absolute, fixed, sticky\n\n### Flexbox\n- `.flex-{value}` - row, row-reverse, column, column-reverse\n- `.flex-nowrap`, `.flex-wrap`, `.flex-wrap-reverse`\n- `.justify-{value}` - start, center, end, flex-start, flex-end, space-between, space-around\n- `.items-{value}` - start, center, end, flex-start, flex-end\n- `.flex-1`, `.flex-shrink-0`\n\n### Grid\n- `.grid-cols-{value}` - 1, 2, 3, 4, 5, 6, 12, none\n- `.grid-rows-{value}` - 1, 2, 3, 4, 5, 6, none\n- `.col-{value}` - auto, span-1 to span-6, span-full\n- `.row-{value}` - auto, span-1 to span-6, span-full\n- `.place-content-{value}`, `.place-items-{value}`, `.place-self-{value}`\n\n### Spacing\n- Margin: `.m-{size}`, `.mx-{size}`, `.my-{size}`, `.mt-{size}`, `.mr-{size}`, `.mb-{size}`, `.ml-{size}`\n- Padding: `.p-{size}`, `.px-{size}`, `.py-{size}`, `.pt-{size}`, `.pr-{size}`, `.pb-{size}`, `.pl-{size}`\n- Gap: `.g-{size}`, `.rg-{size}`, `.cg-{size}`\n\n### Sizing\n`.w-{value}`, `.h-{value}` - auto, fit-content, none, 50, 100\n\n### Text\n- `.text-{color}` - primary, secondary, muted, etc.\n- `.text-{value}` - left, center, right\n- `.fs-{size}` - xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl\n- `.fw-{weight}` - normal, bold\n- `.lh-{value}` - none, default, xs, sm, md, lg, xl, 2xl\n- `.ws-{value}` - normal, nowrap, pre, pre-wrap, pre-line\n- `.wb-{value}` - normal, break-all, keep-all, break-word\n\n### Background\n`.bg-{color}` - primary, secondary, background, etc.\n\n### Opacity\n- `.op-{value}` - 0, 25, 50, 75, 100\n\n### Borders\n- Border Width: `.border`, `.border-{size}` - none, lg, xl, 2xl\n- Individual Sides: `.border-{side}`, `.border-{side}-{size}` - top, right, bottom, left\n- Axis Groups: `.border-x`, `.border-y` - horizontal, vertical borders\n- Border Colors: `.border-{color}` - primary, secondary, warning, danger, etc.\n- Border Radius: `.rounded-{radius}` - sm, md, lg, xl, 2xl, 3xl, full\n\n### Visibility\n`.v-{value}` - visible, hidden\n\n## Examples\n\n### Card Component\n```html\n\u003cdiv class=\"bg-background border rounded-lg p-lg\"\u003e\n  \u003ch2 class=\"fs-xl fw-bold text-heading mb-sm\"\u003eCard Title\u003c/h2\u003e\n  \u003cp class=\"text-body lh-md mb-md\"\u003eCard description with proper line height.\u003c/p\u003e\n  \u003cbutton class=\"bg-primary text-background px-md py-sm rounded-md\"\u003eAction Button\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Border Examples\n```html\n\u003c!-- Border widths --\u003e\n\u003cdiv class=\"border\"\u003eDefault border\u003c/div\u003e\n\u003cdiv class=\"border-lg\"\u003eLarge border\u003c/div\u003e\n\u003cdiv class=\"border-xl\"\u003eExtra large border\u003c/div\u003e\n\u003cdiv class=\"border-none\"\u003eNo border\u003c/div\u003e\n\n\u003c!-- Individual border sides --\u003e\n\u003cdiv class=\"border-top\"\u003eTop border only\u003c/div\u003e\n\u003cdiv class=\"border-left-lg\"\u003eThick left border\u003c/div\u003e\n\u003cdiv class=\"border-x\"\u003eHorizontal borders\u003c/div\u003e\n\u003cdiv class=\"border-y-xl\"\u003eThick vertical borders\u003c/div\u003e\n\n\u003c!-- Border colors --\u003e\n\u003cdiv class=\"border border-primary\"\u003ePrimary border color\u003c/div\u003e\n\u003cdiv class=\"border-top-lg border-warning\"\u003eWarning top border\u003c/div\u003e\n\n\u003c!-- Border radius --\u003e\n\u003cdiv class=\"rounded-sm\"\u003eSmall rounded corners\u003c/div\u003e\n\u003cdiv class=\"rounded-lg\"\u003eLarge rounded corners\u003c/div\u003e\n\u003cdiv class=\"rounded-full\"\u003ePill shape\u003c/div\u003e\n\n\u003c!-- Combined examples --\u003e\n\u003cdiv class=\"border border-lg rounded-xl bg-background p-md\"\u003e\n  Bordered card with rounded corners\n\u003c/div\u003e\n\u003cdiv class=\"border-left-xl border-primary bg-background p-md\"\u003e\n  Left accent card with primary color\n\u003c/div\u003e\n```\n\n### Responsive Layout\n```html\n\u003cdiv class=\"d-flex flex-column md:flex-row g-md\"\u003e\n  \u003cdiv class=\"flex-1 bg-primary text-background p-md\"\u003e\n    \u003ch3 class=\"fs-lg mb-sm\"\u003eMain Content\u003c/h3\u003e\n    \u003cp class=\"fs-sm\"\u003eThis adapts from vertical stack on mobile to horizontal on tablets and up.\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"w-100 md:w-auto bg-secondary text-background p-md\"\u003e\n    \u003ch4 class=\"fs-md mb-xs\"\u003eSidebar\u003c/h4\u003e\n    \u003cp class=\"fs-sm\"\u003eFixed width on larger screens.\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## License\n\nMIT License - see [LICENSE](https://github.com/grabss/grabcss/blob/main/LICENSE) file for details.\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](https://github.com/grabss/grabcss/blob/main/CONTRIBUTING.md) for guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrabss%2Fgrabcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrabss%2Fgrabcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrabss%2Fgrabcss/lists"}