Milligram: elementos de grade: largura total em telas pequenas, largura pequena em telas grandes?

Obrigado por trazer isso à minha atenção @mikeriley131 . Eu estava prestes a começar a usar o Milligram em um projeto, mas esse é um grande recurso ausente. Não é muito difícil adicioná-lo manualmente, mas não é o objetivo de uma estrutura css que você não precise fazer isso manualmente :-).

Oi pessoal @mikeriley131 @guillaumemolter

Atualmente o Milligram não suporta esta funcionalidade mas gostei da ideia. Inicialmente o Milligram foi construído com o propósito de ser o framework mais simples, definindo apenas o mínimo de estilos possíveis. Por isso, não possui tantos recursos facilmente encontrados em grandes frameworks.

Vou pensar em algo, mas se você tiver alguma ideia de como podemos implementar essa funcionalidade e quiser enviar um PR, fique à vontade.

Obrigado por compartilhar seus pensamentos conosco.

@cjpatoilo Eu ouço você e concordo que é exatamente o que eu gostei no Milligram... apenas o mínimo... mas para mim é um recurso de design responsivo básico e essencial.

Ok, obrigado @cjpatoilo. Feliz por criar um PR, só queria ter certeza de que não estava faltando nada primeiro.

@mikeriley131 feliz em ajudar, revisar PR, etc...

Solicitação pull 155 criada para adicionar o recurso de grade responsiva: https://github.com/miligram/miligram/pull/155

Demonstração em http://codepen.io/csuttie/pen/BWQMwM

Eu brinquei com uma consulta de mídia, tenha paciência comigo. Eu sou um cara que gosta de coisas de back-end e brinca com Linux a maior parte do meu tempo, então leve meu desenvolvimento de front-end com um grão de sal. Também não fiz nada em nenhum pré-processador css.

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

Ele corresponde a um .row com um .column no filho ou neto (por que você iria querer um elemento entre .row e .column ? ) que é seguido por um .column-* onde o * é um curinga.

O que você acha?

observações : 495 pixels é o limite porque essa é a quantidade mínima de redimensionamento que o chrome me permitiu. 800px não tem observação significativa.

@cjpatoilo oi!
Acho que o trecho de código @Lilja é obrigatório em miligramas, minha sugestão seria colocar uma classe .responsive nas colunas que queremos que tenham largura total no celular, embora estejam definidas para alguns%.

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

Então, em telas de celular, isso:

se tornaria isso: