[Resolu] Grilles Responsive CSS et margin ?

Hello.

Moi aussi j'ai longuement réfléchi à ce problème et j'ai décidé à la fin de piloter les marges directement à partir de mon html. Je ne sais pas si j'arrive à me faire comprendre, mais voici des exemples de classes que j'utilise:

fl-col-s-12 # Full - Sans marges.
ft-col-m-8 # First - 1ère colonne, marge à gauche.
col-m-8 # Colonne normale, marges des 2 côtés.
lt-col-l-2 # Last - Dernière colonne, marge à droite.

Dans un exemple concret, ça donnerai ça:

<div class="fl-col-s-12 ft-col-m-2">Col 1</div>
<div class="fl-col-s-12 col-m-6">Col 2</div>
<div class="fl-col-s-12 lt-col-m-4">Col 3</div>

Je sais que ça fait long comme nom de classe, mais au moins ça me permet d'avoir un total contrôle sur ma grille.

Tu peux voir mon code là > Texte du lien

PS: C'est de padding que je parle.

Bonsoir

généralement je me casse pas la tête et joue avec les div.
elles ont des padding de 10px de chaque côté donc si tu fais

<div class="col-md-4">
    <div class="col-md-12">
            1er bloc
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12">
            2nd bloc
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12">
            3ème bloc
    </div>
</div>

Ici on a 3 blocs et si je met le background sur le col-md-12, j'ai l'affichage désiré.

ça m'évite de retouché au css existant.

Bonjour a tous deux,

Avant tout merci pour vos reponses.

@MisterOccan
comme tu l’évoques ton code agis sur le padding. Ce qui n'est pas exactement mon problème, car je cherche a ajouter du margin a mes bloques et non du padding.

@Underscreen
Pas mal, je n'avais pas pense a cela... mais cela oblige a faire des div supplémentaires ce que je trouve un peu contrainiant. J'aimerai trouver une solution directement dans le systeme de grille.

Je pense etre sur la bonne voie mais pour le moment cela ne fonctionne pas xD.
Actuellement j'en suis la :

@for $z from 1 through 6 {
        @for $i from 1 through $columns {
            .w#{$i}-#{$z} { width: $i / $columns * (100% - $z * $y);
            @extend %w; 
            }   
        }
    }

$y > représente la marge des blocs en pourcentage.

L'objectif ici et d'avoir une écriture de classe comme suit dans les exemples (base 12 colonnes):
w6-2 et w6-2
w4-3 | w4-3 | w4-3
w3-4 | w4-4 | w3-4 | w2-4
... etc jusqu’à 6 car je n'aurais pas besoin de plus.

Le premier chiffre represente la taille de la colonnes et le second le nombre de colonnes sur la ligne.

Mais pour une raison que j'ignore actuellement cela ne fonctionne pas... je poursuis mes recherches et test. Si quelqu'un a une idée relative a laquelle cela ne fonctionne pas ou simplement une meilleure idée pour le code je suis preneur ;)

Merci,

EDIT : J'ai trouvé ! Bon je refait le code en mode lisible et je le poste ici si ça peut aider certain utilisateur.

Bonsoir.

@MisterOccan
comme tu l’évoques ton code agis sur le padding. Ce qui n'est pas exactement mon problème, car je cherche a ajouter du margin a mes bloques et non du padding.

Justement, avec ma méthode c'est facilement adaptable. Tu peux configurer l'espacement de tes colonne en margin ou en padding.

Dans tous les cas, content que t'ai trouvé une solution :)

Bonjour,

MisterOccan, tu as raison je souhaites utiliser ta solution sauf qu'il faut faire quelques petites adaptation pour le margin qui ne se comporte par tout a fait comme le padding.

Alors je pensais avoir trouver la solution, mais j'ai encore quelques petites petouilles... Le truc c'est que je pense savoir comment les solutionnées sauf qu'il faut que j'arrive a faire exécuter un formule a compass et je n'y arrive pas...

Je m'explique, je suis donc partie sur ta construction avec l'identification des colonnes ; en gros j'informe la navigateur pour lui dire si c'est la première colonne, la dernière ou encore une au centre. Neanmoins en fonction de ces information et du nombre de colonnes, je me retrouve avec deux variables qui impactent sur le margin de mes bloques. D'ou le besoin d'une formule pour calculer les margin.

Ci-dessous le code des colonnes centrales a modifiées:

@for $nc from 1 through 6 {
    @for $t from 1 through $nbcolonnes {
        .c#{$t}-#{$nc} { width: $t / $nbcolonnes * (100% - $nc * $marg);
        margin: 0 (#{$nc} * 2) / #{$nc} + 1);
        @extend %c; 
        }   
    }
}

Le probleme est donc sur la ligne de margin :

margin: 0 (#{$nc} * 2) / #{$nc} + 1);

qui sort ainsi apres compilation lorsque $nc=4:

margin: 0 4 * 2 / 4 + 1;

Alors que je souhaiterais avoir

margin: 0 1.5%;

EDIT :

En bidouillant un peu j'arrive a avoir mon calcule se faire, mais la valeur de sortie n'est pas en % et je ne sais pas comment la mettre... Ci dessous la bidouille, mais alors pour mettre la valeur de sortie en % je dois dire que je sèche un peu...

@for $nc from 1 through 6 {
    @for $t from 1 through $nbcolonnes {
        .c#{$t}-#{$nc} { width: $t / $nbcolonnes * (100% - $nc * $marg);
        $e : $nc * 2;
        $p : $nc + 1;
        margin-left: $e / $p;
        margin-right: $e / $p;
        @extend %c; 
        }   
    }
}

Ce qui donne avec la valeur 4

margin-left : 1.6 ;
margin-right :1.6 ;

Il faut que j'arrive a ajouter un % derrière et c'est gagne.

Bonjour a tous,

Alors finalement j'ai trouver la formule magique pour le code qui est la suivante :

@for $nc from 1 through 6 {
    @for $t from 1 through $nbcolonnes {
        .c#{$t}-#{$nc} { width: $t / $nbcolonnes * (100% - ($marg * ($nc + 1)));
        margin : 0 $marg/2 ;
        @extend %c; 
        }   
    }
}

Bien que cela fonctionne parfaitement je me suis appercu que cela présente un 'problème'. La taille de mes colonnes étant calcules en fonction de la taille disponible moins les marges, une div de 3 colonnes ne sera pas de la même taille si elle est mise avec une autre div de 9 colonnes ou alors si elle partage la largeur avec deux autres div.
Car plus le nombre de div est important moins l'espace pour les colonnes l'est.

Apres multiple test, je pense que le plus simple pour la gestion des marges tout en conservant une grille fixe est donc l'utilisation de la méthode de Underscreen en ajoutant des div supplémentaires.

Et pour la gestion des padding l'utilisation des class supplementaires de MisterOccan est parfaite.

Et merci encore pour votre aide.

Hello.

Ravi que t'aies trouvé chaussure à ton pied :D