Быстрые сетки для верстальщиков

Автор: admin от 30-07-2017, 16:30, посмотрело: 117

Быстрые сетки для верстальщиковЛюбому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый bootstrap, и в html-ке начинают появляться div-ы с классами вида col-xs-6 col-sm-4 col-md-3. И вроде бы всё хорошо и быстро, но в данном подходе часто возникает множество подводных камней. В данной статье мы рассмотрим эти подводные камни, и закидаем тухлыми помидорами рассмотрим мою поделку для беспроблемных сеток.



Проблемы



Нестандартные сетки



Быстрые сетки для верстальщиков

Итак, у нашего верстальщика очень мало времени, макет горит, всё надо сделать вчера. Поэтому, он берёт для основы популярный css-фреймворк bootstrap, и начинает свою работу. И тут, в середине работы, он вдруг натыкается на блок баннеров "5 в ряд". Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь. Да, конечно, в бутстрапе можно собрать произвольную сетку, но это время терять, качать зависимости, собирать less-ки (а мы, допустим, пишем на sass).



Может подключить какую-нибудь библиотеку для настраиваемых сеток? В целом это хороший выход, единственный минус данного подхода, что практически все из них рассчитаны либо на долгое и нудное написание @media(min-width:){}, либо генерируют свой набор классов, с кучей, наверняка не нужных col15-xs-offset-3, которые попадут в итоговую css-ку.



Поэтому, с большой вероятностью, верстальщик просто пропишет все стили вручную (там, в принципе, не так много писать).



Необходимость своего набора breakpoint-ов



Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg — все они до ширины 1200px. А как же большие мониторы? Какой-нибудь брейкпоинт xl на 1600px так и просится в стандартный набор. Но его опять же нет, и возникают те же варианты решения, что и в предыдущем пункте. А ведь контрольных точек может быть очень много — 320, 360, 640, 768, 992, 1200, 1600, 1900..



Избыточность и многословность



И тут мы плавно подходим к следующей проблеме. Представьте, что вам нужно прописать для каждой сетки свои размеры блока, тогда у вас получится что-то типа этого:



<div class="col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>


Не слишком ли много? Добавьте сюда возможные pull/push и visible/hidden и тогда можно смело начинать сходить с ума. А ведь все эти классы прописаны в css, представьте сколько нужно прописать классов в css для всех комбинаций 60-кратной сетки!



Отделение стилей от разметки



Любой верстальщик знает, что inline-стили — это плохо. Так зачем мы пишем в классы разметки то, что касается стилей? col-xs-6, visible-sm и не дай бог text-right — это всё стили, и, если надо будет вносить правки в уже натянутую на вёрстку, обязательно возникнет проблема, что верстальщику придётся просить backend-щика поменять col-sm-6 на col-sm-4.



Перекрытие ненужных стилей



Часто css-фреймворк подключают весь только ради сеток и пары мелких функций, что вытекает впоследствии в избыточном сбросе стилей и двойном размере итогового css. Например, подключается весь bootstrap.min.css, а потом весело и задорно убираются тенюшки и закруглённые уголки у .btn, .form-control и тому подобного, включая :hover, :focus, :first-child. В итоге, вместо помощи, фреймворк начинает мешать. Не говоря уже о часто не нужных фичах, по типу .glyphicon. Конечно, опять же можно собрать bootstrap из того, что нужно, но это опять время.



Чужие стандарты и code-style



Допустим, верстальщик изучил БЭМ и начал его применять. Но необходимость использовать bootstrap диктует свои исключения — в нём все классы пишутся через дефис, не следуя принципам БЭМ. И тут возникает проблема выбора — либо смириться с мешаниной в названиях классов (btn-block disabled component__btn component__btn_disabled), либо всё-таки выкинуть bootstrap.



Устаревшие методы



Как известно, сетки в bootstrap 3 основаны на float-ах. Что часто вызывает проблемы, одна из наиболее частых — различная высота блоков, в результате которой красивая сетка "ломается". Хватит использовать float-ы не по назначению, уже практически вымерли все браузеры, которые не умеют flexbox!



Susy! — это выход?



Быстрые сетки для верстальщиков

В поиске решения всех перечисленных выше проблем, я наткнулся на замечательный сеточный фреймворк Susy!, в целом очень хороший. Но мне не хватало скорости, т. к. susy! предлагал описывать колонки для каждого брейкпоинта отдельно:



.col {
    @media (min-width: 768px) {
        @include gallery(4 of 12);
    }

    @media (min-width: 1200px) {
        @include gallery(3 of 12);
    }
}


То есть susy! предполагает, что брейкпоинтами вы будете заниматься самостоятельно. Кроме того, susy! сам не пишет за вас display: flex для, строк, вам нужно их не забывать прописывать самостоятельно. Отступы между колонками в нём задаются только относительные (сделать фиксированные в пикселях не получится). Также, он совсем недавно научился flex, а до этого он строил сетки на float и :nth-child(). В общем, susy! это хорошо, но хотелось бы скорости и лёгкости описания сеток для всех брейкпоинтов, как это было с bootstrap.



Поиск других сеточных систем также не давал особо результата — все либо идут по пути susy!, забывая про breakpoints, либо идут по пути bootstrap, предоставляя набор сгенерированных классов для руления сетками в html.



Велосипедостроение



Быстрые сетки для верстальщиков

Итак, решено было написать что-то своё, в результате родился fast-grid. Он также, как и susy, построен на sass. Какие же главные преимущества он предоставляет по сравнению с другими решениями, в частности, с susy!? В первую очередь скоростью за счёт меньшего количества кода, возьмем стандартный bootstrap пример:



<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
</div>


С помощью fast-grid такую сетку очень легко описать:



@import "~fast-grid/fast-grid";

.row {
    @include grid-row();
}

.col {
    @include grid-col(6 4 3 2);
}


https://codepen.io/PaulZi/pen/EvPbWK



Давайте теперь пройдёмся по нашим недостаткам, и увидим как fast-grid решает все эти проблемы.



Нестандартные сетки



Быстрые сетки для верстальщиков

Легко:



@import "~fast-grid/fast-grid";

.cols {
    $grid: (
        gap: 5px
    );

    @include grid-row($grid);

    &__item {
        @include grid-col(12 6 null (1 of 5), $grid);
    }
}


https://codepen.io/PaulZi/pen/gxPXJq



Необходимость своего набора breakpoint-ов



@import "~fast-grid/fast-grid";

.cols {
    $grid: (
        breakpoints: (
            xxs: 0px,
            xs: 360px,
            sm: 640px,
            md: 960px,
            lg: 1200px,
            xl: 1600px
        ),
        columns: 60
    );

    @include grid-row($grid);

    &__item {
        @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid);
    }
}


https://codepen.io/PaulZi/pen/XaXVmg



Избыточность и многословность / Отделение стилей от разметки



fast-grid это сеточный фреймворк для использования в css, а не в html на основе сгенериронных наборов классов. Благодаря этому разметка становится отделена от стилей, что благотворно отражается на дальнейшей поддержке. Также благодаря этому нет необходимости генерировать кучу вспомогательных классов (.col-xs-push-4 и т. п.), которые по большей части не используются.



Перекрытие ненужных стилей



Так как fast-grid — это набор mixin-ов, сам он не генерирует ни одного правила в css. Поэтому тут вы не столкнётесь с тем, что фреймворк стилизует элементы так как вам не надо. Да и вообще, это только сетки, и ничего больше.



Чужие стандарты и code-style



fast-grid — это mixin-ы, которые вы должны использовать внутри ваших классов, с такими наименованиями, которые вы сами предпочитаете. Любите БЭМ? Не вопрос!



Устаревшие методы



По умолчанию используется flexbox, что открывает множество возможностей и решает проблемы классических float. Например, можно легко менять порядок колонок.



В примере ниже, мы выводим сайдбар ниже основного содержимого для мобильной версии, и делаем его первым блоком на больших экранах.



Можно было бы конечно этого добиться с помощью pull/push для float, но это очень костыльно.



Заключение



В целом, поставленная для меня задача была выполнена — теперь сетки для меня больше не вызывают никаких проблем, и вёрстка идёт быстро и легко. Больше о возможностях fast-grid вы можете почитать в репозитарии и рассмотреть на примерах:



GitHub

Примеры



Вы всё ещё используете bootstrap? Тогда мы идём к вам!



Источник: Хабрахабр

Категория: Программирование » Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *