Unibo Application Theme
Styleguide Unibo
Tutti i componenti sviluppati all'interno di Unibo
Styleguide Foundation
Alcuni componenti di Foundation rivisitati graficamente in stile Unibo
Il tema è versatile per cui puoi usare Sass oppure CSS e Js già compilati.
Se vuoi usare Sass e sfruttarne la modularità avrai bisogno di un compilatore, ad esempio
Gulp o Webpack.
In questo progetto, Gulp si occupa della compilazione del Sass e del Js, della compressione delle immagini e dell'aggiornamento dei file;
Webpack si occupa invece della gestione degli import e moduli Js.
Se vuoi approfondire questo argomento, leggi la nostra guida.
Per utilizzare il codice compilato di Unibo application, è sufficiente scaricare ed includere nella pagina HTML alcuni file, tra cui un file CSS, un Javascript e le immagini.
Se invece vuoi utilizzare Sass e Js non compilato, è necessaio scaricare il pacchetto completo da Github.
Una volta scaricato e decompresso il file, all’interno della cartella "css"
sarà presente un file CSS e un file Js.
Per includere il CSS all’interno del tuo progetto sarà sufficiente
aggiungere il tag <link> all’interno del tag <head>della pagina,
in questo modo:
<link rel="stylesheet" href="css/app.css">
Invece, per includere il Js all’interno del tuo progetto dovrai
aggiungere il tag <script> alla fine del <body> della pagina, in questo modo:
<script src="js/app.js">
In base alle tue esigenze, scegli un template da cui partire per lo sviluppo.
Ad esempio puoi usare il Template di base a due colonne.
Nella pagina del template troverai le informazioni sulla struttura HTML e su come implementarlo.
Il tema Unibo Application oltre a darti una struttura di base, offre anche componenti aggiuntivi.
Sono a disposizione alcuni componenti che abbiamo sviluppato nel corso degli anni.
Puoi trovare questi snippet di codice in Styleguide Unibo, raggruppati per tipologia.
Puoi anche decidere di utilizzare componenti di Foundation, alcuni di essi sono stati personalizzati sullo stile di Unibo. Puoi trovarli in Styleguide Foundation.
Copia l'html dell'elemento che vuoi utilizzare nel tuo template.
Fai attenzione che ci sia la classe CSS che contraddistinge l'elemento.
Trovi questa indicazione nella descrizione dell'elemento alla voce Classe da utilizzare.
Se stai sviluppando con Sass, includi il Sass dell'elemento nel file
app.scss.
Ad esempio:
@import "components/unibo/u_radiocard";
Trovi questa indicazione nella descrizione dell'elemento alla voce SCSS da includere.
Tutti i componenti sviluppati all'interno di Unibo
Alcuni componenti di Foundation rivisitati graficamente in stile Unibo