Milligram: éléments de grille : pleine largeur sur les petits écrans, petite largeur sur les grands écrans ?

Merci d'avoir porté cela à mon attention @ mikeriley131 . J'étais sur le point de commencer à utiliser Milligram sur un projet, mais c'est une grande fonctionnalité manquante. Ce n'est pas trop difficile de l'ajouter manuellement, mais ce n'est pas le but d'un framework CSS que vous n'ayez pas besoin de le faire à la main :-).

Salut les gars @ mikeriley131 @guillaumemolter

Actuellement, Milligram ne prend pas en charge cette fonctionnalité mais j'ai aimé l'idée. Initialement, Milligram a été construit dans le but d'être le cadre le plus simple, ne définissant que le minimum de styles possibles. Il n'a donc pas autant de fonctionnalités que l'on trouve facilement dans les grands frameworks.

Je vais penser à quelque chose, mais si vous avez une idée de la façon dont nous pourrions implémenter cette fonctionnalité et que vous souhaitez soumettre un PR, n'hésitez pas.

Merci de partager vos réflexions avec nous.

@cjpatoilo Je vous entends et je suis d'accord que c'est exactement ce que j'ai aimé chez Milligram... juste le strict minimum... mais pour moi, c'est une fonctionnalité de conception réactive basique et essentielle.

OK, merci @cjpatoilo. Heureux de créer un PR, je voulais juste m'assurer que je ne manquais pas quelque chose en premier.

@ mikeriley131 heureux d'aider, de revoir les relations publiques, etc. . .

Création de la pull request 155 pour ajouter la fonctionnalité de grille réactive : https://github.com/milligram/milligram/pull/155

Démo sur http://codepen.io/csuttie/pen/BWQMwM

J'ai joué avec une requête médiatique, soyez indulgent avec moi. Je suis un gars qui aime les trucs back-end et joue avec Linux la plupart de mon temps, alors prenez mon développement front-end avec un grain de sel. De plus, je n'ai rien fait dans aucun pré-processeur CSS.

<strong i="6">@media</strong> (min-width: 495px) and (max-width:800px) {
    .row .column[class*=" column-"] {
        max-width: 100%;
    }
}

Il correspond à un .row avec un .column dans l'enfant ou le petit-enfant (pourquoi voudriez-vous même un élément entre .row et .column ? ) qui est suivi d'un .column-* où le * est un joker.

Qu'en penses-tu?

remarques : 495 pixels est la limite car c'est la quantité minimale de redimensionnement autorisée par chrome. 800px n'a pas de remarque significative.

@cjpatoilo oi !
Je pense que l'extrait de code @Lilja est un must have en milligrammes, ma suggestion serait de placer une classe .responsive dans les colonnes que nous voulons être en pleine largeur dans le mobile, bien qu'elles soient définies sur certains %.

<strong i="10">@media</strong> (max-width: 40rem) {
    .row .column.responsive[class*=" column-"] {
        margin-left: 0;
        max-width: 100%;
    }
}

Donc dans les écrans mobiles, ceci :

deviendrait ceci :