Zen Grids

Portrait de Jenny
Soumis par Jenny le 5 déc 2014 - 12:50

Tags:

Source: p 12 à  de http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

pour zen 7.x-5.5 http://zengrids.com/  et http://zengrids.com/help/

Ex utilisation

1ere ligne: colonne de contenu avec une sidebar de chaque coté.

code HTML ex code Sass commentaires 
<div class="container">
  <article class="content">
    Contenu pp. We like semantic HTML ordering.
  </article>
  <aside class="aside1">
    An aside.
  </aside>
  <aside class="aside2">
    Another aside.
  </aside>
  <footer class="footer1">
    A footer.
  </footer>
  <footer class="footer2">
    Another footer.
  </footer>
</div>
 
@import "zen";

$zen-column-count: 7;
$zen-gutter-width: 10px;

@include zen-grid-container;

@include zen-grid-item(2, 1);

.content {
 @include zen-grid-item(4, 3);
}

.aside2 {
 @include zen-grid-item(1, 7);
}

.footer1 {
 @include zen-clear();
 @include zen-grid-item(3, 5);
}
.footer2 {
 @include zen-grid-item(4, 1);
}

1. import des grilles zen

2. variables
def nb total de col dans la grille
taille goutiere: la moitié de chaque coté


3. mixer
appliquer le mixtin au container (grid)

appliquer ce mixtin à chaque item de grille ds container

item grille span 4 col.
 



Posion de l'item dans la 3e col

 

 

clear pour commencer une nouvelle ligne (application mixin)

Résultat (en 7 col)

1 2 3 4 5 6 7
.aside1
kjkgj lekrgj legj		 .content
kjkgj lekrgj lesrkgj  ergerg yj y		 .aside2
lm;lmsù
.footer2 .footer1

 

source: p 12 à  de http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

ajuster image et vidéos dans css est facile, en mettant largeur max à 100%  img { max-width: 100%; }

Coté performance: attention aux images en hautes résolutions - si le device ne permet pas de l'afficher