# 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
```
### 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
```
---
## 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
Feature 1
Feature 2
Feature 3
Feature 4
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
```
**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_