Grille Responsive

tu as essayé de mettre un margin?

Il me semble que si je mets un margin ça va faire bugger tout le côté "responsive", non ?

oui dsl j'ai pas rélféchie ^^ essaie le padding, c'est une marge interieur ca devrai etre mieux

T'inquiète ;)
Je mets un padding par rapport à quel élément ?

Parce-que quand je mets un padding-right: 5px; sur toutes les colonnes voilà ce que j'obtiens :
(https://gyazo.com/08ee75c8ede71d263d12c337d3ae76a8)

et si tu met un padding: 2px

Question : quelle est la différence entre les medias queries 640 et 1040px à part le nom des classes ?

Vas voir le tutoriel sur le site pour comprendre Jeremy: http://www.grafikart.fr/tutoriels/html-css/grille-responsive-css-498
Sinon, pour résumer, ça permet de fixer différentes règles pour les écrans de petite, moyenne ou grande taille, donc par exemple pour une div avec les classes col-12, col-m6 et col-l9, elle apparaîtra sur les écrans de petite taille à 100%, 50% sur les écrans de taille moyenne, et 75% sur ceux ayant une taille grande.
Defy, ça ne changera rien :/

Je comprends bien Yohan, seulement il n'y a aucune différence entre les 2 medias queries à part le nom des classes. Alors qu'avec col-(1 à 12), il y a un float en plus. Les autres, dans les medias queries, aucune différence et présente les mêmes width.

Oui, car je mettrai sur chaque div en premier la classe col-1 à col-12, puis les col-l et col-m, mais je ne vois pas où tu veux en venir?

Je dois surement mal exprimer. En gros, que tu mettes <div class="col-m7"> ou <div class="col-l7">, ca revient au même car le même width dans les 2 medias queries. La seule différence est le nom que tu lui donnes. D'où ma question, si cela ne change rien, pourquoi créer un duplicata du media querie ? Autant garder juste le col-m* qui gèrera du min-640px à plus !

Que je mette ?

ah super.. il m'a enlevé mon code. Donc je reprends ma phrase : Je dois surement mal exprimer. En gros, que tu mettes

<div class="col-m7"> ou <div class="col-l7">

Ça revient au même car le même width dans les 2 medias queries (.col-m7 { width: 58.3333%; } et .col-l7 { width: 58.3333%; }). La seule différence est le nom que tu lui donnes. D'où ma question, si cela ne change rien, pourquoi créer un duplicata du media querie ? Autant garder juste le col-m* qui gèrera du min-width: 640px et plus ! Et enlever ça :

@media only screen and (min-width: 1040px) {
    .l-hide { display: none; }
    .col-l1 { width: 8.3333%; }
    .col-l2 { width: 16.6666%; }
    .col-l3 { width: 25%; }
    .col-l4 { width: 33.3333%; }
    .col-l5 { width: 41.6666%; }
    .col-l6 { width: 50%; }
    .col-l7 { width: 58.3333%; }
    .col-l8 { width: 66.6666%; }
    .col-l9 { width: 75%; }
    .col-l10 { width: 83.3333%; }
    .col-l11 { width: 91.6666%; }
    .col-l12 { width: 100%; }
}

P.S : je précise que je ne critique en rien ton code, c'est seulement pour comprendre. Ce n'est pas la première fois que je vois ça et je me suis toujours posé la question. Le CSS pour col-m et col-l sont identiques sauf leurs noms, alors que col-(1-12) comporte une différence :

{ float: left; position: relative; min-height: 1px; }

J'ai suivi le tutoriel moi ! :P

Oui, moi aussi. lol Bref, on va attendre de voir si un membre plus qualifié peut nous répondre.

Ouaip!
Alors, j'ai un peu avancé: j'ai créé une div ayant la classe "form", et j'ai mit un padding: 5px sur la classe "form", un dernier problème: https://gyazo.com/a9a63359b997c606f9593972dcf18410

Et voici mon css pour l'instant:

/*________________________________________*/
/*  GENERAL RULES                         */
/*________________________________________*/

* { box-sizing: border-box; }
body { margin: 0; padding: 15px; font-family: sans-serif; }
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 { float: left; position: relative; min-height: 1px; }
.container { padding: 10px; }
.row { width: 100%; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }
.form { padding: 5px; }

/*________________________________________*/
/* NORMAL SCREENS (OTHER SCREEN SIZE)     */
/*________________________________________*/

.hide { display: none; }
.col-1 { width: 8.3333%; }
.col-2 { width: 16.6666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333%; }
.col-5 { width: 41.6666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333%; }
.col-8 { width: 66.6666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%; }
.col-12 { width: 100%; }

/*________________________________________*/
/* MEDIUM SCREENS (MIN: 640PX)            */
/*________________________________________*/

@media only screen and (min-width: 640px) {
    .col-m1,
    .col-m2,
    .col-m3,
    .col-m4,
    .col-m5,
    .col-m6,
    .col-m7,
    .col-m8,
    .col-m9,
    .col-m10,
    .col-m11,
    .col-m12 { float: left; position: relative; min-height: 1px; }

    .m-hide { display: none; }
    .col-m1 { width: 8.3333%; }
    .col-m2 { width: 16.6666%; }
    .col-m3 { width: 25%; }
    .col-m4 { width: 33.3333%; }
    .col-m5 { width: 41.6666%; }
    .col-m6 { width: 50%; }
    .col-m7 { width: 58.3333%; }
    .col-m8 { width: 66.6666%; }
    .col-m9 { width: 75%; }
    .col-m10 { width: 83.3333%; }
    .col-m11 { width: 91.6666%; }
    .col-m12 { width: 100%; }

/*________________________________________*/
/* LARGE SCREENS (MIN: 1040)              */
/*________________________________________*/

@media only screen and (min-width: 1040px) {
    .col-l1,
    .col-l2,
    .col-l3,
    .col-l4,
    .col-l5,
    .col-l6,
    .col-l7,
    .col-l8,
    .col-l9,
    .col-l10,
    .col-l11,
    .col-l12 { float: left; position: relative; min-height: 1px; }

    .l-hide { display: none; }
    .col-l1 { width: 8.3333%; }
    .col-l2 { width: 16.6666%; }
    .col-l3 { width: 25%; }
    .col-l4 { width: 33.3333%; }
    .col-l5 { width: 41.6666%; }
    .col-l6 { width: 50%; }
    .col-l7 { width: 58.3333%; }
    .col-l8 { width: 66.6666%; }
    .col-l9 { width: 75%; }
    .col-l10 { width: 83.3333%; }
    .col-l11 { width: 91.6666%; }
    .col-l12 { width: 100%; }
}

grid.css

input {
    margin: 2px 0;
    width: 100%;
    height: 35px;
    padding-left: 5px;
}

style.css

C'est normale que les width soit les meme, que ton device il fase 30000000 px ou 20 px col 7 represente 58.3333% de la width total donc il n'y as aucune erreur dans les media query

Alors pourquoi créer un autre media querie pour 1040px si il a la même fonctionne que le 640px et n'apport rien de plus ? Autant laisser le min-width 640px et ne pas créer le min-with 1040px. En fait, je ne dis pas qu'il y a une erreur mais un doublon.

On a une plus grande maîtrise des choses tout simplement (même si je ne sais pas si je vais réellement l'utiliser, si un jour j'en ai besoin il sera là. Bon au pire ça n'est pas le sujet! :p

certe elle font la meme chose mais en aucun cas c'est un doublon, c'est un break point pour le coté responsive.

Comment tu fait pour definir des actions differentes selon les largeur d'ecran? si il faut sur le 640 tu veut un col-10 et sur le 1040 tu veut un col-11 tu fait comment si tu n'as pas pensé a ce break point?

regarde le code de bootstrap et sa grille, tu verra, c'est du doublon npartous mais c'est ca qui te permet de gérer les break point.

J'en profite pour poser une autre question, puisque le CSS n'est pas vraiment mon point fort, comment aligner une DIV à droite ou à gauche ?

@defy : selon son grid css, tu as 3 vues à traiter : les mobiles en premier, puis les tablettes et ensuites les desktops. Les deux dernières vues sont traitées par les medias queries avec min-width. Toujours selon le code présenté ici, nous avons les deux medias queries (donc breakpoint) qui sont identiques, spécifient la même chose. Le dernier breakpoint n'apporte rien de nouveau, la seule différence dans le nom des classes (col-mx à col-lx). Donc pour résumer, si il sont identiques, que tu aies un écran de 640px (premier breakpoint pris en compte ou un écran de 1400px (premier et deuxième breakpoint pris en compte), seul le premier media querie min-width de 640px est utile !

Je rappelle le code concerné :

/*________________________________________*/
/* MEDIUM SCREENS (MIN: 640PX)            */
/*________________________________________*/

@media only screen and (min-width: 640px) {
    .m-hide { display: none; }
    .col-m1 { width: 8.3333%; }
    .col-m2 { width: 16.6666%; }
    .col-m3 { width: 25%; }
    .col-m4 { width: 33.3333%; }
    .col-m5 { width: 41.6666%; }
    .col-m6 { width: 50%; }
    .col-m7 { width: 58.3333%; }
    .col-m8 { width: 66.6666%; }
    .col-m9 { width: 75%; }
    .col-m10 { width: 83.3333%; }
    .col-m11 { width: 91.6666%; }
    .col-m12 { width: 100%; }

/*________________________________________*/
/* LARGE SCREENS (MIN: 1040)                 */
/*________________________________________*/

@media only screen and (min-width: 1040px) {
    .l-hide { display: none; }
    .col-l1 { width: 8.3333%; }
    .col-l2 { width: 16.6666%; }
    .col-l3 { width: 25%; }
    .col-l4 { width: 33.3333%; }
    .col-l5 { width: 41.6666%; }
    .col-l6 { width: 50%; }
    .col-l7 { width: 58.3333%; }
    .col-l8 { width: 66.6666%; }
    .col-l9 { width: 75%; }
    .col-l10 { width: 83.3333%; }
    .col-l11 { width: 91.6666%; }
    .col-l12 { width: 100%; }
}

Je ne vois aucune différence, aucun ajout ou modification de code à part les m qui se sont transformés en l. Perso, je préfère indiquer dans mon code une classe avec un col-4 par exemple et ce n'est que le CSS qui gère la taille de la colonne en fonctionne des devices et pas surcharger de classes pour différentes tailles d'écrans. Ainsi, si la col-4 ne peut pas être gérée pour un petit écran, c'est au CSS de spécifier que le width sera de 100%. Pour une tablette, witdh 50% et pour un desktop, on peut enfin lui donner sa vraie taille.

C'est ma logique biensûre, mais je voulais comprendre quel est l'intérêt de doubler le code si il n'apporte rien au breakpoint précédent. Le mieux serait de tester en supprimant le dernier breakpoint et voir si ça change quelque chose que tu sois à 640px ou plus de 1040px.

et si sur un ecran 1040 il veut du col-10 et sur un 640 il veut du col-5 il fait comment?
640 x 960 c'est la resolution d'un iphone 4 donc pour toi la mise en page sur un ecran de mobile et la meme que pour un ecran de desktop?

je préfère indiquer dans mon code une classe avec un col-4 par exemple et ce n'est que le CSS qui gère la taille de la colonne en fonctionne des devices et pas surcharger de classes pour différentes tailles d'écrans. Ainsi, si la col-4 ne peut pas être gérée pour un petit écran, c'est au CSS de spécifier que le width sera de 100%. Pour une tablette, witdh 50% et pour un desktop, on peut enfin lui donner sa vraie taille.

j'aimerais bien voir le code css pour ce raisonnement ca m'interesse ( c'est pas un troll hein )

et si sur un ecran 1040 il veut du col-10 et sur un 640 il veut du col-5 il fait comment?

Je me suis posé la même question hier soir. Et me suis dit que c'est peut être la seule raison de dupliquer le code pour faire un col-mx ou col-lx.

Voilà rapidement ce que ça peut donner :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Exemple</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="row"><div class="col-1"></div></section>
    <section class="row"><div class="col-2"></div></section>
    <section class="row"><div class="col-3"></div></section>
    <section class="row"><div class="col-4"></div></section>
    <section class="row"><div class="col-5"></div></section>
    <section class="row"><div class="col-6"></div></section>
    <section class="row"><div class="col-7"></div></section>
    <section class="row"><div class="col-8"></div></section>
    <section class="row"><div class="col-9"></div></section>
    <section class="row"><div class="col-10"></div></section>
    <section class="row"><div class="col-11"></div></section>
    <section class="row"><div class="col-12"></div></section>
</body>
</html>

/*________________________________________*/
/*  GENERAL RULES                         */
/*________________________________________*/

* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: sans-serif; }

/*________________________________________*/
/* SMALL SCREENS (MIN: 1040)              */
/*________________________________________*/

.row { padding: 10px; width: 100%; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 100%;
    background-color: #F1F4F6;
    height: 20px;
    margin-bottom: 10px;
}

.hide { display: none; }

/*________________________________________*/
/* MEDIUM SCREENS (MIN: 640PX)            */
/*________________________________________*/

@media only screen and (min-width: 640px) {
    /* .hide n'est pas à définir car déjà sur display:none */
    .col-1, .col-2, .col-3, .col-4, .col-5 { width: 50%; }
    .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width: 100%; }
    /* .col-12 n'est pas à définir car déjà à 100% */
}

/*________________________________________*/
/* LARGE SCREENS (MIN: 1040)              */
/*________________________________________*/

@media only screen and (min-width: 1040px) {
    /* .hide n'est pas à définir car déjà sur display:none */
    .col-1 { width: 8.3333%; }
    .col-2 { width: 16.6666%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.3333%; }
    .col-5 { width: 41.6666%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.3333%; }
    .col-8 { width: 66.6666%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.3333%; }
    .col-11 { width: 91.6666%; }
    /* .col-12 n'est pas à définir car déjà à 100% */
}

Le seul hic est qu'on ne gère plus correctement pour un petit et moyen écran. C'est 100% ou 50%. Je vais continuer de réfléchir au problème car pour moi, le HTML doit rester sémantique et non surcharger de classe et c'est le CSS qui doit gérer les différents affichages.

j'aimerais bien voir le code css pour ce raisonnement ca m'interesse ( c'est pas un troll hein )

Ne t'en fait pas, je suis là aussi pour discuter, débattre et comprendre. Je trouve ça juste dommage de devoir utiliser class="hide col-m3 col-l4" pour gérer les différentes tailles.

Quand tu analyse le code de bootstrap, j'ai pas eu le temps de regardé foundation, la grille se répète toujours avec juste une lettre qui change, ca permet d'avoir toute la gestion des layout au meme endroit plus facilement.

pour moi, le HTML doit rester sémantique et non surcharger de classe et c'est le CSS qui doit gérer les différents affichages.

je suis entièrement d'accord avec toi, ca permet une meilleur maintenabilité du code ca c'est sur.

Apres perso, le css je trouve ca chiant comme language, je trouve pas ca propre et du coup je m'en fou un peut. faudrais que je change cte vision un peut ^^

Je reviens à la charge ! lol

J'ai bien réfléchi au côté sémantique du html et de la présentation par le css. Comment faire en sorte de pouvoir gérer plusieurs colonnes en fonction de l'affichage. Comment éviter ceci : class="col-xs-12 col-sm-6 col-md-4 col-lg-3". Ce qui suit revient exactement au même, mais condensé, sans surcharger de classe :

.row {
    width:  calc(100% - 20px);
    padding: 10px;
    margin: auto;
}
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }

[class*="col-"] {
    float: left;
    position: relative;
    min-height: 1px;
    background-color: #F1F4F6;
    height: 20px;
    width:  calc(100% - 20px);
    margin: 0 10px 10px;
}

.hide { display: none; }

@media only screen and (min-width: 640px) {
    [class*="-m-3"]{
        width: calc(100% * 3 / 12 - 20px);
    }
    [class*="-m-9"]{
        width: calc(100% * 9 / 12 - 20px);
    }
}
@media only screen and (min-width: 1040px) {
    [class*="-l-4"]{
        width: calc(100% * 4 / 12 - 20px);
    }
    [class*="-l-8"]{
        width: calc(100% * 8 / 12 - 20px);
    }
}

Pour comprendre calc(), je vous renvoie sur cet article.

Côté html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Exemple</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="row">
        <div class="col-12-m-3-l-4"></div>
        <div class="col-12-m-9-l-8"></div>
    </section>
</body>
</html>

Ainsi, si en tablette, vous ne voulez créer que 6 ou 8 ou 10 colonnes, il ne faudra modifier que le width avec la division. Cela marche aussi pour mobile ou desktop. Le code est personnellement plus propre côté html avec moins de classe et tout aussi compréhensif.

Ceci n'est pas mon idée, mais un remix de KNACSS sur le système de grillade.css. Je préfère le préciser.

j'avait vue deja cette idée, mais etant pas trop callé en css ( js je t'aime ^^ ) je ne me suis jamais intéréssé plus que ca. ca peut etre intéréssant en effet de rélféchir de cette manière. ca rend le HTML moin pourrie.

Tu traites le css avec le js ? J'avoue ne pas connaitre le js malheureusement, je suis vraiment à l'arrache sur cette techno..

ben pas du tous ^^ je fait du serveur et je fait de la gestion d'evenement avec du pubsub ( publish suscrib ) un design patern js je manipule pas le dom réelement, et si je le manipule je rajoute des element qui sont styliser par mon pote qui fait du css

J'ai toujours du mal à comprendre la fonction calc() vous avez un tuto pour l'apprendre?