# Responsive Grid Skeleton

A clean, minimal skeleton framework for building responsive, grid-based websites with SvelteKit, TailwindCSS, and DaisyUI.

## 🚀 Features

- **Mobile-First Design**: All layouts start with mobile and scale up
- **Responsive Grid System**: Flexible CSS Grid and Flexbox layouts
- **Modern Tech Stack**: SvelteKit 2.0, TailwindCSS 3.4, DaisyUI 5.1
- **Comprehensive Documentation**: Detailed comments explaining every pattern
- **Accessibility Ready**: ARIA labels, keyboard navigation, screen reader support
- **Performance Optimized**: Minimal bundle size and fast loading times
- **TypeScript Support**: Full type safety out of the box

## 📱 Responsive Breakpoints

The framework uses TailwindCSS's responsive breakpoints:

- **Mobile**: Default (0px+) - Single column layouts, stacked content
- **Small**: `sm:` 640px+ - Small tablets, 2-column layouts
- **Medium**: `md:` 768px+ - Tablets, 2-3 column layouts  
- **Large**: `lg:` 1024px+ - Laptops, multi-column layouts
- **Extra Large**: `xl:` 1280px+ - Desktops, maximum columns
- **2X Large**: `2xl:` 1536px+ - Large desktops, spacious layouts

## 🎯 Grid Layout Patterns

### Basic Responsive Grid
```html
<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

### Asymmetric Layout (2:1 Ratio)
```html
<!-- Main content + sidebar layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <div class="lg:col-span-2">Main Content</div>
  <div class="lg:col-span-1">Sidebar</div>
</div>
```

### Mixed Column Spans
```html
<!-- Complex layouts with different column spans -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
  <div class="md:col-span-4">Full Width Header</div>
  <div class="md:col-span-3">Main Area</div>
  <div class="md:col-span-1">Sidebar</div>
  <div class="md:col-span-2">Half Width</div>
  <div class="md:col-span-2">Half Width</div>
</div>
```

## 🏗️ Project Structure

```
src/
├── routes/
│   ├── +layout.svelte          # Main layout with navigation
│   ├── +page.svelte            # Homepage with grid examples
│   ├── about/
│   │   └── +page.svelte        # About page (content layout example)
│   └── contact/
│       └── +page.svelte        # Contact page (form layout example)
├── app.css                     # Global styles and custom CSS
└── app.html                    # HTML template
```

## 🎨 Container Patterns

### Centered Container
```html
<!-- Standard centered container with responsive padding -->
<div class="container mx-auto px-4">
  <!-- Content -->
</div>
```

### Custom Max-Width
```html
<!-- Custom max-width container -->
<div class="max-w-7xl mx-auto px-4">
  <!-- Content -->
</div>
```

### Full Width
```html
<!-- Full width within parent -->
<div class="w-full">
  <!-- Content -->
</div>
```

## 📏 Spacing Patterns

### Responsive Grid Gaps
```html
<!-- Responsive spacing between grid items -->
<div class="grid gap-4 md:gap-6 lg:gap-8">
  <!-- Items -->
</div>
```

### Responsive Padding
```html
<!-- Responsive padding -->
<div class="p-4 md:p-6 lg:p-8">
  <!-- Content -->
</div>
```

### Responsive Vertical Spacing
```html
<!-- Responsive vertical spacing between elements -->
<div class="space-y-4 md:space-y-6 lg:space-y-8">
  <!-- Elements -->
</div>
```

## 🚀 Getting Started

1. **Clone or download** this skeleton project
2. **Install dependencies**:
   ```bash
   npm install
   ```
3. **Start development server**:
   ```bash
   npm run dev
   ```
4. **Start building** your responsive website!

## 🛠️ Development Commands

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run check` - Run TypeScript checks

## 📚 Best Practices

### Mobile-First Approach
Always start with mobile styles and add larger breakpoints:
```html
<!-- ✅ Good: Mobile-first -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

<!-- ❌ Avoid: Desktop-first -->
<div class="grid grid-cols-3 lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
```

### Semantic HTML
Use proper HTML5 semantic elements:
```html
<header>Navigation</header>
<main>
  <section>Content sections</section>
  <aside>Sidebar content</aside>
</main>
<footer>Footer content</footer>
```

### Accessibility
Include proper ARIA labels and keyboard navigation:
```html
<button aria-label="Toggle menu" class="lg:hidden">
  <Menu class="h-6 w-6" />
</button>
```

## 🎨 Customization

### Colors
Customize the color scheme in `tailwind.config.js`:
```javascript
module.exports = {
  // ... other config
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#your-color",
          "secondary": "#your-color",
          // ... other colors
        },
      },
    ],
  },
}
```

### Breakpoints
Add custom breakpoints in `tailwind.config.js`:
```javascript
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      // ... default breakpoints
      '3xl': '1600px',
    }
  }
}
```

## 📦 Tech Stack

- **[SvelteKit](https://kit.svelte.dev/)** - Full-stack web framework
- **[TailwindCSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[DaisyUI](https://daisyui.com/)** - Component library for TailwindCSS
- **[Lucide Svelte](https://lucide.dev/)** - Beautiful & consistent icons
- **[TypeScript](https://www.typescriptlang.org/)** - Type safety
- **[Vite](https://vitejs.dev/)** - Fast build tool

## 🤝 Contributing

This is a skeleton framework meant to be customized for your projects. Feel free to:

1. Fork this repository
2. Customize it for your needs
3. Share improvements back to the community

## 📄 License

This project is open source and available under the [MIT License](LICENSE).

## 🆘 Support

- Check the example pages for common patterns
- Review the comprehensive comments in the code
- Open an issue for bugs or feature requests

---

**Happy building!** 🎉

Use this skeleton as your starting point for creating beautiful, responsive, and accessible web applications.