grid experiment

grid.css

.clearfix,
.gs-fixed,
.gs-fluid,
.gs-dist {
  zoom: 1;
}
.clearfix:after,
.gs-fixed:after,
.gs-fluid:after,
.gs-dist:after,
.clearfix:before,
.gs-fixed:before,
.gs-fluid:before,
.gs-dist:before {
  content: " ";
  display: table;
}
.clearfix:after,
.gs-fixed:after,
.gs-fluid:after,
.gs-dist:after {
  clear: both;
}
.gs-fixed {
  margin: 0 auto;
}
.gs-fluid {
  margin-left: -10px;
  margin-left: -1rem;
  margin-right: -10px;
  margin-right: -1rem;
}
.gs-fixed>[class*="unit-"],
.gs-fluid>[class*="unit-"] {
  display: inline-block;
  position: relative;
  min-height: 1px;
  margin: 0;
  float: left;
  padding-left: 10px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 1rem;
}
.gs-dist {
  margin-left: -10px;
  margin-left: -1rem;
  margin-right: -10px;
  margin-right: -1rem;
  letter-spacing: -1em;
  word-spacing: -1em;
}
.gs-dist > * {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  letter-spacing: normal;
  word-spacing: normal;
  padding-left: 10px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 1rem;
}
:root .gs-dist {
  font-size: 0px;
  text-justify: distribute-all-lines;
}
:root .gs-dist > * {
  font-size: 14px;
  font-size: 1.4rem;
}
.gs-fixed {
  width: 69.8571em;
}
.gs-fixed>.unit-1,
.gs-fixed>.unit-md-1 {
  width: 5.82143em;
}
.gs-fixed>.unit-2,
.gs-fixed>.unit-md-2 {
  width: 11.64285em;
}
.gs-fixed>.unit-3,
.gs-fixed>.unit-md-3 {
  width: 17.46428em;
}
.gs-fixed>.unit-4,
.gs-fixed>.unit-md-4 {
  width: 23.2857em;
}
.gs-fixed>.unit-5,
.gs-fixed>.unit-md-5 {
  width: 29.10713em;
}
.gs-fixed>.unit-6,
.gs-fixed>.unit-md-6 {
  width: 34.92855em;
}
.gs-fixed>.unit-7,
.gs-fixed>.unit-md-7 {
  width: 40.74998em;
}
.gs-fixed>.unit-8,
.gs-fixed>.unit-md-8 {
  width: 46.5714em;
}
.gs-fixed>.unit-9,
.gs-fixed>.unit-md-9 {
  width: 52.39283em;
}
.gs-fixed>.unit-10,
.gs-fixed>.unit-md-10 {
  width: 58.21425em;
}
.gs-fixed>.unit-11,
.gs-fixed>.unit-md-11 {
  width: 64.03568em;
}
.gs-fixed>.unit-12,
.gs-fixed>.unit-md-12 {
  width: 69.8571em;
}
.gs-fluid>.unit-md-1,
.gs-fluid>.unit-1 {
  width: 8.33333%;
}
.gs-fluid>.unit-md-2,
.gs-fluid>.unit-2 {
  width: 16.66667%;
}
.gs-fluid>.unit-md-3,
.gs-fluid>.unit-3 {
  width: 25%;
}
.gs-fluid>.unit-md-4,
.gs-fluid>.unit-4 {
  width: 33.33333%;
}
.gs-fluid>.unit-md-5,
.gs-fluid>.unit-5 {
  width: 41.66667%;
}
.gs-fluid>.unit-md-6,
.gs-fluid>.unit-6 {
  width: 50%;
}
.gs-fluid>.unit-md-7,
.gs-fluid>.unit-7 {
  width: 58.33333%;
}
.gs-fluid>.unit-md-8,
.gs-fluid>.unit-8 {
  width: 66.66667%;
}
.gs-fluid>.unit-md-9,
.gs-fluid>.unit-9 {
  width: 75%;
}
.gs-fluid>.unit-md-10,
.gs-fluid>.unit-10 {
  width: 83.33333%;
}
.gs-fluid>.unit-md-11,
.gs-fluid>.unit-11 {
  width: 91.66667%;
}
.gs-fluid>.unit-md-12,
.gs-fluid>.unit-12 {
  width: 100%;
}
.gs-dist.dist-md-1>*,
.gs-dist.dist-1>* {
  width: 100%;
}
.gs-dist.dist-md-2>*,
.gs-dist.dist-2>* {
  width: 50%;
}
.gs-dist.dist-md-3>*,
.gs-dist.dist-3>* {
  width: 33.33333%;
}
.gs-dist.dist-md-4>*,
.gs-dist.dist-4>* {
  width: 25%;
}
.gs-dist.dist-md-6>*,
.gs-dist.dist-6>* {
  width: 16.66667%;
}
.gs-dist.dist-md-12>*,
.gs-dist.dist-12>* {
  width: 8.33333%;
}

/* Skipped media queries */

markup.html

<!-- Fixed grid -->
<div class="gs-fixed">
  <div class="unit-3 unit-sm-2"></div>
  <div class="unit-9 unit-sm-10"></div>
</div>

<!-- Fluid grid -->
<div class="gs-fluid">
  <div class="unit-1 unit-xs-6">
    <div class="bg-1">1</div>
  </div>
  <div class="unit-11 unit-xs-6">
    <div class="bg-11">11</div>
  </div>
</div>

<!-- Distributed columns -->
<div class="gs-dist dist-4 dist-sm-3 dist-xs-2 dist-lg-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Bonsoir Olivier,

Je te la fais rapide, faudra m'excuser d'avance si je manque de pincettes parfois.

J'aime bien l'idée générale mais je me permets quelques remarques.

• on retrouve beaucoup de ces principes dans Suit CSS, Pure CSS (de Yahoo!) et KNACSS (pour ne pas le nommer), n'hésite pas à piocher des idées dans ces mini frameworks si ce n'est pas déjà fait
• Les bidouilles à coup de letter-spacing: -1em; et word-spacing: -1em; ne marchent pas, franchement. C'est trop aléatoire.
• gs-fluid me fais largement penser aux autogrids de KNACSS, on y retrouve pas mal de choses, mais tout en ayant la volonté d'aller plus loin, et ce n'est pas plus mal.
• à ligne 35 et 39 on retrouve un display: inline-block; puis un float: left. Quel est le but recherché sachant que float "écrase" forcément la valeur de display que tu pourrais souhaiter ?
• en toute sincérité, quand on en arrive à lire des class="gs-dist dist-4 dist-sm-3 dist-xs-2 dist-lg-6" je pense qu'il y a un problème. Pour commencer le nombre de classes ne devrait jamais ressembler à ça, et ensuite s'il faut sortir un dico pour comprendre chacune des classes c'est moyen aussi. C'est bien beau de vouloir comprimer au maximum, mais un être humain a aussi besoin de comprendre ce qu'il lit et transmet. Franchement, avec les méthodes de minification et de compression, ça ne fait pas de mal d'écrire des classes CSS "humainement lisibles" même si plus longues.

J'espère que cette première impression et ces critiques te seront constructives.

Excellente soirée :)