Bidouilleur

Les grilles CSS permettent de créer des structures de pages très rapidement, c’est ce système qui est employé dans les frameworks CSS comme blueprint ou encore 960gs.

Certaines personnes n’aiment pas ces frameworks à cause des  » kilo octets » en trop qu’ ils sont susceptibles d’amener. Voici un petit système de grille CSS compatible tous navigateurs qui devrait leurs faire changer d’avis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }
 
.column {
  float: left;
  margin: 0 10px;
  overflow: hidden;
  display: inline;
}
.row {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

Bien sur ce CSS n’est pas à lui seul un framework entier puisqu’il n’y a pas de reset CSS ou encore de style typographique..etc, mais il permet de créer la structure d’une page très simplement en évitant d’ écrire une tartine de CSS pour arriver à une structure compatible tous navigateurs.

Pour en savoir plus je vous invite à lire cet article.

Si vous êtes convaincu par ce système, voici un outil qui va vous permettre de générer votre système de grille CSS à votre convenance et toujours en moins d’ 1 Ko.

Twitter ce post

Voici une présentation plutôt bien faite sur les frameworks CSS :

Twitter ce post

Voici 3 outils qui permettent d’analyser le comportement de vos visiteurs sur vos pages, ils créent une animation ( ou vidéo ) qui reproduit les moindres fait et gestes de la souris de chaque visiteur.

Je vous rassure je ne pratique pas ces analyses sur ce blog

• Clixpy :Service gratuit pour les 10 premières captures – Démo
  Prix  : 100 crédits : $10, 300 crédits : $20 ou  500 crédits: $30

• Userfly – Service gratuit pour 10 captures /mois et payant ensuite – Prix – Démo

• (smt) – Script PHP Javascript gratuit – Démo

Twitter ce post