Milligram: элементы сетки: полная ширина на маленьких экранах, малая ширина на больших экранах?

Спасибо, что обратили на это мое внимание @ mikeriley131 . Я собирался начать использовать Milligram в проекте, но мне очень не хватало этой функции. Добавить его вручную не так уж сложно, но цель CSS-фреймворка не в том, что вам не нужно делать это вручную :-).

Привет, ребята @mikeriley131 @guillaumemolter

В настоящее время Milligram не поддерживает эту функцию, но идея мне понравилась. Изначально Milligram создавался как простейший фреймворк, определяющий минимум возможных стилей. Таким образом, у него не так много функций, которые легко найти в больших фреймворках.

Я что-нибудь придумаю, но если у вас есть идеи, как мы могли бы реализовать эту функциональность, и вы хотите отправить PR, не стесняйтесь.

Спасибо, что поделились с нами своими мыслями.

@cjpatoilo Я слышу вас, и я согласен, что это именно то, что мне понравилось в Milligram ... только самый минимум ... но для меня это основная и важная функция адаптивного дизайна.

Хорошо, спасибо @cjpatoilo. Рад создать PR, просто хотел сначала убедиться, что я ничего не упустил.

@ mikeriley131 рад помочь, просмотреть PR и т. д.

Создан запрос на включение 155, чтобы добавить функцию адаптивной сетки: https://github.com/milligram/milligram/pull/155 .

Демо на http://codepen.io/csuttie/pen/BWQMwM

Я поиграл с медиа-запросом, потерпите меня. Я парень, который любит бэк-энд и большую часть времени играет с Linux, так что отнеситесь к моей фронтенд-разработке с долей скептицизма. Также я ничего не делал ни в одном препроцессоре css.

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

Он соответствует .row с .column в дочернем или внучатом дочернем элементе (зачем вам вообще нужен элемент между .row и .column ? ), за которым следует .column-* , где * — это подстановочный знак.

Что вы думаете?

примечания : 495 пикселей - это предел, потому что это минимальное изменение размера, которое мне позволил хром. 800px не имеет существенного замечания.

@cjpatoilo ой!
Я думаю, что фрагмент кода @Lilja должен быть в миллиграммах, я бы предложил разместить класс .responsive в столбцах, которые мы хотим, чтобы они были полной ширины на мобильных устройствах, хотя они установлены на некоторые %.

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

Итак, на мобильных экранах это:

станет таким: