Initial Commit
This commit is contained in:
openhands
243
README.md
Normal file
243
README.md
Normal file
@@ -0,0 +1,243 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user