Tra i tanti template a disposizione ne abbiamo scelto uno che si prestasse ad un esperimento: integrare media query all'interno di WebSite X5.
Il tentativo è stato quello di modificare il layout che genera il programma rendendolo responsive a risoluzioni inferiori alla larghezza fissa del sito, in questo caso 1140px.
Abbiamo impostato due breakpoint in cui avvengono queste modifiche sostanziali del layout:
- sotto i 1160px le immagini si dispongono su due colonne;
- sotto i 768px le immagini si dispongono su un'unica colonna, gli elementi dei form si dispongono uno sotto l'altro ed il menu del programma scompare e si visualizza il menu mobile.
Il template originale è rilasciato sotto licenza Creative Commons 4.0. Per quanto riguarda il nostro adattamento leggi i termini di utilizzo.
 |
| DEMO |
Il template utilizza il Google Font "Roboto". Prima di importare il progetto occorre inserire il file .ttf nella sezione "Preferenze" del programma. Oltre che da Google Font, è possibile scaricare il file dalla pagina ReadMe della demo del template online.
Questo il codice @import da noi utilizzato:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
Per personalizzazioni è necessario consultare i file custom.css, ie.css e custom.js: tutti i blocchi di codice sono commentati per permettere una facile lettura ed eventuale modifica. Si fa presente che la variazione degli oggetti all'interno della pagina, sia nel tipo che nella posizione, potrebbe comportare una revisione sostanziale delle regole CSS.
Qui il file .iwzip da scaricare: DOWNLOAD
Il template è stato testato con iPhone 4, Nokia Lumia, Samsung Galaxy Ace Style, Samsung Galaxy Tab 3 e Acer Iconia Tab.
Per problemi di visualizzazione o difficoltà incontrate nelle personalizzazioni, contattateci a questo indirizzo quellidelcucuzzolo@altervista.org oppure attraverso i commenti di questo post.
Complimenti al team MAeSI, sembra che in quel cucuzzolo la produttività e l'ingegno siano al TOP :)
RispondiEliminaGrazie Michele, che bello leggerti anche qui :)
EliminaSul cucuzzolo di sicuro c'è l'aria buona, per il resto si fa quel che si può :)
Ciao
ciao MAeSI come si importa il font nella sez. preferenze non capisco dove
Eliminagrazie Flavio.
Ciao Flavio,
Eliminanella guida del programma (versione 11) è spiegato in modo chiaro come integrare un web font.
Comunque, all'apertura del programma trovi la voce "Preferenze": al click si apre una finestra, clicchi sul tab "Web Font", quindi su "Aggiungi"; seleziona dal menu a tendina "GoogleFont" e lì carichi il file .ttf per la visualizzazione in locale e incolli il codice @import.