Realizziamo il layout del cms
Per realizzare il layout responsive (cioè che si adatta allo schermo), ci sono vari modi:
-
scaricare il kit di Google per creare il template responsive per le pagine Web, lo trovate alla start kit,poi cliccare su Try a sample layout e salvare la pagina nella stessa cartella dove si è scaricato il kit.
-
se non vi piace il layout del kit di Google (il colore lo potete modificare), ma volete fare CMS più belli potete optare per bootstrap
-
altre due tecniche impegnative e che porta via tanto tempo nella modifica del layout (io sconsiglio l'uso, vi complicate la vita è basta) sono LESS e SASS
Creiamo il layout del cms:
Dopo aver scelto la tecnologia per creare il template per rendere responsive il layout potete inserire queste righe di codice:
inserite questa riga:
-
per le immagini ricordate di usare “max-weight”;
-
il font potete usare Awesome: quindi nel
Potete vedere gli esempi per usare questo tipo di font: esempi
Mentre le icone le trovate qui
Quindi nel file css inserite questo contenuto:
@media(min-width:320px) and (max-width:480px){
//qua inserite il vostro codice css per schermi da 320px a 480px
}
@media(min-width:481px) and (max-width:768px){
//qua inserite il vostro codice css per schermi da 481px a 768px
}
@media(min-width:769px) and (max-width:1200px){
//qua inserite il vostro codice css per schermi da 769px a 1200px
}
@media(min-width:1200px) {
//qua inserite il vostro codice css per schermi più grandi di 1200px
}
Io personalmente preferisco usare template già fatti è un risparmio di tempo, fare un template da zero ti porta via 3 o 4 giorni, tra trovare script Jquery e farli combaciare,...
Addirittura fare da zero tutti gli script Jquery è un lusso di pochi, le tempistiche non lo permettono.
Quindi io personalmente ho optato per un template già fatto e free che usa Awesome come Purity di Joomla, che ha un sacco di template che ti agevolano la produzione corporate, blog,...
<<< Precedente Successivo >>>