Material Design by Google

Material Design di Google è uno strumento che sta prendendo molto piede e, come spesso accade, le novità vengono implementate prima dal mercato estero, soprattutto gli USA, per poi arrivare in Italia. In Italia Material Design non è ancora molto diffuso. Viene utilizzato soprattutto nelle applicazioni Android e AngularJS. Infatti, AngularJS è il motore che sta alla base di Material Design.

Ma se non so usare AngularJS, allora non posso usare Material Design?

Puoi usarlo lo stesso, semplicemente andando ad applicare la versione scritta in JavaScript nativo invece di AngularJS di Material Design, che si chiama Material Design Lite.

Questa versione offre un set di strumenti che sono stati replicati dall’originale Material Design in modo da essere inclusi facilmente in progetti che non supportano AngularJS.

Download Material Design Lite

La prima cosa da fare, è scaricare il pacchetto necessario.
Puoi farlo in 5 modi, le trovi tutte elencate qui: https://www.getmdl.io/started/index.html#download

Se lo scarichi da GitHub

Scaricandolo da GitHub, le istruzioni sono molto semplici. Di seguito riporto i comandi da digitare per clonare il progetto:

# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp

Come vedi gli step necessari sono i seguenti:

  1. Clonare nella cartella preferita il progetto con il comando git clone + URL
  2. entrare nella cartella “material-design-lite” con il comando “cd”
  3. installare le dipendenze necessarie con il comando “npm install …”
  4. Creare la build dei componenti tramite il comando “gulp”

Se scarichi il pacchetto dal sito

L’installazione nel tuo tema è piuttosto facile. A dirla tutta, scaricare il pacchetto è la modalità che io trovo più semplice in assoluto. Scaricando il pacchetto, infatti, troverai pochi file che servono davvero al tuo progetto con Material Design Lite:

  1. material.js
  2. material.css

Ti basta includere questi 2 file per avere già tutto quello che ti serve per iniziare.

Se usi la versione hosted

Se devi fare semplicemente qualche test ( e hai la possibilità di essere sempre connesso ) puoi usare la versione hosted. Infatti, basta anche qui includere semplicemente i 2 file che ti servono. In aggiunta, l’esempio ci dice anche di includere il file css per includere lo schema di colore:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

Come vedi, lo schema dell’esempio è indigo + pink. Per cambiarlo, basta specificare diversi colori, quello primario e quello secondario. Lo schema è:

material.{primary}-{accent}.min.css

Per conoscere le combinazioni possibili, basta andare a questa URL: https://www.getmdl.io/customize/index.html

Se installi MDL tramite Bower

Basta digitare, nella tua shell, il seguente comando:

bower install material-design-lite --save

Nella cartella del tuo progetto, bower installerà il pacchetto nella cartella “bower_components”.
Quindi potrai includere i tuoi file in questo modo:

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Se installi MDL tramite npm

Basta digitare, nella tua shell, il seguente comando:

npm install material-design-lite --save

Nella cartella del tuo progetto, npm installerà il pacchetto nella cartella “node_modules”. Quindi potrai includere i tuoi file in questo modo:

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Iniziamo! inserisci le tue prime righe di codice

Adesso che hai incluso, nella modalità da te preferita, la libreria puoi iniziare ad inserire le prime righe di codice per vedere subito qualcosa di concreto.

Uno degli elementi più caratteristici di Material Design è il bottone con il classico effetto “raised”.
Il codice per inserirlo è il seguente:

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>

Se noti, le classi del tag button sono quelle che danno gli effetti diversi. In questo caso specifico, la classe “mdl-button–raised” da l’effetto corrispondente.

Per quanto riguarda i bottoni e tutti gli altri componenti, trovi tutti i dettagli in questa pagina: https://www.getmdl.io/components/index.html

Grid Layout

A parte tutti i componenti, che ti invito a controllare ( sono sicuro che ti divertirai molto ad usarli ), la cosa importante è imparare ad utilizzare la griglia, che diciamo è simile a quella di Twitter Bootstrap.

Di base, è simile a bootstrap. Ci sono 12 colonne e puoi specificare per ogni dispositivo quante colonne deve “utilizzare” quando arriva alla dimensione corrispondente.

Devi sapere che ogni volta che utilizzi una nuova riga, devi inserire un wrapper, cioè un div che racchiude tutto e assegnare a questo div la classe “mdl-grid”. Questo dice a MDL che stai creando un nuovo pezzo della griglia.

Le colonne all’interno, invece, sono composte da blocchi ( div ) che hanno sempre la classe “mdl-cell” e, in aggiunta, la classe che determina la larghezza della colonna, come ad esempio “mdl-cell–1-col”.

Ecco un esempio di griglia a 3 colonne:

<div class="mdl-grid">
 <div class="mdl-cell mdl-cell--4-col">4</div>
 <div class="mdl-cell mdl-cell--4-col">4</div>
 <div class="mdl-cell mdl-cell--4-col">4</div>
</div>

Devi sapere 3 cose importanti per usare correttamente la griglia:

  1. In desktop il layout ha 12 colonne
  2. In tablet il layout ha 8 colonne
  3. In smartphone il layout ha 4 colonne

Per specificare la larghezza di una colona correttamente per tutti e 3 i dispositivi, dovresti scrivere qualcosa di simile a questo esempio:

<div class="mdl-grid">
 <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">Cella 1</div>
 <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">Cella 2</div>
 <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">Cella 3</div>
</div>

Integrare MDL nel tuo tema Magento

Forse sei alle prime armi con Magento. In tal caso, voglio mostrarti come includere file JavaScript e CSS nel tuo progetto Magento. Se stai usando Magento, allora stai anche usando un tema, che potrebbe essere quello di default. Supponendo che sia il tema “Modern”, template storico di Magento, allora dovresti avere il file “page.xml” ( lo usiamo per comodità, in questo frangente ) sotto il path:

rootMagento/app/design/frontend/default/modern/layout

All’incirca alla riga 33, troverai questa stringa di testo:

<default translate="label" module="page">

Il nodo “default” sta ad indicare che tutto quello che farai qui dentro, influenzerà tutte le pagine. Infatti “default” sta per “ovunque”, in pratica. Vedrai che già altri file sono presenti e sono inseriti di default perchè sono utili al corretto funzionamento di Magento.

Dovrai scrivere queste 2 righe:

<action method="addCss"><stylesheet>css/material.css</stylesheet></action>
<action method="addItem"><type>skin_js</type><name>js/material.js</name></action>

Questo andrà a includere i file in pagina. Ovviamente, dovrai anche inserirli nei percorsi corretti,
che in questo caso, siccome usiamo il tema modern, saranno:

/skin/frontend/default/modern/css/
/skin/frontend/default/modern/js/

Conclusione

Questa era l’introduzione a Material Design Lite, con una spiegazione su come integrarlo nel tuo progetto Magento. Spero che questo tutorial sia utile e ti invito a condividerlo se pensi che possa essere utile anche ad altri. Se hai qualche dubbio o domanda, puoi scrivere un commento qui sotto!