7bcd874e32
- Add .grid-6 class for 6-column layouts - New section: Grid by Item Count with decision table - Concrete examples for 2, 4, 6 items - Anti-pattern warning: avoid 4 items in 3-col grid - Prevents empty space issues in layouts
703 lines
14 KiB
Markdown
703 lines
14 KiB
Markdown
# CSS Layout — Bootstrap e Custom
|
|
|
|
Guida per creare layout responsive con Bootstrap o CSS custom.
|
|
|
|
---
|
|
|
|
## Decisione: Bootstrap vs Custom
|
|
|
|
### Usa Bootstrap Quando:
|
|
|
|
✅ Design standard (grid, cards, buttons)
|
|
✅ Progetto veloce / MVP
|
|
✅ Cliente non richiede customizzazione estrema
|
|
✅ Team piccolo, nessun designer dedicato
|
|
|
|
### Usa Custom CSS Quando:
|
|
|
|
✅ Design altamente personalizzato
|
|
✅ Brand guidelines specifiche
|
|
✅ Layout non-standard / creativi
|
|
✅ Performance critica (no CSS unused)
|
|
|
|
---
|
|
|
|
## Bootstrap Setup
|
|
|
|
### CDN Setup
|
|
|
|
```html
|
|
<head>
|
|
<!-- Bootstrap CSS -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
>
|
|
|
|
<!-- Custom CSS (override) -->
|
|
<link rel="stylesheet" href="css/custom.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Bootstrap JS (opzionale, solo se serve JS components) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
```
|
|
|
|
### Custom CSS Override
|
|
|
|
```css
|
|
/* css/custom.css */
|
|
|
|
:root {
|
|
/* Override Bootstrap variables */
|
|
--bs-primary: #005fcc;
|
|
--bs-secondary: #6c757d;
|
|
--bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--bs-body-font-size: 1rem;
|
|
--bs-body-line-height: 1.6;
|
|
}
|
|
|
|
/* Custom styles */
|
|
.hero {
|
|
padding: 120px 0;
|
|
background: linear-gradient(135deg, #005fcc 0%, #003d99 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 12px 32px;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Responsive Design
|
|
|
|
### Breakpoints
|
|
|
|
```css
|
|
/* Mobile-first approach */
|
|
|
|
/* Mobile: default (< 768px) */
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* Tablet (≥ 768px) */
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 160px 0;
|
|
}
|
|
}
|
|
|
|
/* Desktop (≥ 1024px) */
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 32px;
|
|
}
|
|
}
|
|
|
|
/* Large Desktop (≥ 1440px) */
|
|
@media (min-width: 1440px) {
|
|
.container {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Bootstrap Grid
|
|
|
|
```html
|
|
<!-- Container -->
|
|
<div class="container">
|
|
<!-- Row -->
|
|
<div class="row">
|
|
<!-- Mobile: 1 colonna, Tablet: 2 colonne, Desktop: 3 colonne -->
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<!-- Content -->
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<!-- Content -->
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<!-- Content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Typography
|
|
|
|
### Design Tokens
|
|
|
|
```css
|
|
:root {
|
|
/* Font Families */
|
|
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-secondary: 'Georgia', serif;
|
|
|
|
/* Font Sizes (modular scale) */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
|
|
/* Font Weights */
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
|
|
/* Line Heights */
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.75;
|
|
|
|
/* Letter Spacing */
|
|
--tracking-tight: -0.025em;
|
|
--tracking-normal: 0;
|
|
--tracking-wide: 0.025em;
|
|
}
|
|
|
|
/* Base Typography */
|
|
body {
|
|
font-family: var(--font-primary);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-normal);
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
/* Headings */
|
|
h1 {
|
|
font-size: var(--text-5xl);
|
|
font-weight: var(--font-bold);
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-4xl);
|
|
font-weight: var(--font-bold);
|
|
line-height: var(--leading-tight);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--text-3xl);
|
|
font-weight: var(--font-semibold);
|
|
line-height: var(--leading-tight);
|
|
}
|
|
|
|
/* Responsive typography */
|
|
@media (max-width: 767px) {
|
|
h1 { font-size: var(--text-4xl); }
|
|
h2 { font-size: var(--text-3xl); }
|
|
h3 { font-size: var(--text-2xl); }
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Spacing System
|
|
|
|
### Scala Modulare
|
|
|
|
```css
|
|
:root {
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
--space-20: 80px;
|
|
--space-24: 96px;
|
|
}
|
|
|
|
/* Section padding */
|
|
.section-padding {
|
|
padding: var(--space-16) 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.section-padding {
|
|
padding: var(--space-24) 0;
|
|
}
|
|
}
|
|
|
|
/* Component spacing */
|
|
.card {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--space-3) var(--space-6);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Color System
|
|
|
|
### Palette
|
|
|
|
```css
|
|
:root {
|
|
/* Primary Brand Colors */
|
|
--color-primary: #005fcc;
|
|
--color-primary-dark: #003d99;
|
|
--color-primary-light: #3385ff;
|
|
|
|
/* Secondary Colors */
|
|
--color-secondary: #6c757d;
|
|
--color-secondary-dark: #5a6268;
|
|
--color-secondary-light: #868e96;
|
|
|
|
/* Neutrals */
|
|
--color-white: #ffffff;
|
|
--color-gray-50: #f9fafb;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-300: #d1d5db;
|
|
--color-gray-400: #9ca3af;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-900: #111827;
|
|
--color-black: #000000;
|
|
|
|
/* Semantic Colors */
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
/* Text Colors */
|
|
--text-primary: var(--color-gray-900);
|
|
--text-secondary: var(--color-gray-600);
|
|
--text-muted: var(--color-gray-500);
|
|
--text-inverse: var(--color-white);
|
|
|
|
/* Background Colors */
|
|
--bg-primary: var(--color-white);
|
|
--bg-secondary: var(--color-gray-50);
|
|
--bg-tertiary: var(--color-gray-100);
|
|
}
|
|
```
|
|
|
|
### Usage
|
|
|
|
```css
|
|
/* Text */
|
|
.text-primary { color: var(--text-primary); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-muted { color: var(--text-muted); }
|
|
.text-inverse { color: var(--text-inverse); }
|
|
|
|
/* Backgrounds */
|
|
.bg-primary { background-color: var(--bg-primary); }
|
|
.bg-secondary { background-color: var(--bg-secondary); }
|
|
.bg-brand { background-color: var(--color-primary); }
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--color-primary-dark);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
border: 2px solid var(--color-primary);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Component Styles
|
|
|
|
### Buttons
|
|
|
|
```css
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 32px;
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-semibold);
|
|
text-decoration: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--color-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 95, 204, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
border: 2px solid var(--color-primary);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
/* Responsive buttons */
|
|
@media (max-width: 767px) {
|
|
.btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Cards
|
|
|
|
```css
|
|
.card {
|
|
background: var(--color-white);
|
|
border-radius: 8px;
|
|
padding: var(--space-6);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--font-semibold);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.card-description {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
```
|
|
|
|
### Forms
|
|
|
|
```css
|
|
.form-group {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-weight: var(--font-medium);
|
|
margin-bottom: var(--space-2);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
font-size: var(--text-base);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: 4px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.1);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.form-error {
|
|
color: var(--color-error);
|
|
font-size: var(--text-sm);
|
|
margin-top: var(--space-1);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Layout Patterns
|
|
|
|
### Hero Section
|
|
|
|
```css
|
|
.hero {
|
|
position: relative;
|
|
padding: 120px 0;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
color: var(--color-white);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: var(--text-5xl);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: var(--text-xl);
|
|
opacity: 0.9;
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Responsive hero */
|
|
@media (max-width: 767px) {
|
|
.hero {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: var(--text-4xl);
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: var(--text-lg);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Grid Layout
|
|
|
|
```css
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.grid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.grid-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.grid-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.grid-6 {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
/* Responsive grid */
|
|
@media (max-width: 1023px) {
|
|
.grid-4 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.grid-6 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.grid-2,
|
|
.grid-3,
|
|
.grid-4,
|
|
.grid-6 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Grid by Item Count — Scegli la Griglia Corretta
|
|
|
|
**REGOLA: Usa la griglia che ospita perfettamente i tuoi elementi, senza lasciare spazi vuoti.**
|
|
|
|
| Elementi | Griglia Desktop | Griglia Tablet | Griglia Mobile | Esempio |
|
|
|----------|-----------------|----------------|----------------|---------|
|
|
| **2** | 2 colonne | 2 colonne | 1 colonna | 2 feature, 2 testimonial |
|
|
| **3** | 3 colonne | 1-3 colonne* | 1 colonna | 3 servizi, 3 benefici |
|
|
| **4** | 4 colonne → **o** 2 colonne x 2 righe | 2 colonne x 2 righe | 1 colonna | 4 features, 4 loghi clienti |
|
|
| **5** | 3+2 colonne asimmetrico → **o** 2+3 | 2+3 colonne | 1 colonna | 5 team members, 5 step |
|
|
| **6** | 3 colonne x 2 righe → **o** 6 colonne | 2 colonne x 3 righe | 1 colonna | 6 features, 6 servizi |
|
|
| **7-8** | 4 colonne x 2 righe | 2 colonne | 1 colonna | 8 loghi, 8 features |
|
|
|
|
\* *Per 3 elementi: usa 3 colonne se il contenuto è corto, 1 colonna se lungo*
|
|
|
|
**Esempi concreti:**
|
|
|
|
```html
|
|
<!-- 2 ELEMENTI: Servizi principali -->
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">Servizio 1</div>
|
|
<div class="col-12 col-md-6">Servizio 2</div>
|
|
</div>
|
|
|
|
<!-- 4 ELEMENTI: Feature grid (MEGLIO 2x2 che 3+1) -->
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-3">Feature 1</div>
|
|
<div class="col-12 col-md-6 col-lg-3">Feature 2</div>
|
|
<div class="col-12 col-md-6 col-lg-3">Feature 3</div>
|
|
<div class="col-12 col-md-6 col-lg-3">Feature 4</div>
|
|
</div>
|
|
|
|
<!-- 6 ELEMENTI: 3x2 grid (NON 3 colonne con riga incompleta) -->
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-4">Item 1</div>
|
|
<div class="col-12 col-md-6 col-lg-4">Item 2</div>
|
|
<div class="col-12 col-md-6 col-lg-4">Item 3</div>
|
|
<div class="col-12 col-md-6 col-lg-4">Item 4</div>
|
|
<div class="col-12 col-md-6 col-lg-4">Item 5</div>
|
|
<div class="col-12 col-md-6 col-lg-4">Item 6</div>
|
|
</div>
|
|
```
|
|
|
|
**Anti-pattern da evitare:**
|
|
- ❌ 4 elementi in griglia 3 colonne (lascia 1 spazio vuoto)
|
|
- ❌ 5 elementi in griglia 4 colonne (lascia 3 spazi vuoti)
|
|
- ✅ Preferisci griglia 2 colonne per 4 elementi (2x2 perfetto)
|
|
|
|
### Split Layout
|
|
|
|
```css
|
|
.split-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-12);
|
|
align-items: center;
|
|
}
|
|
|
|
.split-image {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Responsive split */
|
|
@media (max-width: 1023px) {
|
|
.split-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
.split-image {
|
|
order: -1; /* Image first on mobile */
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Utility Classes
|
|
|
|
```css
|
|
/* Display */
|
|
.d-none { display: none; }
|
|
.d-block { display: block; }
|
|
.d-flex { display: flex; }
|
|
.d-grid { display: grid; }
|
|
.d-inline-block { display: inline-block; }
|
|
|
|
/* Flexbox */
|
|
.flex-row { flex-direction: row; }
|
|
.flex-column { flex-direction: column; }
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.justify-between { justify-content: space-between; }
|
|
.align-start { align-items: flex-start; }
|
|
.align-center { align-items: center; }
|
|
.align-end { align-items: flex-end; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.gap-2 { gap: var(--space-2); }
|
|
.gap-4 { gap: var(--space-4); }
|
|
.gap-6 { gap: var(--space-6); }
|
|
.gap-8 { gap: var(--space-8); }
|
|
|
|
/* Text Alignment */
|
|
.text-left { text-align: left; }
|
|
.text-center { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
/* Spacing */
|
|
.mt-4 { margin-top: var(--space-4); }
|
|
.mb-4 { margin-bottom: var(--space-4); }
|
|
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
|
|
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
|
|
|
|
/* Visibility */
|
|
.visible { visibility: visible; }
|
|
.invisible { visibility: hidden; }
|
|
```
|
|
|
|
---
|
|
|
|
## Checklist Layout
|
|
|
|
- [ ] Mobile-first approach
|
|
- [ ] Breakpoints definiti (mobile, tablet, desktop)
|
|
- [ ] Typography scale coerente
|
|
- [ ] Spacing system modulare
|
|
- [ ] Color palette definita
|
|
- [ ] Buttons stilizzati (hover states)
|
|
- [ ] Cards con shadow e hover effect
|
|
- [ ] Forms accessibili e responsive
|
|
- [ ] Grid system funzionante
|
|
- [ ] Utility classes per layout veloci
|
|
- [ ] Test su mobile/tablet/desktop
|
|
|
|
---
|
|
|
|
_References per agency-web-developer skill_
|