Materialize CSS · Marco Consiglio

🗺️ Cos'è Materialize — Material Design pronto all'uso

Materialize è un framework CSS/JS che implementa le linee guida Material Design di Google: ombre (elevazione), animazioni di feedback al tocco (waves effect), e componenti con un linguaggio visivo distintivo, riconoscibile e diverso dallo stile "piatto" di Bootstrap.

Come Bootstrap (guida dedicata), fornisce un sistema di grid a 12 colonne e componenti pronti — la differenza principale è ESTETICA e filosofica: Materialize predilige ombre, colori pieni e animazioni fluide seguendo uno standard di design specifico invece di uno stile neutro personalizzabile.

⚙️ Includere Materialize via CDN

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> // Materialize richiede Material Icons per molte icone integrate nei componenti <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body>  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body>

⚠️ A differenza di Bootstrap, molti componenti Materialize interattivi (select, modal, tooltip) richiedono di essere inizializzati esplicitamente con una riga JavaScript, non si attivano solo con attributi data-*: M.AutoInit() inizializza automaticamente TUTTI i componenti della pagina in un colpo solo.

🔢 Grid a 12 colonne — stessa logica di Bootstrap, nomi diversi

<div class="row"> <div class="col s12 m6 l4"> Colonna adattiva </div> </div>

Infisso	Dispositivo	Equivalente Bootstrap
`s`	Small (mobile), sempre attivo come base	`col-` (senza infisso)
`m`	Medium (tablet), da 601px	`col-md-`
`l`	Large (desktop), da 993px	`col-lg-`
`xl`	Extra Large, da 1201px	`col-xl-`

💡 col s12 m6 l4 segue lo stesso principio mobile-first già visto in Bootstrap: piena larghezza su mobile (12/12), metà su tablet (6/12), un terzo su desktop (4/12) — stesso concetto, sintassi di classe diversa (spazi invece di trattini per gli infissi).

🃏 Card ed elevazione (shadow)

<div class="card"> <div class="card-image"> <img src="copertina.jpg"> </div> <div class="card-content"> <span class="card-title">Titolo</span> <p>Testo descrittivo.</p> </div> </div> <div class="card z-depth-4"> Ombra più marcata (livello 4 su una scala 0-5) </div>

Anteprima

Titolo card

Testo descrittivo con ombra Material.

💡 z-depth-{0-5} è il sistema di "elevazione" di Material Design: numeri più alti = ombra più marcata = elemento percepito "più vicino" all'utente — usato per comunicare gerarchia visiva (un modal ha elevazione maggiore di una card normale).

🌊 Waves effect — feedback visivo al click

<button class="btn waves-effect waves-light"> Pulsante con effetto onda </button>

💡 waves-effect aggiunge automaticamente un'animazione a onda che si espande dal punto esatto del click — un dettaglio distintivo di Material Design che comunica visivamente "il tuo click è stato registrato", assente in Bootstrap.

⭕ Floating Action Button (FAB)

Anteprima

✅ Il FAB (pulsante circolare fluttuante, tipicamente in basso a destra) è un pattern distintivo di Material Design per l'azione PRIMARIA di una schermata (es. "aggiungi nuovo elemento") — non ha un equivalente diretto in Bootstrap.

📝 Input Material — campi con etichetta animata

<div class="input-field"> <input id="email" type="email"> <label for="email">Email</label> </div>

Anteprima

⚠️ A differenza di Bootstrap dove la <label> precede l'input nel markup, in Materialize la label va SEMPRE DOPO l'<input> nel codice HTML: è l'ordine CSS (tramite selettori adiacenti) che permette l'animazione dell'etichetta che "sale" sopra il campo quando questo riceve testo o focus — invertire l'ordine rompe questa animazione.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
App mobile-like	Interfacce che vogliono richiamare l'estetica di app Android native
Dashboard con FAB	Pannelli dove l'azione primaria (crea/aggiungi) è sempre accessibile e visivamente prominente
Portfolio/landing page	Card con elevazione per progetti/prodotti, waves effect sui CTA
Form di registrazione	Input Material con animazione label per un'esperienza più moderna

🎓 Esercitazioni pratiche

Griglia di card con elevazione crescente

Crea 3 card affiancate (col s12 m4), ciascuna con un diverso livello z-depth (1, 3, 5) per confrontare visivamente l'effetto dell'elevazione.

⏱ 20 min📦 1 file HTML💻 Individuale

Form di login con input Material

Costruisci un form login con due input-field (email, password) rispettando l'ordine label-dopo-input, e un pulsante con waves-effect.

⏱ 25 min📦 1 file HTML💻 Individuale

Pagina con FAB funzionante

Crea una pagina con un elenco di elementi e un FAB fisso in basso a destra che, al click, apre un alert JavaScript (in attesa di un vero modal, trattato in Componenti UI).

⏱ 20 min📦 1 file HTML💻 Individuale

Materialize CSS — Material Design per il Web

Report Quiz

🎓 Attestato di Competenze sbloccato!