Комментарии 118
Сразу видно, что у вас не было проектов сложнее 3 колонок блога шапка+футер… :)
Всего 3.5 года и рассуждать о крупных проектах без сеток, да ещё только со стороны фронта…
Я бы не стал тут махать, чтобы не показывать свой низкий проф. уровень и слабые знания предмета :)
Копаюсь и во фронте, и в бэке года с 2009-го (с ~14 лет, ага), клепал кучу всяких разных сайтов, прям щас делаю крупный проект, смысла сеток не понимаю тоже. Абсолютно все сайты, которые я пилил, или настолько примитивны, что сетки просто не нужны (типа сайт всего в одну колонку или контент+сайдбар), или настолько сложны по дизайну, что прогнуть под них бутстрап или что-нибудь ещё готовое не представляется возможным. Ещё больше добавляет непонимания смысла то, что любую сетку с любой адаптивностью можно запилить на чистом CSS3, наверно, минут за 10-20 — изучение готовых решений занимает, блин, больше времени, а потом ещё и костыли к ним прикручивать из-за нестандартного дизайна… !important, кстати, не юзал ни разу. Какие проблемы решают готовые сторонние сетки?
.kolonka {float: left; width: 25%;}
@media (max-width чтототам) { .kolonka {float: none; width: 100%;} }
(можно использовать flexbox или что-то ещё новое, будет примерно так же)
Что упростит бутстрап или что-то иное в данном случае?
Ну вот, у вас и получается куча медиа-запросов (вы упростили код, у вас должно быть 3 медиазапроса), и при этом "чтототам" надо всё время держать в переменной. Плюс вы забыли в вашем случае clearfix, который может понадобиться, а также сложности с написанием дробных значений (т. е. писать 33.33333%).
С помощью велосипеда это две строчки:
@include grid-row();
@include grid-col(12 6 4 3);
Содержимое скобок вы проигнорировали, ясно :)
Это «чтототам» где-то держать придётся в любом случае, потому что пришёл дизайнер и сказал, что на вертикальном айфоне надо одну колонку, на горизонтальном две, а на айпаде три, причём на этом айпаде 2 и 4 колонки поменять местами, а не влезшую последнюю колонку растянуть на всю ширину (это не выдумка, я прям щас решаю очень близкую к этой задачу в том самом крупном проекте). Быть может, я слишком мало знаю о сетках, но по крайней мере сейчас мне неизвестны готовые решения, упрощающие решение подобных задач, зато на flexbox написать такое раз плюнуть.
Для дробных значений есть calc, если на IE8 и прочую некромантию плевать.
Перестановка колонок – http://getbootstrap.com/css/#grid-offsetting
Что упростит бутстрап или что-то иное в данном случае?
Если сайт у вас состоит только из этой строчки то конечно же ничего.
Сетка позволит вам:
1) Разделить разметку положения блоков и оформление. Никто не дает гарантии что вы или кто-то решит дописать бордер или цвет к .kolonka
В конечном итоге все равно вы изобртаете свой некий подход для разделения лейаута и оформления.
2) Избавит от копипаста и изобретения стилей ради лейаута.
3) Предсказуемость при адаптиве
4) читаемость без обращения к css
1) Во-первых, не вижу в этом смысла, во-вторых, это можно делать и без сторонних решений если будет надо. Если кому-то надо дописать border — пусть дописывает, какие проблемы?
2) Копипаста нет, стили в большинстве случаев уникальные у разных блоков (на сделанных мной сайтах по крайней мере)
3) Сетка здесь вообще ни при чём, нормально именуем классы (как именно — вкусовщина) и соблюдаем семантику и всё пучком
2. Вытекает из первого. Для меня все что Float: left, width, clear и пр для блоков — это к лейаутам.
3.
всё пучкомзавидую)
2. Вытекает из первого
3. ¯\_(ツ)_/¯
3 из отредактированного комментария: лично мне нужна не какая-то там предсказуемость, мне нужен наиполнейший контроль над адаптивностью с точностью до любого пикселя, потому что дизайн может отличаться в таких самых разных мелочах, что никакое готовое решение не сможет дать мне нужной гибкости и мне остаётся только городить media
К примеру, сетки на на флексе дают мышление представленное в этих категориях
http://flexboxgrid.com/
Надо выравнить блок по горизонтали
классы: Слева-, справа-, по центру-.
Надо выравнить блок по вертикали
классы: наверх-, по центру-, вниз-
Как распределить дочерние блоки
Какой порядок.
И так далее.
Одна сущность отвечает на 1 потребность. Вы остаетесь в категориях в которых мыслите при разметке страницы без обращения к css.
Не нужно придумывать ни классы, ни прописывать очевидные вещи.
В чем же здесь костыли или где тут готовое решение? Это отлично помогает не дублировать самого себя. А какие то мелочи, да, приходится добивать.
К тому же, заглядывая в код сайта сбера приятно видеть заимствованные с бутстрапа имена классов сеток к добавлению их неведомой лапши на media). Вместо имен классов в основе который лежит чья то детская травма полученная уроке английского языка)) Вобщем, унификацию имен — я одобряю)
.kolonka
— как-то коробитО, люблю эти песни. Вот только моя зарплата с моим «низким проф уровнем» скорее всего раза в 2+ выше вашей, товарищ опытный эксперт :) Причем платят мне явно не за просто так. +у меня имеются неиллюзорные пруфы того что я не верблюд, в то время как вы очереденой «сторожил с хабра» (что доказывает ровным счетом ничего)
Не отрицаю, конечно, что, вероятно, только мне достаются в поддержку говносайты, а все остальные пишут сетки чисто, аккуратно и читабельно, только вот какой смысл велосипедить при наличии готовых решений?
Суть в том что сетка загоняет вас в определенные границы, сильно урезая возможности кастомизации. А кастомизация это основа основ для любого нетривиального сайта. Это примерно тоже самое и что тема с использованием готовых решений для UI элементов и всяких там плагинов. Вначале экономишь время, подрубая готовый компонент и радуешься тому, какой-то эффективный погромист, а пару недель спустя материшься, потому-что тебе надо припаять 5 модификаций, которые без дикий костылей вот вообще не хотят присобачиваться, потому-что изначально готовый компонент не должен был уметь делать что-либо подобное.
Если вы хоть немного знакомы с дизайном, о котором сами говорили, то должны прекрасно знать, что сами дизайнеры как раз таки используют сетки для построения макетов, даже самых кастомных и необычных, у любого сайта, если это не глубоко художественная работа, есть некоторая общая структура, повторяющиеся блоки, система отступов: так же как и вертикальный ритм текста, подобное существует и у блоков. Сетка как раз и помогает сохранять эту структуру и обобщить одинаковые стили применяемые ко многим элементам с целью их расположения на странице.
По поводу ограничений с сетками, вот вам простой пример:
у вас есть несколько контейнеров разной ширины. И в них нужно реализовать простые сетки, и что самое важное, они все должны быть с margin, причем margin'ы могут отличатся. Где-то контейнер 900px с 5 итемами и отступом в 14px, где-то например 790-6-10 (цифры наобум, но в реальности все это встречается). Своими силами (и весьма простыми миксинами) я смогу реализовать все идеально в каждом из случаев, и что самое важное, поменять это моментально, например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS). + у меня будет полный контроль над адаптивом, без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop, словно на дворе 2013 все еще, где нет телефонов с 400px+ ширины и так далее), в с возможностью настраивать все на весьма гибких разрешениях и реализовывать любые хотелки, без борьбы с собственном кодом.
Как конкретно это будет выглядеть с заранее заготовленными сетками, мне вот очень интересно?
Бутстрап в первую очередь инструмент для экономии времени, который также можно адаптировать под любые нужды, написанием дополнительных стилей.
А в вебе этого просто нет. Браузеры все пляшут стандартами. Бутстрап позволил кодить вещи, не запариваясь на разработку дизайна как в визуалстудии накидывая компоненты. Представляете себе визуал студию без компонентов дизайна? Чтобы каждый проект люди заново сначала рисовали кнопки паддинги к чекбоксам? Это же катастрофа.
В визуалстудии компоненты GUI тоже одно мегарешение которое решит все проблемы? Конечно же нет. Никто тут из комментаторов так узко не мыслит.
В реальности лучше пилить все отдельно
Реальность у каждого своя. Атаки на личный способ работы взаимодействия с реальностью подрывают личные убеждения и вызывают тревогу. Отсюда эти прыжки в категориальность. Они скорее связаны чтобы снять личную тревогу, чем донести свою позицию.
Никто не мешает сделать сетку с двумя, тремя, n типами контейнеров, другое дело, понятия не имею, зачем вам это, я с такими задачми встречаюсь крайне редко.
Вариант а) просто @extend-им нативный контейнер и кастомизируем width на брейкпоинтах, результат получается грязноватым, но вполне рабочим, если у вас скажем один такой выделяющийся контейнер, это переопределение ничего не затармозит.
Вариант б) пишем свой контейнер, самое вербозное что там будет — это наши брейкпоинты, заодно можно их вынести в отдельные переменные.
.row трогать не надо.
.col тоже, там где нужны margin-ы не такие как у нас по умолчанию, @extend-им .col и добавляем margin-ы. Если еще приправить БЭМ-ом, выглядеть будет так:
.block1 {
@extend .first-type-container; //наш собственный контейнер
}
.block1__row {
@extend .row; // Без БЭМ-а это было бы лишним, но если нам необходимо сделать кастомную версию .row, то пожалуйста, в вашем случае в этом нет необходимости.
}
.block1__col {
@extend .col, .col-md-8, .col-lg-4;
margin: 0 20px 0 20px;
}
// допустим нужен второй вид колонок в рамках этого же контейнера с другими margin-ами и размерами - не беда
.block2__col-wide {
@extend .col, .col-md-12;
margin: 0 10px 0 10px;
}
Опять таки, если вы не любите @extend, никто не мешает использовать сетки на миксинах, они работают точно так же, просто конечный CSS другой, даже велосипед автора вам здесь вполне зайдет, да как впрочем и любая сетка на миксинах. Если честно связи между сетками и
например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS)
я вообще не вижу, переменные вы можете использовать и в классах с сеткой.
без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop
А как вы без брейкпоинтов делаете адаптивный дизайн, интересно? Если же вы имели в виду, что их недостаточно: вы можете сгенерировать их хоть на каждый пиксель, достаточно добавить в лист нужные цифры и буквы при генерации сетки.
Мне кажется, что если в макете везде разные отступы между элементами, то это повод обратиться к дизайнеру, либо вычислить среднее значение самостоятельно. Лично я сталкиваюсь с этим постоянно (а также с разными размерами шрифта тут и там). С этим надо бороться и немного усекать фантазию дизайнеров.
Очень сложно спорить с человеком(практически невозможно), которого сетка загоняет в рамки :)
Нарисован лендинг с техническим условием в 5 экранов с 2, 3, 5, 7, 11 колонками?
А почему на этом технические условия заканчиваются?
Мы же говорим про то, чья мифология доминирует. Если доминирует мифология что дизайн это железно, то да, с сетками придется сложнее. Если доминирует мифология технаря — то будьте добры нарисовать технически корректный шедевр.
Сетку можно вкладывать друг в друга. Можно сделать 11 колоночной.
В похожем деле я смог настоять на мобильной версии, чтобы не ломать мозги на адаптивщине с кое чьими магическими ритуалами.
.some-block-3-of-11 {
@include make-col-ready();
@include make-col(3, 11);
}
В сложной верстке сетки почти всегда свои, персонально спроектированные под задачу и контент.
Например, dashboard, с возможностью конфигурирования и изменения размера виджетов пользователем. Что-то типа http://dsmorse.github.io/gridster.js/
Сетки нужны, чтобы мыслить в дизайне адаптивно и изолировать голову от технической стороны создания лейаутов. Плохо представляю как без дополнительной абстракции прогнозировать поведение блоков адаптивного сайта.
Но средние по размеру студии часто дизайнеру ставят задачу рисовать всё строго по сетке (даже в фотошопе) и есть что-то не вписывается в стандартный бутстраповский грид, такой макет не принимается.
В результате ограничивается полёт фантазии дизайнера, зато верстается такой макет просто ультра-быстро, причём даже не профессиональным верстальщиком. И сразу всё получается аккуратно, адаптивно и кроссбраузерно.
А вообще интересно, надо будет глянуть ваш велик.
Зачем изобретать велик в 17 году, когда везде уже Grid Layout?
Извращенцами с Опера мини думаю. что можно пренебречь...
Даже по данным caniuse поддержка — 65.64% + 5.11% = 70.75%, т. е. 30% аудитории за бортом. Конечно для некоторых сайтов это может быть и норма, но типичные интернет-магазинчики, чуть ли не хотят ie9, поэтому для них рановато.
Бывает))
предсказуемость — крепкий сон.
Опера Мини ладно, а что прикажете делать с Internet Explorer? Там flexbox-то еле-еле работает в 10-11 версии.
Потому что у тех, кто до сих пор сидит на старых версиях, как правило есть на это причины — иначе б не сидели.
И в сотый раз тыкать их носом в эти причины — все равно как инвалиду прямо в лицо шутить про «нет ножек — нет варенья».
Это не заставит их обновиться (потому что причины никуда не исчезли), но очень сильно настроит против вас.
@include col(1, 2)
Обеспечивается любое количество колонок любой ширины. Если кому интересно, могу привести код миксина и примеры использования. Прекрасно работает и очень удобно использовать совместно с миксином для брекпоинтов (тут на хабре я его и взял).
// Миксин для работы с брекпоинтами.
@mixin respond-to($media) {
@if $media == tablet-min {
@media only screen and (max-width: $small) {
@content;
}
} @else if $media == tablet {
@media only screen and (max-width: $large) {
@content;
}
} @else if $media == notebook {
@media only screen and (max-width: $wide) {
@content;
}
} @else if $media == phone {
@media only screen and (max-width: $phone) {
@content;
}
}
}
// Миксин для создания колонки. На вход принимает какое количество колонок занимает блок и сколько всего колонок в строке. Опционально - отступы.
@mixin col($width, $cols, $padding: 15) {
flex-basis: $width * 100% / $cols;
max-width: $width * 100% / $cols;
padding-left: $padding + px;
padding-right: $padding + px;
flex-shrink: 0;
flex-grow: 0;
}
// Использование примерно такое:
// Контейнер для блоков
items {
display: flex;
}
item {
@include col(3, 12);
@include respond-to(tablet-min) {
@include col(6, 12);
}
@include respond-to(phone) {
@include col(12, 12);
}
}
Я бы с удовольствием почитал как на CSS сделать flex сетку
Наверное, у каждого верстака есть свои «заготовочки» на случаи авралов и заказов «на вчера», куча статеек и туториалов по созданию собственных.
Видать, мне повезло, но описанный велосипед вообще не решает никаких проблем для меня как для верстака.
2. Использование фреймворков это использование их документации для привлечения новых членов команды в том числе, видимо автор только один работает.
3. Написание своей сетки у большинства верстальщиков выливается в адское месиво медиа-запросов, неоднообразных и порой очень нелогичных
4. Чтобы от вёрстки по сетке была максимальная отдача нужно чтобы дизайнер знал заранее что нужно верстать лайаут под сетку
5. Сетка даёт скорость и пониженные требования к верстальщику при вёрстке отзывчивых сайтов. Плюс если посмотреь п.2, это даёт возможность быстро подключить новых членов команды.
6. Я там выше читал про странных людей с сетками в 11 колонок, так вот их неспроста 12, это число делиться на максимальное количество делителей и имеет гибкость для того чтобы уменьшать и увеличивать размеры областей для лайаута. Если дизайнер про это не знает, горе такому проекту.
7. Да, сетка даёт некоторые дополнительные ограничения, но это забота ДИЗАЙНЕРА (см. п. 4), никак не верстальщика.
Насколько я в курсе, флексбокс придумали для отзывчивой замены таблицам и совать их куда попало — странное пожелание.
2. Вы правда не видите разницу между:
«зайти и посмотреть документацию с примерами на сайте»
и
«ковыряться в чужом css и размётке в поисках примеров кусков которые вы будете использовать далее»
?
по моему опыту это разница в десятки часов. А по поводу «фреймворка в вёрстке» и «фантастики», если вы присмотритесь, больше трети сайтов в интернете используют bootstrap сетку.
3. Я не видел отзывчивых сайтов без медиа запросов, а если мы от них не избавляемся и существенно их не уменьшаем, то плюсов не особо от флексбокса и гридов есть. А минус — это дополнительные телодвижения для обеспечения совместимости, чтобы показывалось везде однообразно.
4. Не любую, выше же писали удивительные вещи про 11 колоночную вёрстку. Если дизайнеру сразу сказать какая будет сетка, то получиться макет который быстро и качественно верстается.
2. для бутстраповской сетки
дока фаундейшна
И там и там есть исчерпывающая информация с примерами как пользоваться (а в чужом css файле и чужих шаблонах кровь и кишки).
3. Вместо пустых слов лучше привести пример. А предложение — «иди и ищи сам», говорит о том, что не знаете сами что показать.
4. Большинство дизайнеров не разу в жизни не верстали, и лепят макеты без волнений о том как быстро и удобно будет верстать их вазюканье, соответственно и про сетки не очень многие знают. Я уже писал выше, чтобы модульные сетки давали прирост надо чтобы и верстальщик и дизайнер работали сообща, тогда результат будет в разы быстрее и качественный.
Сетки дают:
— неудобство верстальщику (да, это ограничение)
— сильно упрощает и ускоряет скорость вёрстки отзывчивых сайтов верстальщику и даёт некоторые неудобства, если дизайнер ничего не знает про сетки и для чего они нужны. Плюс даёт упрощение поддержки чужой вёрстки в разы.
— удешевление в целом нового дизайна для заказчика и ускорение получения результата для него
Так что страдают в основном дизайнеры.
Пока не сталкиваешься с личной болью от проблем старшего поколения в иешниках, только тогда задумываешься что человек все таки не виноват.
Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь.
— в четвертой версии сетка основана на flex, соответственно есть класс ".col", который растягивается в зависимости от количества элементов
Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg — все они до ширины 1200px.
— четвертая версия использует scss, потому через переменные можно легко создать новые брекпоинты.
Часто css-фреймворк подключают весь только ради сеток и пары мелких функций
— Это вообще дурной тон подключать весь bootstrap.min.css. Лучше использовать bootstrap scss, и подключать только нужные компоненты, например: сетку и элементы форм
Как известно, сетки в bootstrap 3 основаны на float-ах.
— Bootstrap 4 на флексах
Еще есть MDL от Google.
.col-lg-my5 {width: 100%/5;}
Собственно маленький кусок кода, который и написан самостоятельно, а трогать медиа-выражения на данном этапе проблемы вообще не вижу необходимости т.к. добавив нужный класс из сетки bootstrap'a на иных разрешениях экрана просто скроет этот не стандартный вид сетки.
Или еще более глобальное и кардинальное решение: в переменных bootstrap можно задать шаг сетки (количество колонок) и препроцессор все необходимые вычисления уже сделает самостоятельно.
А не имеет ли здесь место так называемый "overengineering"? Просто мне клиентский код этого fast grid кажется сложнее чем голый flex. Не исключаю, впрочем, что это с непривычки, флекс же тоже не сразу зашёл :)
В первую очередь это инструмент, чтобы не писать тучу @media (min-width){}
, возьмём типичный пример отображения каталога товаров:
.prd__row {
display: flex;
flex-flow: row wrap;
margin: 0 -15px; /* карточки должны быть вровень с текстом выше */
}
.prd__item {
width: 100%;
padding: 0 15px; /* отступы между карточками */
}
@media (min-width: 768px) {
.prd__item {
width: 50%;
}
}
@media (min-width: 992px) {
.prd__item {
width: 33.33333%;
}
}
@media (min-width: 1200px) {
.prd__item {
width: 25%;
}
}
А теперь сравните это с этим:
.prd__row {
@include grid-row();
}
.prd__item {
@include grid-col(12 6 4 3);
}
Не сильно меньше:
.prd__row {
display: flex;
flex-flow: row wrap;
margin: 0 -15px; /* карточки должны быть вровень с текстом выше */
}
.prd__item {
width: 100%;
padding: 0 15px; /* отступы между карточками */
@include breakpoint($tablet) {
width: 50%;
}
@include breakpoint($desktop-s) {
width: 33.33333%;
}
@include breakpoint($desktop-m) {
width: 25%;
}
}
Естественно, кроме изменения сеток нужно ещё что-то менять, но статья о сетках, и как их быстро писать с вашими настройками отступов (а не только 15px по дефолту), и колонок (не только 12 по дефолту).
PS. Есть хелпер и для произвольных стилей:
.prd {
@include grid-breakpoint(sm) {
display: none;
}
}
А что не так с пикселями в отступах? Их и bootstrap использует)
Вот для хрома где настройка:
Ну и туда-сюда поменяйте размер шрифта и посмотрите на разницу.
Как изменение размера шрифта по вашему должен отражаться на отступе между колонками? По-вашему, он должен увеличиваться? Тогда ширину сайта тоже придётся менять, иначе с крупными шрифтами текст ещё меньше влезать будет.
А про то что текст не будет влезать, у меня есть вот такая история из жизни:
«Однажды я верстал по фрилансу сайт и после того как я закончил, выложил последние изменения заказчику. Тот позвонил, открыл скайп и стал в браузере в инспекторе в каждую строчку где есть текст набирать тексты произвольной длины с длинными словами без пробелов. Ну и везде всё повылазило, местами развалилось… В общем я доделывал ещё несколько дней… И после этого в других проектах весь текст у меня стал помещаться или имел какие-то ограничения которые я сразу же обсуждал с дизайнером и он просто грамотно обрезался...»
Я это к тому что навык набивается болезненно, но с первого раза и наверняка ;-)
Я всё-таки не понимаю, зачем увеличивать пропорционально расстояния между колонками, если ширина сайта у вас не меняется? С чего вдруг расстояния между колонками должны увеличиваться за счёт ширины этих колонок, при увеличении шрифта, а не от ширины сайта? Какая-то странная пропорциональность, если честно.
Вариант работает в очень "примерно", и не привязан к сетке. Кроме того, как минимум у вас не влезает блок в 320px, и появляется горизонтальный скролл.
Вот ваша следующая ошибка — на 1024 у вас 2 колонки, а не 3 как должно быть (из-за скролла). А на 1280 3 вместо 4.
А вообще, ваш пример хорошо вписывается только потому, что:
330 * 1 < 360
330 * 2 < 768
330 * 3 < 992
330 * 4 > 1200
Вот вам ваш исправленный пример: CodePen
Пойдём дальше разбирать ошибки. В случае, если нижняя строка не полностью заполнена, блоки растягиваются на ширину до заполнения. Так не должно происходить в нормальной сетке. Все карточки должны быть одинаковой ширины между собой.
Grid Layout — вещь хорошая, но доля неподдерживаемых браузеров слишком велика.
Баг дизайна флексбокса.
Большое упущение разработчиков.
необходимость использовать bootstrap
Ерунда какая-то, всегда был против этого карго культа. Постоянно встречаю проекты «на бутстрапе» в которых примерно половина стилей — это борьба с этим «чудо-фреймворком»
Быстрые сетки для верстальщиков