Per prima cosa dobbiamo preparare il nostro ambiente di sviluppo per lavorare in maniera efficace. Installeremo Node JS, che ci permetterà di accedere ad NPM, il suo nutrito ecosistema di plugins. Da questo procederemo con l’installazione di Gulp, un task manager moderno e funzionale, e i due plugins che ci interessano principalmente: Gulp-Sass, per la compilazione di fogli di stile scritti in Sass (Syntactically Awesome StyleSheets), e BrowserSync, che ci aiuterà a sviluppare in maniera più rapida e fornirà un web server locale sollevandoci dalla necessità di installare Apache sulla nostra macchina.
Partiamo con Node JS. Il framework può essere scaricato sul sito ufficiale del progetto: https://nodejs.org/it/
Scegliamo la versione che ci aggrada e scarichiamo l’installer. Dopo aver avviato il setup, e installato Node JS, possiamo verificare che tutto sia andato a buon fine scrivendo nel terminale:
[cci]Node -v[/cc]
che ci restituisce il numero di versione attualmente installato.
Ora che Node JS è presente sulla nostra macchina, possiamo accedere al repository NPM, letteralmente zeppo di plugins per i più svariati compiti, e installare Gulp, il task runner più comunemente usato nello sviluppo web recente.
Gulp si occupa di automatizzare una serie di task preimpostati per farci fare meno lavoro possibile e concentrarci sullo sviluppo. L’installazione di Gulp, la prima volta, deve essere eseguita globalmente; scriviamo dunque nel terminale:
[cci]npm install -g gulp[/cc]
così come per il plug-in BrowserSync:
[cci]npm install -g browser-sync[/cc]
Il flag -g installerà Gulp globalmente nel sistema. Per utilizzare Gulp nel nostro progetto occorre spostarsi dentro la directory principale in cui abbiamo deciso di lavorare e lanciare:
[cci]
npm init
[/cc]
Questo comando crea un file package.json dentro la directory, che governa l’insieme delle dipendenze di sviluppo del progetto. In seguito, installiamo Gulp come dipendenza locale:
[cci]
npm install –save-dev gulp
[/cc]
In questo modo Gulp verrà aggiunto come dipendenza di sviluppo al file package.json, grazie al flag –save-dev.
Ora possiamo procedere con l’installazione dei due plugins che ci interessano:
[cci]npm install –save-dev gulp-sass[/cc]
e
[cci]npm install –save-dev browser-sync[/cc]
Dovremmo essere ora in grado di creare e modificare il file gulpfile.js che stabilisce di quali task deve occuparsi Gulp; apriamo il nostro editor di fiducia e creiamo il file nella root del nostro progetto; la mia preferenza cade su Sublime Text 3, che offre potenti capacità di editing, è gratuito, e può essere personalizzato a piacimento, ma le alternative più comuni (Atom, Notepad++, Visual Studio Code) sono ugualmente apprezzabili.
Il contenuto del gulpfile :
[cc lang=”javascript”]
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var browserSync = require(‘browser-sync’).create();
// Gulp task for sass
gulp.task(‘sass’, function () {
gulp.src(‘components/stylesheet/**/*.scss’)
.pipe(sass().on(‘error’, sass.logError))
.pipe(gulp.dest(‘css’))
// BrowserSync watches changes
.pipe(browserSync.stream());
});
// Watchers
gulp.task(‘watch’, function() {
// Define server for browser sync
browserSync.init({
server: {
baseDir: ‘./’
}
});
gulp.watch(“components/scripts/*.js”, [‘compress’]);
gulp.watch(“components/stylesheet/**/*.scss”, [‘sass’]);
// Watch html changes and reload browser on save
gulp.watch(“*.html”).on(‘change’, browserSync.reload);
});
// Run these tasks as default
gulp.task(‘default’, [‘watch’]);
[/cc]
Senza scendere troppo nel dettaglio, abbiamo creato un task che ci permetterà di ascoltare i cambiamenti nei nostri files sass e compilare nel risultante foglio di stile css, e un altro task che imposta il server locale di browserSync (accessibile nel browser puntando a http://localhost:3000/ ) e ascolta i cambiamenti dei files html in modo da aggiornare automaticamente i browser che puntano a quell’indirizzo.
Nel gulpfile sono presenti dei path che dovremo ricreare dentro il progetto affinchè tutto funzioni. La directory “css” andrà a contenere il risultato della compilazione Sass dei fogli di stile. La directory “components” dovrà contenere due subdirectory chiamate “scripts” e “stylesheet”, dove andremo a creare i files scss e js che verranno poi processati e compilati da gulp-sass.
Creiamo e modifichiamo index.html con il minimo indispensabile, caricando il foglio di stile compilato da “css/styles.css”:
[cce lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Demo Isometric Landscape</title>
<link rel=”stylesheet” href=”css/styles.css” type=”text/css”>
</head>
<body>
</body>
</html>
[/cce]
La struttura della directory del progetto dovrebbe essere questa:
[cc]
\Demo\
index.html
gulpfile.js
package.json
css\
styles.css
components\
stylesheet\
styles.scss
scripts\
script.js
[/cc]
A questo punto possiamo fare una prova, creando un file “style.scss” dentro la directory “components/stylesheet” nel nostro editor di fiducia in cui inseriamo una semplicissima regola per verificare il corretto funzionamento del processo:
[cc lang=”css”]
html { background: #0f91b5 }
[/cc]
Tornati al prompt, possiamo avviare Gulp con il task di default e verificare che venga prodotto il file style.css dentro la directory “css”:
[cci]gulp[/cc]
Se tutto è andato per il verso giusto, verrà aperto un tab dentro il nostro browser che punta al server locale di BrowserSync, aggiornandosi automaticamente ad ogni modifica del codice. Il nostro ambiente di lavoro è pronto e possiamo cominciare lo sviluppo della nostra demo.
Cominciamo
Partiamo, ed è davvero il caso, dalla base. Per ospitare il nostro diorama isometrico, avremo bisogno di una piattaforma su cui posizionare il tutto.
Inseriamo quindi l’oggetto che vogliamo creare nel nostro html:
[cce lang=”html”]
<div id=”base_platform”></div>
[/cce]
e procediamo con la stilizzazione nel file styles.scss:
[cc lang=”css”]
#base_platform {
width: 480px;
height: 480px;
position: absolute;
top: 20%;
left: 30%;
background-color: white;
}
[/cc]
Il posizionamento assoluto ci permette di centrare l’oggetto nella pagina tramite le proprietà top e left. Stabiliamo altezza e larghezza a 480px (trattandosi di una tech-demo, e non avendo necessità di resizing, lavoreremo con misure precise al pixel) e settiamo in bianco il background-color.
A questo punto, dopo aver salvato il file, dovremmo essere in grado di vedere un quadrato bianco al centro della nostra pagina.
Applichiamo ora la prima trasformazione 3d aggiungendo allo stile di #base_platform le proprietà:
[cc lang=”css”]
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
transform-style: preserve-3d;
[/cc]
Vi rimando a https://www.w3schools.com/css/css3_3dtransforms.asp per una spiegazione più dettagliata, correlata da varie esempi, sulle trasformazioni 3d in Css3.
Brevemente, la prima proprietà ruoterà il div di 45 gradi sull’asse X e di 45 gradi sull’asse Z, ottenendo l’effetto di isometria. La regola transform “stacca” dal normale rendering della pagina l’elemento e lo tratta come un layer tridimensionale su cui operare con i vari effetti di trasformazione: rotate(), translate(), skew(), etc.
La seconda proprietà permette invece agli elementi figli del div di ereditare la trasformazione 3d scelta. Questo vale anche per le pseudo-classi dell’elemento, che ci consente di utilizzare :before e :after per creare le facce visibili della nostra piattaforma.
Sfruttando le capacità di nesting di Sass, definiamo i parametri comuni ad entrambe le facce:
per ora sappiamo che erediteranno entrambe il tipo di posizionamento e il colore del padre, e aggiungiamo le regole apposite. Inoltre, per essere visualizzate devono avere un contenuto da mostrare, quindi aggiungiamo la proprietà content passando nulla come parametro. Box-shadow, infine, darà ai pannelli laterali dei bordi interni di 2 px di un grigio a nostra scelta.
[cc lang=”css”]
#base_platform {
width: 480px;
height: 480px;
position: absolute;
top: 20%;
left: 30%;
background-color: white;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
transform-style: preserve-3d;
&:before, &:after {
position: inherit;
background-color: inherit;
content: “”;
box-shadow: inset 0 0 0 2px #b5b5b5;
}
}
[/cc]
Ora dobbiamo trasformare i pannelli laterali e posizionarli a dovere.
Creiamo nel file scss due variabili che contengano la larghezza di un lato della piattaforma, e l’altezza del pannello laterale:
[cc lang=”css”]
$platform_side: 480px;
$panel_heigth: 50px;
[/cc]
e sostituiamo dove possibile. Per l’after e il before della piattaforma, dovremo settare height, width e transform-origin, ricordandoci di invertire i valori di altezza e larghezza per l’elemento :after. Transform farà il resto, ruotando e traslando l’elemento per ottenere il nostro effetto 3d.
[cc lang=”css”]
$platform_side: 480px;
$panel_heigth: 50px;
#base_platform {
width: $platform_side;
height: $platform_side;
position: absolute;
top: 20%;
left: 30%;
background-color: white;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
transform-style: preserve-3d;
&:before, &:after {
position: inherit;
background-color: inherit;
content: “”;
box-shadow: inset 0 0 0 2px #b5b5b5;
}
&:after {
height: $platform_side;
width: $panel_heigth;
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ($platform_side);
transform-origin: left;
}
&:before {
height: $panel_heigth;
width: $platform_side;
transform: rotateX(90deg) translateX(0) translateY(-$panel_heigth) translateZ(-$platform_side);
transform-origin: top;
}
}
[/cc]
Adesso possiamo eventualmente anche modificare la dimensione della piattaforma e dei sui lati, cambiando le variabili platform_side e panel_heigth.
La nostra piattaforma è pronta per ospitare il diorama ed è arrivato il momento di creare gli edifici che ci andremo a posizionare sopra.
