Guida [GUIDA] Responsive Grid System With List

[Biuni]

Responsive Grid System With List​

In questa guida vi illustrerò come fare a creare una griglia responsive con il solo uso di LISTE e senza le Media Query.

Potete trovare una demo qui:


Demo Responsive Grid System With List

​

Come potete vedere funziona tutto alla perfezione sia da pc che da smartphone e tablet. Tutto questo è racchiuso in due righe di codice senza l'uso ne di Framework ne di MediaQuery ne di Javascript.

Il codice CSS di questa griglia è generato da

ul {list-style: none; text-align: center;}

ul li {display: inline-block; width: 300px; height: 300px; background: #88CC88; margin: 10px; }

Il codice HTML è semplicemente

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ovviamente ogni <li></li> equivale ad una "sezione" della griglia.

Semplice no?
Questa guida è stata scritta per dimostrare che molte volte l'uso di Framework e Media Query possono essere tranquillamente evitati. Basta un pò di dimestichezza nel codice, proprio quella che con l'uso di questi framework sta andando completamente persa.


Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.

Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|​

 

[abalossa]

Bella guida anche se penso che chiunque alle prime armi si sia cimentato nel provare ad accostare 2 form abbia avuto lo stesso risultato o simile
(dico questo solo perchè è quello che mi è successo stamani xD)

 

[Luca Pavus]

Diciamo che non c'è nulla di responsive in un elenco, e di certo non è una struttura usabile in siti veri.
E' una guida a metà.

 

[Biuni]

Diciamo che non c'è nulla di responsive in un elenco, e di certo non è una struttura usabile in siti veri.
E' una guida a metà.

Si, diciamo che non è una vera e propria guida, più che altro è un "inno" al non uso di Framework quando si può tranquillamente farne a meno.

PS:

Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone,cellulari, web tv), riducendo al minimo la necessità per l'utente di ridimensionamento e scorrimento dei contenuti.

Questo elenco è responsive quindi.