Initial Commit
This commit is contained in:
openhands
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
node_modules
|
||||
.browser_screenshots
|
||||
.vscode
|
||||
|
||||
# Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
/.svelte-kit
|
||||
/build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.test
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
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.
|
||||
3463
package-lock.json
generated
Normal file
3463
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "responsive-grid-skeleton",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"description": "A clean, minimal skeleton for building responsive, grid-based websites with SvelteKit, TailwindCSS, and DaisyUI",
|
||||
"keywords": ["svelte", "sveltekit", "tailwindcss", "daisyui", "responsive", "grid", "skeleton", "framework"],
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^6.1.0",
|
||||
"@sveltejs/kit": "^2.43.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"daisyui": "^5.1.27",
|
||||
"postcss": "^8.5.6",
|
||||
"svelte": "^5.39.5",
|
||||
"svelte-check": "^4.3.2",
|
||||
"tailwindcss": "^3.4.18",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-svelte": "^0.544.0"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
35
src/app.css
Normal file
35
src/app.css
Normal file
@@ -0,0 +1,35 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom styles for the games shop */
|
||||
@layer components {
|
||||
.card-hover {
|
||||
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.btn-primary-custom {
|
||||
@apply btn btn-primary hover:btn-primary-focus;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-base-200;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-primary rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsl(var(--p) / 0.8);
|
||||
}
|
||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
13
src/app.html
Normal file
13
src/app.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="gamestore">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GameHub - Your Local Games Shop</title>
|
||||
<meta name="description" content="Your local destination for board games, card games, and gaming events" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" class="min-h-screen bg-base-100">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
171
src/routes/+layout.svelte
Normal file
171
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,171 @@
|
||||
<!--
|
||||
RESPONSIVE GRID LAYOUT FRAMEWORK
|
||||
|
||||
This layout provides a foundation for building responsive, grid-based websites.
|
||||
|
||||
KEY RESPONSIVE BREAKPOINTS (TailwindCSS):
|
||||
- sm: 640px and up (small tablets)
|
||||
- md: 768px and up (tablets)
|
||||
- lg: 1024px and up (laptops)
|
||||
- xl: 1280px and up (desktops)
|
||||
- 2xl: 1536px and up (large desktops)
|
||||
|
||||
GRID LAYOUT PATTERNS:
|
||||
- Mobile-first approach: Start with single column, expand upward
|
||||
- Use grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 for responsive columns
|
||||
- Use col-span-full for full-width elements across all columns
|
||||
- Use col-span-2 lg:col-span-3 for elements that span multiple columns
|
||||
|
||||
CONTAINER PATTERNS:
|
||||
- container mx-auto px-4: Centered container with responsive padding
|
||||
- max-w-7xl mx-auto: Custom max-width container
|
||||
- w-full: Full width within parent
|
||||
|
||||
SPACING PATTERNS:
|
||||
- gap-4 md:gap-6 lg:gap-8: Responsive grid gaps
|
||||
- p-4 md:p-6 lg:p-8: Responsive padding
|
||||
- space-y-4 md:space-y-6: Responsive vertical spacing
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import { Menu, X } from 'lucide-svelte';
|
||||
|
||||
let mobileMenuOpen = $state(false);
|
||||
|
||||
function toggleMobileMenu() {
|
||||
mobileMenuOpen = !mobileMenuOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
MAIN LAYOUT STRUCTURE
|
||||
- min-h-screen: Ensures full viewport height
|
||||
- bg-base-200: DaisyUI background color that adapts to theme
|
||||
-->
|
||||
<div class="min-h-screen bg-base-200">
|
||||
|
||||
<!--
|
||||
RESPONSIVE NAVIGATION
|
||||
- Hidden on mobile (lg:flex), shows hamburger menu instead
|
||||
- Full navigation on desktop screens
|
||||
-->
|
||||
<nav class="bg-base-100 shadow-lg">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
|
||||
<!-- Logo/Brand -->
|
||||
<a href="/" class="text-2xl font-bold text-primary">
|
||||
Skeleton
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation (hidden on mobile) -->
|
||||
<div class="hidden lg:flex space-x-8">
|
||||
<a href="/" class="text-base-content hover:text-primary transition-colors">
|
||||
Home
|
||||
</a>
|
||||
<a href="/about" class="text-base-content hover:text-primary transition-colors">
|
||||
About
|
||||
</a>
|
||||
<a href="/contact" class="text-base-content hover:text-primary transition-colors">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button (visible on mobile only) -->
|
||||
<button
|
||||
class="lg:hidden btn btn-ghost btn-square"
|
||||
onclick={toggleMobileMenu}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{#if mobileMenuOpen}
|
||||
<X class="h-6 w-6" />
|
||||
{:else}
|
||||
<Menu class="h-6 w-6" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation Menu (toggleable) -->
|
||||
{#if mobileMenuOpen}
|
||||
<div class="lg:hidden border-t border-base-300">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||||
<a href="/" class="block px-3 py-2 text-base-content hover:bg-base-200 rounded">
|
||||
Home
|
||||
</a>
|
||||
<a href="/about" class="block px-3 py-2 text-base-content hover:bg-base-200 rounded">
|
||||
About
|
||||
</a>
|
||||
<a href="/contact" class="block px-3 py-2 text-base-content hover:bg-base-200 rounded">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
MAIN CONTENT AREA
|
||||
- flex-1: Takes remaining space between header and footer
|
||||
- This is where page content will be rendered
|
||||
-->
|
||||
<main class="flex-1">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!--
|
||||
RESPONSIVE FOOTER
|
||||
- Uses grid layout that adapts from 1 column on mobile to 3 columns on desktop
|
||||
- Demonstrates responsive grid patterns
|
||||
-->
|
||||
<footer class="bg-base-300 text-base-content mt-auto">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
|
||||
<!--
|
||||
RESPONSIVE GRID EXAMPLE
|
||||
- grid-cols-1: Single column on mobile
|
||||
- md:grid-cols-2: Two columns on tablets
|
||||
- lg:grid-cols-3: Three columns on desktop
|
||||
- gap-8: Consistent spacing between grid items
|
||||
-->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Footer Column 1 -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Navigation</h3>
|
||||
<nav class="flex flex-col space-y-2">
|
||||
<a href="/" class="link link-hover">Home</a>
|
||||
<a href="/about" class="link link-hover">About</a>
|
||||
<a href="/contact" class="link link-hover">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Footer Column 2 -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Information</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p>This is a skeleton framework for responsive grid layouts.</p>
|
||||
<p>Built with SvelteKit, TailwindCSS, and DaisyUI.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Column 3 (hidden on mobile, shows on tablet+) -->
|
||||
<div class="hidden md:block">
|
||||
<h3 class="font-semibold mb-4">Framework</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p>Mobile-first responsive design</p>
|
||||
<p>Grid-based layout system</p>
|
||||
<p>Accessible components</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Bottom -->
|
||||
<div class="divider"></div>
|
||||
<div class="text-center text-sm">
|
||||
<p>© 2024 Responsive Grid Skeleton. Built for scalable web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
327
src/routes/+page.svelte
Normal file
327
src/routes/+page.svelte
Normal file
@@ -0,0 +1,327 @@
|
||||
<!--
|
||||
RESPONSIVE GRID EXAMPLES PAGE
|
||||
|
||||
This page demonstrates various responsive grid patterns and best practices.
|
||||
Use these patterns as templates for building responsive layouts.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Grid, Layout, Smartphone, Tablet, Monitor } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Responsive Grid Skeleton</title>
|
||||
<meta name="description" content="A skeleton framework for responsive, grid-based web layouts" />
|
||||
</svelte:head>
|
||||
|
||||
<!--
|
||||
HERO SECTION
|
||||
- Full-width hero with centered content
|
||||
- Responsive padding and text sizes
|
||||
-->
|
||||
<section class="bg-gradient-to-br from-primary to-secondary text-primary-content">
|
||||
<div class="container mx-auto px-4 py-16 md:py-24">
|
||||
<div class="text-center max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-6">
|
||||
Responsive Grid Framework
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 opacity-90">
|
||||
A clean, minimal skeleton for building responsive, grid-based websites with SvelteKit, TailwindCSS, and DaisyUI.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="btn btn-accent btn-lg">Get Started</button>
|
||||
<button class="btn btn-outline btn-lg">View Examples</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
FEATURES SECTION
|
||||
- Responsive grid: 1 column on mobile, 2 on tablet, 3 on desktop
|
||||
- Equal height cards using grid
|
||||
-->
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Framework Features</h2>
|
||||
<p class="text-lg text-base-content/70 max-w-2xl mx-auto">
|
||||
Built with modern web technologies and responsive design principles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
RESPONSIVE FEATURE GRID
|
||||
- grid-cols-1: Single column on mobile (default)
|
||||
- md:grid-cols-2: Two columns on tablets (768px+)
|
||||
- lg:grid-cols-3: Three columns on desktop (1024px+)
|
||||
- gap-8: Consistent spacing between items
|
||||
-->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Feature Card 1 -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<div class="mx-auto mb-4 p-3 bg-primary/10 rounded-full w-fit">
|
||||
<Smartphone class="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 class="card-title justify-center">Mobile First</h3>
|
||||
<p>Designed with mobile-first responsive principles for optimal performance on all devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 2 -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<div class="mx-auto mb-4 p-3 bg-secondary/10 rounded-full w-fit">
|
||||
<Grid class="h-8 w-8 text-secondary" />
|
||||
</div>
|
||||
<h3 class="card-title justify-center">Grid System</h3>
|
||||
<p>Flexible CSS Grid and Flexbox layouts that adapt seamlessly across breakpoints.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 3 -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<div class="mx-auto mb-4 p-3 bg-accent/10 rounded-full w-fit">
|
||||
<Layout class="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 class="card-title justify-center">Clean Code</h3>
|
||||
<p>Well-documented, semantic HTML with comprehensive comments and best practices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
GRID EXAMPLES SECTION
|
||||
- Demonstrates various grid patterns
|
||||
- Shows responsive behavior at different breakpoints
|
||||
-->
|
||||
<section class="py-16 md:py-24 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Grid Layout Examples</h2>
|
||||
<p class="text-lg text-base-content/70 max-w-2xl mx-auto">
|
||||
Common responsive grid patterns you can use in your projects.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
EXAMPLE 1: ASYMMETRIC GRID
|
||||
- Main content takes 2/3 width on desktop
|
||||
- Sidebar takes 1/3 width on desktop
|
||||
- Stacks vertically on mobile
|
||||
-->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-2xl font-semibold mb-6">Asymmetric Layout (2:1 Ratio)</h3>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Main Content Area (spans 2 columns on desktop) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Main Content Area</h4>
|
||||
<p>This area spans 2 columns on desktop (lg:col-span-2) but takes full width on mobile. Perfect for main content, articles, or primary information.</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
|
||||
<div class="bg-base-200 p-4 rounded">Sub-item 1</div>
|
||||
<div class="bg-base-200 p-4 rounded">Sub-item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (spans 1 column) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Sidebar</h4>
|
||||
<p>This sidebar spans 1 column on desktop but stacks below main content on mobile.</p>
|
||||
<div class="space-y-3 mt-4">
|
||||
<div class="bg-base-200 p-3 rounded text-sm">Widget 1</div>
|
||||
<div class="bg-base-200 p-3 rounded text-sm">Widget 2</div>
|
||||
<div class="bg-base-200 p-3 rounded text-sm">Widget 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
EXAMPLE 2: EQUAL COLUMNS
|
||||
- 1 column on mobile
|
||||
- 2 columns on tablet
|
||||
- 4 columns on desktop
|
||||
-->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-2xl font-semibold mb-6">Equal Columns (1→2→4)</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-lg">Column 1</h4>
|
||||
<p>Equal width columns that adapt: 1 on mobile, 2 on tablet, 4 on desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-lg">Column 2</h4>
|
||||
<p>Perfect for product grids, team members, or feature showcases.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-lg">Column 3</h4>
|
||||
<p>Uses responsive breakpoints: md:grid-cols-2 xl:grid-cols-4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-lg">Column 4</h4>
|
||||
<p>Maintains consistent spacing with gap-6 across all breakpoints.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
EXAMPLE 3: MIXED SPANS
|
||||
- Demonstrates different column spans
|
||||
- Shows how to create complex layouts
|
||||
-->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-2xl font-semibold mb-6">Mixed Column Spans</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
|
||||
<!-- Full width header -->
|
||||
<div class="md:col-span-4">
|
||||
<div class="card bg-primary text-primary-content shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Full Width Header (col-span-4)</h4>
|
||||
<p>This element spans all 4 columns on desktop, full width on mobile.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3-column main area -->
|
||||
<div class="md:col-span-3">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Main Area (col-span-3)</h4>
|
||||
<p>Takes up 3/4 of the width on desktop. Great for primary content areas.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1-column sidebar -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-lg">Aside</h4>
|
||||
<p>1/4 width sidebar for secondary content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two half-width items -->
|
||||
<div class="md:col-span-2">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Half Width (col-span-2)</h4>
|
||||
<p>Takes up half the grid width on desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Half Width (col-span-2)</h4>
|
||||
<p>Perfect for side-by-side content sections.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
RESPONSIVE BREAKPOINTS SECTION
|
||||
- Visual guide to breakpoints
|
||||
- Shows how content adapts
|
||||
-->
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Responsive Breakpoints</h2>
|
||||
<p class="text-lg text-base-content/70 max-w-2xl mx-auto">
|
||||
Understanding how layouts adapt across different screen sizes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breakpoint indicators -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<!-- Mobile -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Smartphone class="h-12 w-12 mx-auto mb-4 text-primary" />
|
||||
<h3 class="card-title justify-center">Mobile</h3>
|
||||
<p class="text-sm">Default (0px+)</p>
|
||||
<p class="text-xs text-base-content/70">Single column layouts, stacked content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tablet -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Tablet class="h-12 w-12 mx-auto mb-4 text-secondary" />
|
||||
<h3 class="card-title justify-center">Tablet</h3>
|
||||
<p class="text-sm">md: 768px+</p>
|
||||
<p class="text-xs text-base-content/70">2-column layouts, condensed navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Monitor class="h-12 w-12 mx-auto mb-4 text-accent" />
|
||||
<h3 class="card-title justify-center">Desktop</h3>
|
||||
<p class="text-sm">lg: 1024px+</p>
|
||||
<p class="text-xs text-base-content/70">Multi-column layouts, full navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Large Desktop -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Monitor class="h-12 w-12 mx-auto mb-4 text-info" />
|
||||
<h3 class="card-title justify-center">Large</h3>
|
||||
<p class="text-sm">xl: 1280px+</p>
|
||||
<p class="text-xs text-base-content/70">Maximum columns, spacious layouts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
CALL TO ACTION SECTION
|
||||
- Simple centered content
|
||||
- Responsive button layout
|
||||
-->
|
||||
<section class="py-16 md:py-24 bg-gradient-to-r from-primary to-secondary text-primary-content">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build?</h2>
|
||||
<p class="text-xl mb-8 opacity-90 max-w-2xl mx-auto">
|
||||
Use this skeleton as your starting point for responsive, grid-based web applications.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="btn btn-accent btn-lg">Start Building</button>
|
||||
<button class="btn btn-outline btn-lg">View Documentation</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
230
src/routes/about/+page.svelte
Normal file
230
src/routes/about/+page.svelte
Normal file
@@ -0,0 +1,230 @@
|
||||
<!--
|
||||
ABOUT PAGE - EXAMPLE CONTENT LAYOUT
|
||||
|
||||
This page demonstrates how to structure content using the responsive grid system.
|
||||
Shows various layout patterns for text-heavy pages.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Code, Palette, Zap } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About - Responsive Grid Skeleton</title>
|
||||
<meta name="description" content="Learn about the responsive grid framework and its features" />
|
||||
</svelte:head>
|
||||
|
||||
<!--
|
||||
PAGE HEADER
|
||||
- Full-width header with background
|
||||
- Centered content with responsive padding
|
||||
-->
|
||||
<section class="bg-gradient-to-r from-secondary to-accent text-secondary-content">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">About This Framework</h1>
|
||||
<p class="text-xl opacity-90">
|
||||
A comprehensive guide to building responsive, accessible, and maintainable web layouts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
MAIN CONTENT SECTION
|
||||
- Two-column layout on desktop
|
||||
- Single column on mobile
|
||||
- Demonstrates content + sidebar pattern
|
||||
-->
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
|
||||
<!--
|
||||
CONTENT GRID
|
||||
- lg:grid-cols-4: 4-column grid on desktop
|
||||
- Content spans 3 columns, sidebar spans 1
|
||||
- Stacks vertically on mobile
|
||||
-->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="lg:col-span-3">
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<h2>What is This Framework?</h2>
|
||||
<p>
|
||||
This responsive grid skeleton is designed to be a starting point for modern web applications.
|
||||
It combines the power of SvelteKit's reactive framework with TailwindCSS's utility-first
|
||||
approach and DaisyUI's beautiful components.
|
||||
</p>
|
||||
|
||||
<h3>Key Principles</h3>
|
||||
<p>
|
||||
The framework is built around several core principles that ensure your websites are
|
||||
fast, accessible, and maintainable:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Mobile-First Design:</strong> All layouts start with mobile and scale up</li>
|
||||
<li><strong>Semantic HTML:</strong> Proper use of HTML5 semantic elements</li>
|
||||
<li><strong>Accessibility:</strong> ARIA labels, keyboard navigation, and screen reader support</li>
|
||||
<li><strong>Performance:</strong> Optimized for fast loading and smooth interactions</li>
|
||||
</ul>
|
||||
|
||||
<h3>Grid System Overview</h3>
|
||||
<p>
|
||||
The grid system uses CSS Grid as its foundation, providing flexible and powerful
|
||||
layout capabilities. Here are the key concepts:
|
||||
</p>
|
||||
|
||||
<!--
|
||||
NESTED GRID EXAMPLE
|
||||
- Shows how grids can be nested within content
|
||||
-->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Responsive Columns</h4>
|
||||
<p class="text-sm">
|
||||
Use classes like <code>grid-cols-1 md:grid-cols-2 lg:grid-cols-3</code>
|
||||
to create responsive column layouts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Column Spanning</h4>
|
||||
<p class="text-sm">
|
||||
Use <code>col-span-2</code>, <code>col-span-3</code>, etc. to make
|
||||
elements span multiple columns.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Component Architecture</h3>
|
||||
<p>
|
||||
The framework encourages a component-based approach where each piece of UI
|
||||
is self-contained and reusable. This makes maintenance easier and promotes
|
||||
consistency across your application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-8 space-y-6">
|
||||
|
||||
<!-- Quick Stats Card -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Quick Stats</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm">Framework Size</span>
|
||||
<span class="text-sm font-semibold">~50KB</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm">Components</span>
|
||||
<span class="text-sm font-semibold">15+</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm">Breakpoints</span>
|
||||
<span class="text-sm font-semibold">5</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm">Browser Support</span>
|
||||
<span class="text-sm font-semibold">Modern</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technology Stack -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Tech Stack</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<Code class="h-5 w-5 text-primary" />
|
||||
<span class="text-sm">SvelteKit 2.0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Palette class="h-5 w-5 text-secondary" />
|
||||
<span class="text-sm">TailwindCSS 3.4</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Zap class="h-5 w-5 text-accent" />
|
||||
<span class="text-sm">DaisyUI 5.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg">Page Sections</h3>
|
||||
<nav class="space-y-2">
|
||||
<a href="#principles" class="block text-sm link link-hover">Key Principles</a>
|
||||
<a href="#grid" class="block text-sm link link-hover">Grid System</a>
|
||||
<a href="#components" class="block text-sm link link-hover">Components</a>
|
||||
<a href="#examples" class="block text-sm link link-hover">Examples</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
FEATURES SECTION
|
||||
- Three-column grid showcasing framework features
|
||||
- Responsive: 1 column on mobile, 3 on desktop
|
||||
-->
|
||||
<section class="py-16 md:py-24 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose This Framework?</h2>
|
||||
<p class="text-lg text-base-content/70 max-w-2xl mx-auto">
|
||||
Built with developer experience and user performance in mind.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Code class="h-12 w-12 mx-auto mb-4 text-primary" />
|
||||
<h3 class="card-title justify-center">Developer Friendly</h3>
|
||||
<p>
|
||||
Clean, well-documented code with comprehensive comments explaining
|
||||
every pattern and best practice.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Palette class="h-12 w-12 mx-auto mb-4 text-secondary" />
|
||||
<h3 class="card-title justify-center">Highly Customizable</h3>
|
||||
<p>
|
||||
Built with TailwindCSS and DaisyUI, making it easy to customize
|
||||
colors, spacing, and components to match your brand.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Zap class="h-12 w-12 mx-auto mb-4 text-accent" />
|
||||
<h3 class="card-title justify-center">Performance Optimized</h3>
|
||||
<p>
|
||||
Minimal bundle size, efficient CSS, and optimized for Core Web Vitals
|
||||
to ensure fast loading times.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
283
src/routes/contact/+page.svelte
Normal file
283
src/routes/contact/+page.svelte
Normal file
@@ -0,0 +1,283 @@
|
||||
<!--
|
||||
CONTACT PAGE - FORM LAYOUT EXAMPLE
|
||||
|
||||
This page demonstrates form layouts and mixed content patterns.
|
||||
Shows how to create effective contact/form pages with the grid system.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Mail, MessageSquare, Send, Github, Twitter, Linkedin } from 'lucide-svelte';
|
||||
|
||||
let formData = $state({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
// Handle form submission here
|
||||
console.log('Form submitted:', formData);
|
||||
// Reset form or show success message
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact - Responsive Grid Skeleton</title>
|
||||
<meta name="description" content="Get in touch about the responsive grid framework" />
|
||||
</svelte:head>
|
||||
|
||||
<!--
|
||||
PAGE HEADER
|
||||
- Centered content with gradient background
|
||||
-->
|
||||
<section class="bg-gradient-to-r from-accent to-info text-accent-content">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">Get In Touch</h1>
|
||||
<p class="text-xl opacity-90">
|
||||
Have questions about the framework? Want to contribute? We'd love to hear from you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
MAIN CONTACT SECTION
|
||||
- Two-column layout: form + contact info
|
||||
- Responsive: stacks on mobile, side-by-side on desktop
|
||||
-->
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
|
||||
<!--
|
||||
CONTACT GRID
|
||||
- lg:grid-cols-3: 3-column grid on desktop
|
||||
- Form spans 2 columns, contact info spans 1
|
||||
-->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
|
||||
<!-- Contact Form (spans 2 columns on desktop) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-6">
|
||||
<MessageSquare class="h-6 w-6" />
|
||||
Send us a Message
|
||||
</h2>
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-6">
|
||||
|
||||
<!--
|
||||
FORM GRID
|
||||
- Two-column layout for name/email on desktop
|
||||
- Single column on mobile
|
||||
-->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
<span class="label-text">Name *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
bind:value={formData.name}
|
||||
placeholder="Your full name"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
<span class="label-text">Email *</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
bind:value={formData.email}
|
||||
placeholder="your.email@example.com"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="subject">
|
||||
<span class="label-text">Subject *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
bind:value={formData.subject}
|
||||
placeholder="What's this about?"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="message">
|
||||
<span class="label-text">Message *</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
bind:value={formData.message}
|
||||
class="textarea textarea-bordered h-32"
|
||||
placeholder="Tell us more about your question or feedback..."
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
<Send class="h-5 w-5" />
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Contact Info Card -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<Mail class="h-5 w-5" />
|
||||
Contact Info
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h4 class="font-semibold">Email</h4>
|
||||
<p class="text-sm text-base-content/70">hello@gridframework.dev</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Response Time</h4>
|
||||
<p class="text-sm text-base-content/70">Usually within 24 hours</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">Best For</h4>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Technical questions, bug reports, feature requests, and general feedback.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Links Card -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Follow Us</h3>
|
||||
<div class="flex gap-4">
|
||||
<a href="#" class="btn btn-circle btn-outline btn-sm">
|
||||
<Github class="h-4 w-4" />
|
||||
</a>
|
||||
<a href="#" class="btn btn-circle btn-outline btn-sm">
|
||||
<Twitter class="h-4 w-4" />
|
||||
</a>
|
||||
<a href="#" class="btn btn-circle btn-outline btn-sm">
|
||||
<Linkedin class="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-base-content/70 mt-3">
|
||||
Stay updated with the latest framework updates and tips.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Card -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Quick FAQ</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h4 class="font-semibold text-sm">Is this framework free?</h4>
|
||||
<p class="text-xs text-base-content/70">Yes, completely open source and free to use.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-sm">Can I contribute?</h4>
|
||||
<p class="text-xs text-base-content/70">Absolutely! Check our GitHub for contribution guidelines.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-sm">Browser support?</h4>
|
||||
<p class="text-xs text-base-content/70">All modern browsers (Chrome, Firefox, Safari, Edge).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
ADDITIONAL RESOURCES SECTION
|
||||
- Three-column grid with helpful resources
|
||||
- Demonstrates equal-width columns
|
||||
-->
|
||||
<section class="py-16 md:py-24 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Other Ways to Connect</h2>
|
||||
<p class="text-lg text-base-content/70 max-w-2xl mx-auto">
|
||||
Multiple channels to get help and stay informed about the framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
RESOURCES GRID
|
||||
- Equal columns: 1 on mobile, 3 on desktop
|
||||
- Perfect for showcasing multiple options
|
||||
-->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Github class="h-12 w-12 mx-auto mb-4 text-primary" />
|
||||
<h3 class="card-title justify-center">GitHub</h3>
|
||||
<p class="mb-4">
|
||||
View source code, report issues, and contribute to the project.
|
||||
</p>
|
||||
<div class="card-actions justify-center">
|
||||
<button class="btn btn-primary btn-sm">View Repository</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<MessageSquare class="h-12 w-12 mx-auto mb-4 text-secondary" />
|
||||
<h3 class="card-title justify-center">Community</h3>
|
||||
<p class="mb-4">
|
||||
Join our Discord community for real-time help and discussions.
|
||||
</p>
|
||||
<div class="card-actions justify-center">
|
||||
<button class="btn btn-secondary btn-sm">Join Discord</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body text-center">
|
||||
<Mail class="h-12 w-12 mx-auto mb-4 text-accent" />
|
||||
<h3 class="card-title justify-center">Newsletter</h3>
|
||||
<p class="mb-4">
|
||||
Get monthly updates about new features and best practices.
|
||||
</p>
|
||||
<div class="card-actions justify-center">
|
||||
<button class="btn btn-accent btn-sm">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
3
static/robots.txt
Normal file
3
static/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# allow crawling everything by default
|
||||
User-agent: *
|
||||
Disallow:
|
||||
18
svelte.config.js
Normal file
18
svelte.config.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://svelte.dev/docs/kit/integrations
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
27
tailwind.config.js
Normal file
27
tailwind.config.js
Normal file
@@ -0,0 +1,27 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('daisyui'), require('@tailwindcss/typography')],
|
||||
daisyui: {
|
||||
themes: [
|
||||
{
|
||||
gamestore: {
|
||||
"primary": "#3b82f6",
|
||||
"secondary": "#8b5cf6",
|
||||
"accent": "#06b6d4",
|
||||
"neutral": "#1f2937",
|
||||
"base-100": "#ffffff",
|
||||
"info": "#0ea5e9",
|
||||
"success": "#10b981",
|
||||
"warning": "#f59e0b",
|
||||
"error": "#ef4444",
|
||||
},
|
||||
},
|
||||
"dark",
|
||||
"light",
|
||||
],
|
||||
},
|
||||
}
|
||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// To make changes to top-level options such as include and exclude, we recommend extending
|
||||
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
|
||||
}
|
||||
11
vite.config.ts
Normal file
11
vite.config.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 12000,
|
||||
allowedHosts: true
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user