{"id":23107491,"url":"https://github.com/sonvice/astro-sass-template","last_synced_at":"2026-05-06T20:33:18.376Z","repository":{"id":267160729,"uuid":"900419681","full_name":"sonvice/astro-sass-template","owner":"sonvice","description":"Astro v5 con sass y tokens de diseño","archived":false,"fork":false,"pushed_at":"2025-03-02T18:45:52.000Z","size":178,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T19:33:38.616Z","etag":null,"topics":["astro","css","css-grid","css3","custom-properties","design","design-system","html5","sass","token"],"latest_commit_sha":null,"homepage":"https://astro-sass-template.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonvice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-12-08T18:18:18.000Z","updated_at":"2025-03-02T18:45:55.000Z","dependencies_parsed_at":"2025-03-02T19:37:59.606Z","dependency_job_id":null,"html_url":"https://github.com/sonvice/astro-sass-template","commit_stats":null,"previous_names":["sonvice/astro-sass-template"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonvice%2Fastro-sass-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonvice%2Fastro-sass-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonvice%2Fastro-sass-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonvice%2Fastro-sass-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonvice","download_url":"https://codeload.github.com/sonvice/astro-sass-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247092374,"owners_count":20882217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["astro","css","css-grid","css3","custom-properties","design","design-system","html5","sass","token"],"created_at":"2024-12-17T01:14:12.156Z","updated_at":"2026-05-06T20:33:18.371Z","avatar_url":"https://github.com/sonvice.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Starter Kit — ITCSS + CUBE CSS\n\nStarter template de Astro v5 con Sass, arquitectura **ITCSS** y filosofia **CUBE CSS**. Sistema de diseno basado en design tokens, clases de utilidad generadas automaticamente, compositions de layout sin media queries y soporte dark/light theme.\n\n## Arquitectura CSS\n\nLa estructura sigue las capas de especificidad de ITCSS, con las compositions de CUBE CSS como capa Objects:\n\n```\nsrc/sass/\n├── abstracts/           Settings + Tools\n│   ├── tokens/          Design tokens organizados por categoria\n│   │   ├── _colors       Paletas de color + mapas light/dark\n│   │   ├── _typography   Font families, weights y escala fluida\n│   │   ├── _spacing      Escala de espaciado con clamp()\n│   │   └── _radius       Border radius\n│   ├── _aliases          Tokens de componente (button, card, tag)\n│   ├── _functions        px-to-rem(), token()\n│   └── _mixins           breakpoint(), generate-css-variables()\n│\n├── base/                Generic + Elements\n│   ├── _font-face        @font-face declarations\n│   ├── _root             :root CSS custom properties (light + dark)\n│   ├── _reset            CSS reset moderno (Andy Bell)\n│   └── _global           Estilos base (body, headings, links)\n│\n├── compositions/        Objects (layout primitives sin media queries)\n│   ├── _flow             Espaciado vertical entre hermanos\n│   ├── _cluster          Flex wrap con gap\n│   ├── _sidebar          Barra lateral flexible\n│   ├── _switcher         2 columnas auto-stackeables\n│   ├── _grid             Auto-fill responsivo con variantes\n│   ├── _repel            Empuja a extremos opuestos\n│   └── _wrapper          Contenedor centrado\n│\n├── blocks/              Components (CUBE CSS Blocks)\n│   ├── _buttons          .btn con data-variant y data-size\n│   ├── _cards            .card con data-variant y data-padding\n│   └── _tags             .tag con data-variant\n│\n├── utilities/           Trumps (mayor especificidad)\n│   ├── _spacing          .m-{token}, .p-{token}, .mx-{token}\n│   ├── _colors           .bg-{color}-{shade}, .text-{color}-{shade}\n│   ├── _text-sizes       .text-{size-token}\n│   ├── _font             .ff-base, .text-bold, .text-semi-bold\n│   ├── _leading          .leading-tight, .leading-normal\n│   ├── _radius           .radius-{sm|md|lg|xl|full}\n│   ├── _region           .region (padding de seccion)\n│   ├── _flow-space       .flow-space-{token} → --flow-space\n│   ├── _gutter           .gutter-{token} → --gutter\n│   ├── _region-space     .region-space-{token} → --region-space\n│   ├── _wrapper-width    .wrapper-narrow, .wrapper-wide\n│   ├── _text-center      .text-center\n│   ├── _uppercase        .uppercase\n│   └── _visually-hidden  .visually-hidden\n│\n├── sections/            Estilos especificos de pagina\n├── vendors/             CSS de terceros\n└── style.scss           Punto de entrada\n```\n\n### Orden de importacion (especificidad creciente)\n\n```scss\n@use \"base\";          // 1. Reset, :root variables, global styles\n@use \"compositions\";  // 2. Layout primitives (flow, cluster, grid, etc.)\n@use \"blocks\";        // 3. UI components (button, card, tag)\n@use \"utilities\";     // 4. Utility classes (mayor especificidad)\n@use \"sections\";      // 5. Page-specific\n@use \"vendors\";       // 6. Third-party\n```\n\n## Sistema de Design Tokens\n\nDos capas de abstraccion:\n\n```\nTokens (por categoria) → Alias Tokens (por componente) → CSS Custom Properties\n```\n\n1. **Tokens** (`abstracts/tokens/`): Valores organizados por categoria (colors, typography, spacing, radius). Cada archivo exporta su mapa SCSS directamente.\n2. **Aliases** (`abstracts/_aliases.scss`): Tokens semanticos por componente que referencian CSS custom properties con `var()`, lo que les da **reactividad automatica al cambio de tema**.\n\n```scss\n// Los alias usan var() para ser reactivos al tema\n$card: (\n  \"bg\": var(--neutral-50),     // Cambia automaticamente en dark mode\n  \"color\": var(--neutral-900), // No necesita override manual\n  \"radius\": var(--radius-lg),\n  ...\n);\n```\n\nLos alias se convierten a custom properties via:\n```scss\n@include generate-css-variables($card, \"card-\");\n// Genera: --card-bg: var(--neutral-50); --card-color: var(--neutral-900); etc.\n```\n\n### CSS Custom Properties generadas en :root\n\n| Prefijo     | Ejemplo                | Fuente          |\n|:------------|:-----------------------|:----------------|\n| (ninguno)   | `--neutral-50`, `--primary-200` | tokens/_colors |\n| (ninguno)   | `--space-m`, `--space-xl`       | tokens/_spacing |\n| (ninguno)   | `--size-0`, `--size-3`          | tokens/_typography |\n| `ff-`       | `--ff-base`, `--ff-accent`      | tokens/_typography |\n| `fw-`       | `--fw-bold`, `--fw-semi-bold`   | tokens/_typography |\n| `radius-`   | `--radius-sm`, `--radius-full`  | tokens/_radius |\n\n## Patron de componentes (CUBE CSS Blocks)\n\nBasado en el articulo de [Piccalilli](https://piccalil.li/blog/how-i-build-a-button-component/):\n\n1. **Default**: Valores base via alias tokens como custom properties\n2. **Variantes**: Excepciones via `data-attributes` que solo sobreescriben lo que cambia\n3. **Estados**: `:hover`, `:focus-visible`, `:active` referencian las mismas custom properties\n4. **Contexto**: Componentes padres pueden inyectar valores via custom properties\n5. **Tema**: Colores se adaptan automaticamente via `var()` reactivo\n\n```html\n\u003cbutton class=\"btn\" data-variant=\"primary\" data-size=\"large\"\u003eAccion\u003c/button\u003e\n\u003carticle class=\"card\" data-variant=\"elevated\"\u003e...\u003c/article\u003e\n\u003cspan class=\"tag\" data-variant=\"success\"\u003eActivo\u003c/span\u003e\n```\n\n## Compositions (Layout sin media queries)\n\n```html\n\u003cdiv class=\"flow flow-space-space-m\"\u003e...\u003c/div\u003e\n\u003cnav class=\"cluster gutter-space-xs\"\u003e...\u003c/nav\u003e\n\u003cdiv class=\"grid\" data-layout=\"thirds\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"sidebar\"\u003e\u003cnav\u003e...\u003c/nav\u003e\u003cmain\u003e...\u003c/main\u003e\u003c/div\u003e\n\u003cheader class=\"repel\"\u003e\u003ca href=\"/\"\u003eLogo\u003c/a\u003e\u003cnav class=\"cluster\"\u003e...\u003c/nav\u003e\u003c/header\u003e\n\u003cdiv class=\"wrapper wrapper-narrow\"\u003e...\u003c/div\u003e\n```\n\n## Uso\n\n### Requisitos\n\n- [Node.js](https://nodejs.org/) v18+\n\n### Instalacion\n\n```bash\ngit clone \u003cURL_DEL_REPOSITORIO\u003e\nnpm install\n```\n\n### Comandos\n\n| Comando             | Accion                                       |\n| :------------------ | :------------------------------------------- |\n| `npm run dev`       | Inicia servidor de desarrollo en `localhost:4321` |\n| `npm run build`     | Compila para produccion en `./dist/`          |\n| `npm run preview`   | Preview del build antes de desplegar          |\n\n### Personalizar tokens\n\n1. Edita los valores en `src/sass/abstracts/tokens/` (archivo por categoria)\n2. Las custom properties y clases de utilidad se regeneran automaticamente\n3. Para agregar un componente: crea su alias en `_aliases.scss` y su block en `blocks/`\n\n## Dependencias\n\n- [Astro](https://astro.build/) v5\n- [Sass](https://sass-lang.com/) (Dart Sass)\n- [Montserrat Variable](https://fontsource.org/fonts/montserrat) via Fontsource\n\n## Licencia\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonvice%2Fastro-sass-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonvice%2Fastro-sass-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonvice%2Fastro-sass-template/lists"}