Realizziamo il layout del cms

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,...