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.
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
