{"id":48505261,"url":"https://github.com/uncinq/css-base","last_synced_at":"2026-04-23T14:01:19.834Z","repository":{"id":348502216,"uuid":"1198285032","full_name":"uncinq/css-base","owner":"uncinq","description":"Framework-agnostic CSS foundation — reset, base element styles, and layout primitives. Built on named cascade layers and driven by design tokens.","archived":false,"fork":false,"pushed_at":"2026-04-21T10:40:14.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-21T12:11:52.489Z","etag":null,"topics":["base-styles","css","css-layers","reset-css"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/uncinq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2026-04-01T09:27:23.000Z","updated_at":"2026-04-21T10:40:18.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/uncinq/css-base","commit_stats":null,"previous_names":["uncinq/css-base"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/uncinq/css-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncinq%2Fcss-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncinq%2Fcss-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncinq%2Fcss-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncinq%2Fcss-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uncinq","download_url":"https://codeload.github.com/uncinq/css-base/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncinq%2Fcss-base/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32183351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T11:42:27.955Z","status":"ssl_error","status_checked_at":"2026-04-23T11:42:18.877Z","response_time":53,"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":["base-styles","css","css-layers","reset-css"],"created_at":"2026-04-07T16:02:26.185Z","updated_at":"2026-04-23T14:01:19.778Z","avatar_url":"https://github.com/uncinq.png","language":"CSS","readme":"# @uncinq/css-base\n\n\u003e Framework-agnostic CSS foundation — reset, native element styles, and layout primitives.\n\n\u003cimg width=\"1280\" height=\"640\" alt=\"share-css-base\" src=\"https://github.com/user-attachments/assets/3e57aa00-5349-4a2a-bdd5-3369b1ec21c2\" /\u003e\n\n## What's included\n\n### Reset\n\nBased on the [Josh W Comeau custom CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/), with additions by Un Cinq:\n\n- Box model normalization (`box-sizing: border-box`)\n- Default margin removal\n- `interpolate-size: allow-keywords` for keyword animations (behind `prefers-reduced-motion: no-preference`)\n- Text rendering (`-webkit-font-smoothing`, `text-rendering`, `font-variant-ligatures`)\n- Media defaults (`display: block`, `max-width: 100%` on `img`, `picture`, `video`, `canvas`, `svg`)\n- Form controls font inheritance\n- Overflow wrap on headings and paragraphs\n- `text-wrap: pretty` on `p`, `text-wrap: balance` on headings\n\n### Base\n\nStyles for native HTML elements, each driven by design tokens from `@uncinq/design-tokens` and `@uncinq/component-tokens`:\n\n| File | Element(s) |\n| --- | --- |\n| `base/accessibility.css` | `.visually-hidden`, `.visually-hidden-focusable` — a11y visibility helpers |\n| `base/body.css` | `body` — background, text color, font family/size/weight/line-height |\n| `base/headings.css` | `h1`–`h6` — color, font, size scale via `--font-size-heading-01…06` |\n| `base/typography.css` | `p` — spacing, max-width |\n| `base/link.css` | `a` — color, underline style, hover transition |\n| `base/blockquote.css` | `blockquote`, `cite` — border-left, italic, muted color |\n| `base/code.css` | `code`, `pre`, `kbd`, `samp` — monospace font, background, inline vs block |\n| `base/list.css` | `ul`, `ol`, `li` — content list indent and spacing (prose context) |\n| `base/address.css` | `address` — removes italic, resets paragraph spacing |\n| `base/details.css` | `details`, `summary` — border, padding, open state, hover shadow |\n| `base/figure.css` | `figure`, `figcaption` — flex layout, responsive caption direction |\n| `base/form.css` | `label`, `legend`, `input`, `select`, `textarea`, `[type='checkbox']`, `[type='radio']` |\n| `base/picture.css` | `picture` — `inline-block` display |\n| `base/table.css` | `table`, `th`, `td`, `thead` — collapse, padding, header weight |\n| `base/time.css` | `time` — small font size |\n| `base/video.css` | `video` — fluid width, auto height |\n\n### Layouts\n\nReusable layout utility classes:\n\n| File | Class(es) |\n| --- | --- |\n| `layouts/container.css` | `.container` — centered, max-width responsive container with gutter |\n| `layouts/grid.css` | `.grid` — CSS grid wrapper with responsive `--grid-column` custom property |\n| `layouts/row.css` | `.row`, `.col-xsmall`, `.col-small`, `.col-medium`, `.col-large`, `.offset-center`, `.offset-end` |\n\n---\n\n## CSS cascade layers\n\nAll rules are scoped to named cascade layers, making every declaration safely overridable:\n\n| Layer | Contents |\n| --- | --- |\n| `@layer config` | Reset and design tokens — foundational baseline, lowest priority |\n| `@layer base` | Native element styles |\n| `@layer layouts` | Layout utility classes |\n\nThe intended layer order for a full stack is:\n\n```css\n@layer config, base, layouts, vendors, components;\n```\n\nWith cascade layers, the **last layer in the order wins**. Placing `config` first gives it the lowest priority — the reset and token defaults can never accidentally override base styles, component styles, or project overrides. `@layer base` and `@layer layouts` sit above it but below vendor and component styles.\n\nAny layer can be overridden in your own project by importing after this package and writing to the same layer name:\n\n```css\n@import '@uncinq/css-base'; /* package defaults */\n\n/* your project overrides — same layer, wins by order */\n@layer base {\n  a {\n    --color-link: #0070f3;\n  }\n}\n```\n\n→ MDN: [Using CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)\n\n---\n\n## Installation\n\n```bash\nnpm install @uncinq/css-base\n# or\nyarn add @uncinq/css-base\n```\n\n---\n\n## Usage\n\n```css\n/* everything — reset + base + layouts */\n@import '@uncinq/css-base';\n\n/* or by group */\n@import '@uncinq/css-base/css/reset.css';\n@import '@uncinq/css-base/css/base.css';\n@import '@uncinq/css-base/css/layouts.css';\n\n/* or file by file */\n@import '@uncinq/css-base/css/base/body.css';\n@import '@uncinq/css-base/css/base/headings.css';\n@import '@uncinq/css-base/css/layouts/container.css';\n@import '@uncinq/css-base/css/layouts/row.css';\n```\n\n---\n\n## File structure\n\n```\ncss/\n  index.css                   ← imports reset, base, layouts in order\n  reset.css                   ← Josh W Comeau reset + Un Cinq additions, in @layer config\n  base.css                    ← barrel, imports all base/*\n  layouts.css                 ← barrel, imports all layouts/*\n  base/\n    accessibility.css         ← .visually-hidden, .visually-hidden-focusable\n    blockquote.css            ← blockquote + cite — border-left, italic, muted color\n    code.css                  ← code, pre, kbd, samp — monospace, background, padding\n    list.css                  ← ul, ol, li — content list indent and spacing\n    address.css               ← address — removes italic, resets paragraph spacing\n    body.css                  ← body — background, color, font, rendering\n    details.css               ← details + summary — border, padding, open/hover states\n    figure.css                ← figure + figcaption — flex layout, responsive captions\n    form.css                  ← label, input, select, textarea, checkbox, radio\n    headings.css              ← h1–h6 — color, font family, size scale\n    link.css                  ← a — color, underline, hover transition\n    picture.css               ← picture — inline-block display\n    table.css                 ← table, th, td — collapse, padding, header weight\n    time.css                  ← time — xs font size\n    typography.css            ← p — spacing, max-width\n    video.css                 ← video — fluid width\n  layouts/\n    container.css             ← .container — centered, responsive max-width\n    grid.css                  ← .grid — CSS grid with responsive column custom property\n    row.css                   ← .row + column/offset modifiers\n```\n\n---\n\n## Peer dependencies\n\nThis package requires [`@uncinq/design-tokens`](https://github.com/uncinq/design-tokens) and [`@uncinq/component-tokens`](https://github.com/uncinq/component-tokens) to resolve the CSS custom properties it references. It does not bundle any token values itself.\n\nToken categories referenced across base and layout files include:\n\n- `--color-bg`, `--color-text`, `--color-heading`, `--color-link`, `--color-border`\n- `--font-family-text`, `--font-family-heading`\n- `--font-size-*`, `--font-weight-*`, `--line-height-*`\n- `--spacing-*`, `--max-width-*`\n- `--transition-normal`\n- `--border-width-*`, `--border-style-*`, `--radius-*`\n- Component-scoped tokens: `--input-*`, `--select-*`, `--textarea-*`, `--checkbox-*`, `--radio-*`, `--details-*`, `--table-*`, `--figure-*`, `--label-*`\n- Layout tokens: `--gutter`, `--gap`, `--columns`, `--container-max-width-*`, `--flex-*`, `--spacing-section`\n\nInstall both peer dependencies:\n\n```bash\nnpm install @uncinq/design-tokens @uncinq/component-tokens\n```\n\n→ [`@uncinq/design-tokens`](https://github.com/uncinq/design-tokens) — primitive and semantic design tokens (color, typography, spacing, …)\n→ [`@uncinq/component-tokens`](https://github.com/uncinq/component-tokens) — component-scoped tokens (form, table, figure, …)\n\nThen import them before this package so the tokens resolve correctly:\n\n```css\n@import '@uncinq/design-tokens';\n@import '@uncinq/component-tokens';\n@import '@uncinq/css-base';\n```\n\n---\n\n## References\n\n- [`@uncinq/design-tokens`](https://github.com/uncinq/design-tokens) — primitive and semantic design tokens\n- [`@uncinq/component-tokens`](https://github.com/uncinq/component-tokens) — component-scoped tokens\n- [Josh W Comeau custom CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/) — the reset foundation used in `css/reset.css`\n- [MDN: CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funcinq%2Fcss-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funcinq%2Fcss-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funcinq%2Fcss-base/lists"}