Progettare un layout attraverso l'utilizzo delle griglie.

Deco Grid System: nuovo approccio per creare semplici ma anche sofisticate strutture per layout in Plone e non solo Plone.

L'idea è quella di dividere la pagina in un sistema a griglie, d’altronde progettare layout con le griglie è una tecnica molto diffusa, Deco Gs è un ottimo framework per permettere ciò.

 

Rispetto ad altre soluzioni  (Es. Blueprint, 960.gs ) Deco gs presenta notevoli caratteristiche: il codice è più leggero e comprensibile, offre la possibilità di implementazione anche con layout fluidi e presenta poche e semplici regole di utilizzo come ci spiega Alexander Limi nel suo video di presentazione della Plone Conference 2009.

 

Ecco il codice d’esempio:

<div class="row">
  <div class ="cell position-0 width-4">This cell is four units wide</div>
  <div class ="cell position-4 width-12">This cell is twelve units wide</div>
</div>

La classe "row" identifica la riga, la classe "cell" la colonna.

div.position-2 {margin-left:-86,345%}
div.width-1{width:4%} 

rispettivamente le posizioni  e le dimensioni delle celle.

esempio aplicazione deco gs

A questo punto basterà impaginare i contenuti  come prevede il layout grafico, avendo cura di rispettare la dimensione massima prestabilita delle griglie a 12 o a 16 colonne.

 

Il pacchetto (deco-preview2.zip ) è scaricabile qui

 

Qualche esempio di layout dove ho utilizzato il sistema a griglie:

Associazione nazionale chirurghi ospedalieri italiana Acoi

http://www.acoi.it/regioni

Campania Beni Culturali http://www.campaniabeniculturali.it/

Share this on

Share |

On same topics

Commenti

comments powered by Disqus