Siti flessibili con il framework 320&Up

Essere flessibili conta! Con l’entrata dell’html5 e dei css3 possiamo finalmente parlare di siti web che si adattano al dispositivo […]
Siti flessibili con il framework 320&Up

Essere flessibili conta!

Con l’entrata dell’html5 e dei css3 possiamo finalmente parlare di siti web che si adattano al dispositivo su cui vengono visualizzati. Grazie ai @mediaquery è possibile agire in base alla risoluzione dello schermo, ciò significa che possiamo avere un set di stili per le diverse risoluzioni. Ecco che entra in gioco 320&Up, un framewrok creato da Andy Clark che ci aiuta a realizzare siti partendo dalla risoluzione più piccola. Vediamo di che si tratta:

Scarichiamo 320&up

La prima cosa da fare è scaricare il framework a questo indirizzo: http://www.stuffandnonsense.co.uk/projects/320andup. Lo zip contiene due versioni del framework: con un unico foglio di stile e con più css (per le varie risoluzioni). Noi useremo la versione con un unico css, che puoi scaricare direttamente da qui.

Il pacchetto contiene diversi file, i fogli di stile si trovano nella cartella css, le immagini nella cartella img e i file javascript in quella js. Quello che ci occorre è lo style.css ed index.html

index.html

Il file è popolato da diverse inclusioni di script, ma noi ci soffermiamo sulla parte centrale, ovvero quella composta dalla struttura dove poi andranno situati i contenuti del documento html:

<header role="banner"></header>

<div class="content clearfix">
    <div role="main" class="content-main"></div>
    <div role="complementary" class="content-complementary"></div>
</div>

<footer role="contentinfo" class="clearfix"></footer>

Come puoi notare non c’è nulla di complicato, abbiamo la classica struttura di una pagina a due colonne: Testata + Contenitore Generale (che racchiude le due colonne) + Footer

style.css

Nel foglio di stile sono elencati tutti i selettori con le rispettive proprietà, che servono ad impostare il documento in uno stato di default, che ovviamente andremo a modificare dove necessario. La parte importante è situata in basso al documento, dove iniziano i media query, qui andremo ad aggiungere gli stili per le diverse risoluzioni:

@media only screen and (min-width: 480px){}
@media only screen and (min-width: 600px){}
@media only screen and (min-width: 768px){}
@media only screen and (min-width: 992px){}
@media only screen and (min-width: 1382px){}

Esempio pratico

Inseriamo dei contenuti alla pagina html, bastano dei semplici paragrafi e qualche immagine.
Successivamente interveniamo sul css per fare in modo che raggiunta una particolare risoluzione, nel nostro caso la 768px, la colonna .content-complementary risulti visibile (a basse risoluzioni è settata a display:none) e flottante sulla destra:

ecco il codice css associato:

@media only screen and (min-width: 768px){
    .content-main{width:60%;float:left;} 
    .content-complementary{width:35%; float:right; margin-left:5%; display:block;}
}

Prova la demo

Nella demo in basso potrai sicuramente godere a pieno l’esempio, basta ridimensionare la finestra del browser e vedrai l’effetto dei media query. Per concludere posso sicuramente dirti che il framework è ben organizzato, puoi gestire diverse risoluzioni come la 480, 600, 768, 992 e 1382px; poi soprattutto hai una struttura html e css già preimpostata, insomma può essere di grande aiuto per chi deve sviluppare siti in poco tempo per diversi dispositivi. Prendi un pò di confidenza con il framework e fammi sapere che ne pensi 😉

Provalo subito

Prova la demo Consulta il codice
  • Ciao ragazzi,
    vi segnalo un problemi sul vostro sito – screenshot http://goo.gl/lSMKa

    • C iao Marco, grazie mille. A quanto pare sembra essere jQuery… facciamo un po di aggiornamenti sperando di risolvere… grazie ancora per la segnalazione.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github