Как делать адаптивные сайты без сетки?

Question

[darksladen]

Не понимаю, как делать адаптивные сайты без сетки. Неужели медиа запросы пишут прямо для каждого блока? Это же кучу времени надо. Или все же делают какие то глобальные классы, чтобы адаптивить блоки, вместо сетки? Как это делают крутые дяди-фронтендеры?

Comments

[alvvi]

Встречный вопрос: с чего вы взяли, что крутые дяди-фронтендеры делают адаптивные сайты без сетки?

[darksladen]

Илья Ростопка: Хорошо, мне может просто так подумалось, а что у них за чудо сетки уникальные для проекта? Чем их не устраивает кастомизация бутстраповской сетки?

Answer 1

[iBird Rose]

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

Как это делают крутые дяди-фронтендеры?

вот так и делают. создают свою сетку, которая будет во всем их устраивать.

Comments

[darksladen]

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

[iBird Rose]

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

То есть сетка там неравномерная

просто для каждого проекта делается своя сетка. а не универсальная

[darksladen]

iBird Rose: Интересно, а можно вообще в двух словах чем она может отличаться? Я если честно не додумаюсь даже.. Мне в голову приходит только изменить число колонок, а что еще можно сделать с сеткой? Ведь если сделать скажем 36 колонок, то это будет достаточно гибкая сетка, а для удобности можно сделать еще группы колонок какие нибудь чтоли, чтобы не надо было много считать =)

[iBird Rose]

darksladen: мало ли че дизайнеру в голову придет. нарисует он тебе макет где между колонками расстояние отличается к примеру. или сами колонки разной ширины. но при этом вся эта структура на всех страницах такая же. в таких случаях легче сделать сетку свою для этого макета нежели кастомизировать какой нить фреймворк

[darksladen]

iBird Rose: Мне интересно как будут выглядеть стили для такой сетки =) Если мне допустим надо сделать где то расстояние между сетками меньше,то класс будет примерно такой col-md-4-small? Это же какой то бред. Проще тогда опять же сделать сетку вообще без отступов и прописывать их всем блокам.. Или же перебить стили бутстрапа своим классом, который сделает правильные отступ. Просто непонятно как это будет выглядеть.. Или вообще чтоли не использовать действительно тогда уж сетку, если у тебя все колонки разные и непонятно какие..

Answer 2

[zooks]

1. Да, для каждого блока. Вот здесь подробнее ответил:
Как вы прописываете media queries в sass?
2. Susy

Comments

[darksladen]

Да это ясно.. Кстати не соглашусь с вами в вашем ответе. Во-первых вы сказали, что 1 вариант ТС удобный, а 2 правильный. Хм, очень интересно чем же второй правильный. Поясните, если можно. Так как при втором варианте потом ужасно тяжело искать селекторы в документе, их становится в 3 раза как минимум больше =) Также по поводу breakpoin, но это уже ИМХО. Делал 2 сайтика так, просто опплевался. Проще уж писать обычные запросы, но это на любителя наверное.

[darksladen]

Кстати, воспользуюсь случаем и спрошу как вам джанго после пхп =)

[zooks]

darksladen: как же вы со мной не согласились, если не знаете почему? :)
1. Он правильный с точки зрения выходного кода - так сложилось исторически. Как использовать первый вариант (имхо, более удобный при разработке), я указал.
2. Да, на любителя. Если не показался упрощающим верстку, то можно отбросить.

[darksladen]

zooks: Так выходной код нормальный модуль для гальпа сделает правильным и оптимальным, так что разницы с точки зрения оптимизации никакой, гальп все равно все сожмет и зафигачит в одно правило.

Скажите пожалуйста по питону, тоже хотел его поизучать после php. Есть ли перспективы?

[zooks]

darksladen: сам по себе gulp ничего не делает. Нужно подключать соотв. плагин gulp-combine-mq.
Имхо, PHP - это тупик и стеклянный потолок. Python (Пайтон от "Монти Пайтон") - это возможность свалить из Веба, когда станет тошно.