SystemDocs

Layout & Estructura

Primitivas fundamentales para organizar y espaciar el contenido

Componentes de diseño atómicos y reutilizables. Todos extienden de HTMLAttributes<'div'> para máxima flexibilidad.

Container

Limita el ancho máximo y centra el contenido horizontalmente.

Uso Básico

Contenido centrado con max-width

Code Snippet 
---
import { Container } from '@rubenvillar/design-system-astro';
---

<Container size="lg" class="border-2 border-dashed p-6">
  Contenido centrado
</Container>

Tamaños Disponibles

SM (max-w-screen-sm)
Container sm
MD (max-w-screen-md)
Container md
LG (max-w-screen-xl) - Default
Container lg
FULL (max-w-full)
Container full
Code Snippet 
---
import { Container } from '@rubenvillar/design-system-astro';
---

<!-- Tamaño pequeño (max-w-screen-sm) -->
<Container size="sm">...</Container>

<!-- Tamaño medio (max-w-screen-md) -->
<Container size="md">...</Container>

<!-- Tamaño grande (max-w-screen-xl) - default -->
<Container size="lg">...</Container>

<!-- Ancho completo -->
<Container size="full">...</Container>

Props

size 'sm' | 'md' | 'lg' | 'full' default: 'lg'

Grid & GridItem

Sistema de cuadrícula basado en CSS Grid. Combina con clases de Tailwind.

Grid Básico

Columna 1
Columna 2
Columna 3
Code Snippet 
---
import { Grid, GridItem } from '@rubenvillar/design-system-astro';
---

<Grid gap="md" class="grid-cols-1 md:grid-cols-3">
  <GridItem>Columna 1</GridItem>
  <GridItem>Columna 2</GridItem>
  <GridItem>Columna 3</GridItem>
</Grid>

GridItem con Spans

1/3
2/3
Full width
Code Snippet 
---
import { Grid, GridItem } from '@rubenvillar/design-system-astro';
---

<Grid gap="md">
  <!-- Spans 1 columna -->
  <GridItem colSpan="1">1/3</GridItem>
  
  <!-- Spans 2 columnas -->
  <GridItem colSpan="2">2/3</GridItem>
  
  <!-- Ancho completo -->
  <GridItem colSpan="full">Full width</GridItem>
</Grid>

Props

Grid
gap 'sm' | 'md' | 'lg' Espaciado entre items
GridItem
colSpan '1' | '2' | '3' | 'full' default: '1'

Separator

Línea divisoria semántica con soporte para orientación horizontal y vertical.

Orientaciones

Horizontal
Vertical con altura custom
Code Snippet 
---
import { Separator } from '@rubenvillar/design-system-astro';
---

<!-- Separador horizontal (default) -->
<Separator />

<!-- Separador vertical -->
<Separator orientation="vertical" />

Props

orientation 'horizontal' | 'vertical' default: 'horizontal'

Accesibilidad

Incluye role="separator" y aria-orientation para lectores de pantalla.

Spacer

Espaciador invisible que mantiene espaciado consistente. Útil para layouts responsivos.

Uso con Eje Vertical

Primera Sección

Segunda Sección

Code Snippet 
---
import { Spacer } from '@rubenvillar/design-system-astro';
---

<!-- Espaciador vertical -->
<Spacer size="md" axis="vertical" />

<!-- Espaciador horizontal -->
<Spacer size="lg" axis="horizontal" />

<!-- Tamaños: sm (1rem), md (2rem), lg (4rem), xl (6rem) -->
<Spacer size="xl" />

Props

size 'sm' | 'md' | 'lg' | 'xl' sm: 1rem, md: 2rem, lg: 4rem, xl: 6rem
axis 'vertical' | 'horizontal' default: 'vertical'

Accesibilidad

Tiene aria-hidden="true" para que sea invisible para lectores de pantalla.

Ejemplo Combinado

<Grid gap="lg">
  <GridItem colSpan="full">
    <Container>
      <Separator />
    </Container>
  </GridItem>
  
  <GridItem colSpan="2">
    <h2>Contenido Principal</h2>
    <Spacer size="md" />
    <p>Descripción...</p>
  </GridItem>
  
  <GridItem colSpan="1">
    <h3>Sidebar</h3>
    <Spacer size="sm" />
    <p>Enlaces...</p>
  </GridItem>
</Grid>