Quando si parla di framework CSS, il termine "installazione" indica semplicemente l'inserimento di tale framework all'interno del nostro progetto front-end. Per usufruire di un framework CSS, infatti, basterà scaricarlo dal sito del fornitore ed inserirlo nelle pagine HTML della nostra applicazione tramite il tag HTML <link>. In alternativa ad un file collocato localmente, per velocizzare maggiormente i tempi di caricamento, spesso la soluzione migliore consiste nell'uso di servizi di Content Delivery Network (CDN), che vengono forniti nella maggior parte dei casi dal fornitore stesso del framework o da servizi affiliati.
<-- inserimento Framework CSS, localmente o tramite CDN !-->
<link rel="stylesheet" href="urlcdn.css">
<style>
<-- utilizzo del framework css !-->
</style>Una volta installato, sarà possibile utilizzare la sintassi del framework in questione all'interno della struttura HTML e nei successivi CSS locali (che vanno collocati dopo il framework CSS) della nostra pagina.
UPrima di vedere nello specifico come utilizzare w3.css, è bene sottolineare che utilizzare un framework CSS consente allo sviluppatore, come ad esempio nel caso di jQuery per Javascript, di produrre codice CSS e risultati di qualità anche senza possedere competenze avanzate di CSS. Tuttavia, maggiore è il bagaglio informativo dello sviluppatore, maggiore sarà il controllo sul framework CSS stesso e sulla qualità del codice finale prodotto. Per questo motivo, è consigliabile, prima di avvalersi delle funzionalità di un qualsiasi framework CSS, avere delle competenze di livello intermedio-avanzato relative a CSS3 (qui la guida di HTML.it) e ad HTML5 (qui la guida di HTML.it).
Installare w3.css
Per installare w3.css nelle nostre applicazioni, abbiamo dunque due opzioni:
- includere il framework tramite servizio CDN;
- scaricare il file ed includerlo localmente.
Per includerlo tramite CDN, basta utilizzare il link fornito direttamente da w3schools:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">ed utilizzarlo nella nostra pagina HTML:
<html>
<head>
<title>w3.css demo</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<header class="w3-container w3-red">
<h1>Ciao!</h1>
<p>Contenuto testuale</p>
</header>
</body>
</html>Per includerlo localmente, occorre scaricare il pacchetto w3.css, scompattarlo, ed includere l’apposito file nella nostra locazione:
<link rel="stylesheet" href="/locale/w3.css">ed utilizzarlo nella nostra pagina HTML:
<html>
<head>
<title>w3.css demo</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="/locale/w3.css">
</head>
<body>
<header class="w3-container w3-red">
<h1>Ciao!</h1>
<p>Contenuto testuale</p>
</header>
</body>
</html>Come abbiamo visto nel paragrafo precedente, una volta inserito un framework CSS, possiamo utilizzare la sintassi dello stesso direttamente all’interno dei nostri elementi HTML, o estenderla nei nostri CSS locali. Nella prossima lezione vedremo infatti come mettere in pratica questa procedura, che ci permetterà di saggiare la potenza di w3.css.