Какими инструментами создания разметки вы пользуетесь?

Question

[Artem Petrenko]

Какими инструментами вы как правило пользуетесь для создания лэйаутов в ваших проектах? Я учусь и мне советуют использовать Grid Layout для общей разметки страницы (но тут проблема поддержки браузерами) и флексбоксом для отдельных элементов (типа галлереи и т.д.).

С помощью float и position, как я понимаю, уже мало кто верстает.

Что используете вы и в каких случаях?

Comments

[Серж Ткач]

Вот хорошая статья на эту тему - web-standards.ru/articles/state-of-layout

Answer 1

[Олег]

С помощью float и position, как я понимаю, уже мало кто верстает.

На мой взгляд наоборот флексбоксом мало кто верстает, а вот всякие сетки на обычных флоатах (тот же бутстрап 3) использует подавляющее большинство.

Answer 2

[Серж Ткач]

UPDATE 12.02.2016

Почитал про flex - html5.by/blog/flexbox (можно начать с пункта "Демо основных свойств flex-контейнера") Не поддерживает опять же только IE и еще какой-то малоизвестный браузер.

{ Мне реально очень понравилось } Пробую применить в верстке в реальном сайте. Потом напишу окончательное мнение ))

--------------------------
Хм... А в чем проблема Float' ов????

Много читал насмешек над ним. Но какая альтернатива? Если кто знает, объясните. А то я никак не могу понять.

Зачем мне писать inline-block* или table-cell для нормальных браузеров, а потом еще и для IE писать float: left, если можно сразу написать float: left + clear: both в ::after. Причем clear можно для разных блоков при разных условиях по media-query.

Кстати, как раз изучал Приемы отзывчивого веб-дизайна https://developers.google.com/web/fundamentals/des... и там таки используется flex, тогда как в учебном проекте https://googlesamples.github.io/web-fundamentals/s... используется FLOAT!!

* Кстати inline-block добавляет лишний пиксель отступа, что мешает при расчетах, если кому нужны рассчеты (например, при использовании LESS)

Comments

[Сергей delphinpro]

В чем проблема флоатов? Серьезно, не знаете? O_o
Альтернатива? Флекс - отличная альтернатива.
inline-block добавляет пиксель? с чего вы взяли, что именно пиксель? Почитайте на эту тему книжку "Инлайновый контекст форматирования" (есть онлайн вариант на css-live.ru).

[Серж Ткач]

Сергей: Я записал Вашу рекомендацию в свой список дел. Спасибо!

[Серж Ткач]

Сергей: Кстати, а какую методологию верстки посоветуете из OOCSS и SMACSS? ))

[Сергей delphinpro]

SergeTkach: БЭМ

Answer 3

[lavezzi1]

Grid Layout - только для прототипов. Для продакшена точно не вариант.

Float & inline-block - верстают МНОГИЕ. Остальная часть на flexbox. Тут от проекта зависит.

1. Хорошая сетка у бутстрапа (можно только ее выдернуть).
2. Сейчас активно пользую Lost grid (flexbox & float).
3. Чисто для flexbox - flexboxgrid.com использовал в продакшене без проблем.

Comments

[Серж Ткач]

Хм... Это отличная идея вытащить сетку из Bootstrapa ))
И быстро верстаешь, и нет лишего CSS. Хотя остается лишний HTML.

Что делать с этим?? Роюсь в интернете, а однозначного ответа не вижу...

[Artem Petrenko]

а почему grid не пойдет для продакшна?

[lavezzi1]

SergeTkach: Что значит лишний HTML? Типа row и col?

Artem Petrenko: Ее два браузера поддерживают пока что. Вот статистика caniuse.com/#feat=css-grid

[Artem Petrenko]

lavezzi1: Боль. А в случае кастомизации? Если браузеры добавят поддержку. Что по функционалу по сравнению с другими сетками?

[lavezzi1]

Artem Petrenko: Поддержку в бразеры добавят, но не в этом году. А станет популярным в следующем, если не позже. Браузеры быстро начали развиваться, но нужно время все равно. Grid layout это безусловно новый уровень. Но реальность такова, что на серьезных проектах, где важно чтобы пользователь что то купил\прочитал и т.д нужно поддерживать как минимум 10-11 ИЕ, хотя их официально прекратили использовать, так что нужно с заказчиком этот момент обговаривать. Есть еще вариант, делать проверку c js, типа если браузер поддерживает Flexbox то отрабатывает flexbox,если нет то флоат.

[Серж Ткач]

lavezzi1: Да, про лишний HTML я имелл ввиду, что постоянно надо оборачивать элементы в row и col. Это ведь избыточный код!

[lavezzi1]

SergeTkach: Я бы так не считал. Пример: видели в БЭМ какие длинные классы? Так вот, мало того что они длинные, они могут много раз повторятся и в частности row с col. Проблема решается gzip сжатием на сервере, коротко говоря в html файле повторяющиеся классы сжимается до одного просто подставляется куда нужно, размер сжимается в разы и все довольны. В вашем случае я бы не парился вообще. К тому же, эти row и col можно миксовать с блоками.

Answer 4

[No Name]

Юзаю иногда Susy, очень крутая сетка как мне. Разработчик этой сетки позаботился о том, что бы Вы сами могли подгонять свою сетку под себя и я считаю это круто. Заодно если учитесь, то sass будете использовать ну и gulp например попробуете.

На счёт float'ов, говорят, что это не очень хорошо. Да и я в принципе с ними согласен. С ними слишком много мороки, display: inline-block и поехали...
А вообще под IE меня редко просят уже что делать если честно.

Вообще на счёт float тема спорная, нужно отталкиваться от того, что от вас требуют и как оно должно отображаться и где должно отображаться :) И в гугле море информации об этом с разными мнениями об этом.