Costruire temi con Foundation: facile, riusabile, responsive.
-
Upload
giovanni-tufo -
Category
Internet
-
view
36 -
download
0
Transcript of Costruire temi con Foundation: facile, riusabile, responsive.
![Page 1: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/1.jpg)
![Page 3: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/3.jpg)
Costruire temi con Foundation
1. Cos’è Foundation 5? 2. Cosa sono SASS e Compass? 3. Un tema base per Drupal 7 con
Foundation 5 4. Un caso concreto: il nuovo design
LUISS 5. Conclusioni
![Page 4: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/4.jpg)
Cos’è Foundation 5? Costruire temi con Foundation
![Page 5: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/5.jpg)
Cos’è Foundation 5?
Foundation 5 è un framework HTML, CSS e javascript che consente di velocizzare
il processo di creazione di layout
![Page 6: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/6.jpg)
Cos’è Foundation 5?
La griglia • 12 colonne per riga
• Mobile first • Responsive
![Page 7: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/7.jpg)
Cos’è Foundation 5?
Componenti JS • Aiuti alla navigazione
• Slider di immagini e contenuti • Elementi di form
![Page 8: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/8.jpg)
Cos’è Foundation 5?
Compatibilità con i browser
![Page 9: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/9.jpg)
Cos’è Foundation 5?
Ho bisogno di IE8: http://bit.ly/found5ie8
![Page 10: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/10.jpg)
Cosa sono SASS e Compass? Costruire temi con Foundation
![Page 11: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/11.jpg)
Cosa sono SASS e Compass?
SASS è un preprocessor CSS che estende le funzionalità dei CSS
![Page 12: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/12.jpg)
Cosa sono SASS e Compass?
Compass è un framework per la scrittura dei CSS basato su SASS
![Page 13: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/13.jpg)
Un tema base per Drupal 7 con Foundation 5
Costruire temi con Foundation
![Page 14: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/14.jpg)
Un caso concreto: il nuovo design LUISS
Costruire temi con Foundation
![Page 15: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/15.jpg)
Un caso concreto: il nuovo design LUISS
![Page 16: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/16.jpg)
Un caso concreto: il nuovo design LUISS
![Page 17: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/17.jpg)
Un caso concreto: il nuovo design LUISS
![Page 18: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/18.jpg)
Un caso concreto: il nuovo design LUISS
![Page 19: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/19.jpg)
Un caso concreto: il nuovo design LUISS
![Page 20: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/20.jpg)
Un caso concreto: il nuovo design LUISS
![Page 21: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/21.jpg)
Un caso concreto: il nuovo design LUISS
![Page 22: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/22.jpg)
Un caso concreto: il nuovo design LUISS
![Page 23: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/23.jpg)
Un caso concreto: il nuovo design LUISS
![Page 24: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/24.jpg)
Un caso concreto: il nuovo design LUISS
![Page 25: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/25.jpg)
Un caso concreto: il nuovo design LUISS
![Page 26: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/26.jpg)
Un caso concreto: il nuovo design LUISS
![Page 27: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/27.jpg)
Un caso concreto: il nuovo design LUISS
![Page 28: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/28.jpg)
Conclusioni Costruire temi con Foundation
![Page 29: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/29.jpg)
Conclusioni
• Maggiore velocità nella realizzazione grafica
• Meno problemi di compatibilità • Meno problemi di scalabilità tra
dispositivi
![Page 30: Costruire temi con Foundation: facile, riusabile, responsive.](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a85dcc1a28abcd0b8b48e9/html5/thumbnails/30.jpg)