Milligram: elementos de cuadrícula: ancho completo en pantallas pequeñas, ancho pequeño en pantallas grandes?

Gracias por traerme esto a mi atención @mikeriley131 . Estaba a punto de comenzar a usar Milligram en un proyecto, pero esa es una gran característica que falta. No es demasiado difícil agregarlo manualmente, pero no es el propósito de un marco css que no necesite hacerlo a mano :-).

Hola chicos @mikeriley131 @guillaumemolter

Actualmente, Milligram no admite esta funcionalidad, pero me gustó la idea. Inicialmente, Milligram se construyó con el propósito de ser el marco más simple, definiendo solo el mínimo de estilos posibles. Por lo tanto, no tiene tantas funciones que se encuentran fácilmente en marcos grandes.

Pensaré en algo, pero si tiene alguna idea de cómo podemos implementar esta funcionalidad y desea enviar un PR, siéntase libre.

Gracias por compartir sus pensamientos con nosotros.

@cjpatoilo Te escucho y estoy de acuerdo en que eso es exactamente lo que me gustó de Milligram... solo lo mínimo... pero para mí esta es una característica de diseño receptiva básica y esencial.

Vale, gracias @cjpatoilo. Feliz de crear un PR, solo quería asegurarme de que no me estaba perdiendo algo primero.

@ mikeriley131 feliz de ayudar, revisar relaciones públicas, etc...

Se creó la solicitud de extracción 155 para agregar la función de cuadrícula receptiva: https://github.com/milligram/milligram/pull/155

Demostración en http://codepen.io/csuttie/pen/BWQMwM

Jugué con una consulta de los medios, tengan paciencia conmigo. Soy un tipo al que le gustan las cosas de back-end y juego con Linux la mayor parte de mi tiempo, así que tome mi desarrollo de front-end con un grano de sal. Además, no he hecho nada en ningún preprocesador css.

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

Coincide con un .row con un .column en el hijo o nieto (¿por qué querrías un elemento entre .row y .column ? ) seguido de .column-* donde * es un comodín.

¿Qué piensas?

comentarios : 495 píxeles es el límite porque esa es la cantidad mínima de cambio de tamaño que Chrome me permitió. 800px no tiene ningún comentario significativo.

@cjpatoilo oye !
Creo que el fragmento de código de @Lilja es imprescindible en miligramos, mi sugerencia sería colocar una clase .responsive en las columnas que queremos que tengan el ancho completo en dispositivos móviles, aunque están configuradas en algún %.

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

Entonces, en las pantallas móviles, esto:

se convertiría en esto: