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

<!-- 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)

<!-- 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

<!-- 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

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

Custom Max-Width

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

Full Width

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

📏 Spacing Patterns

Responsive Grid Gaps

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

Responsive Padding

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

Responsive Vertical Spacing

<!-- 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:

   npm install
   

3. Start development server:

   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:

<!-- ✅ 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:

<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:

<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:

module.exports = {
  // ... other config
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#your-color",
          "secondary": "#your-color",
          // ... other colors
        },
      },
    ],
  },
}

Breakpoints

Add custom breakpoints in tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      // ... default breakpoints
      '3xl': '1600px',
    }
  }
}

📦 Tech Stack

• SvelteKit - Full-stack web framework
• TailwindCSS - Utility-first CSS framework
• DaisyUI - Component library for TailwindCSS
• Lucide Svelte - Beautiful & consistent icons
• TypeScript - Type safety
• Vite - 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.

🆘 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.