- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
Zen Grids
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 |
---|---|---|
|
@include zen-grid-container; @include zen-grid-item(2, 1);
.content {
.footer1 { |
1. import des grilles zen
2. variables
item grille span 4 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