Bootstrap в готовом решении зло? Да ладно!

Давно хотел написать этот пост, но все руки не доходили.

Уже неоднократно к нам обращались клиенты со следующим диагнозом
"У вас используется Bootstrap, а вот там сказали, что это тормозит сайт и плохо и громоздко, и предлагают верстку, оптимизированную на уровне handmade"
Но самое страшное, когда такие вопросы задают веб-мастера и со стажем

Итак,
я могу лишь предполагать, почему и откуда "растут ноги", но не буду никого критиковать, сам тоже когда-то таким был.

И все же Bootstrap придется хоть как-то "обелить" расставив точки над i и осветив один из самых его интересных моментов.

Начнем

Современная адаптивная верстка может быть выполнена как в полностью handmade исполнении с точностью вылизывания каждого блока, так и с использованием готовых "промышленных" технологий.

И одна из них - сетки.



Не стоит их отвергать или хаять, так как дизайн на основе сеток является стандартом де-факто уже далеко не один год, еще до популяризации адаптивности, и по сути уже баян, о котором никто не пишет.
[spoiler]
Для чего нужны сетки?

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

Отказаться от стандартов и создать верстку, прописав поведение всех (или только ключевых) блоков, ручками тоже можно, Но вы получите handmade проект, к которому кроме "создателя" остальные будут относиться с опаской, так как кто знает, что произойдет, если поправить этот стиль, заменить пимпочку на что-то другое.

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

Но главный выигрыш от использования стандартов - скорость, универсальность.

Если речь не идет о простеньких страничках или сайтах.

Теперь отметим второй момент, когда популярность сеток резко выросла:

Адаптивность

И тут преуспел Bootstrap, хотя есть и другие сеточные фреймворки (например 960.gs)

Ах да.
Забыл сказать следующее:
Bootstrap - достаточно широкий фреймворк,в котором сетки просто один из "пунктиков", не считая адаптивности.
Я редко встречал проекты, которые используют все 100% возможностей фреймворка.
Но самое интересное, что многие сходу воспринимают Bootstrap именно как набор кнопочек, формочек и прочей всячности. Тем не менее, можно брать от него лишь то, что вам требуется.

Именно поэтому говорить о том, какой он тяжеловесный, нельзя.

Ведь у каждого разработчика есть возможность сформировать свой собственный "комплект", взяв только самое необходимое.

Есть и интересные моменты.
Если использовать готовые промышленные сетки вместо handmade верстки, то вес CSS, к примеру, наоборот может уменьшиться, а CSS могут стать проще, также как и "архитектура" верстки.
Но самое главное - верстка на основе сеток читается верстальщиками гораздо легче чем хендмейд. Это преимущества любой стандартизации, когда освоив стандарт, можно легко работать с любым проектом, его поддерживающим

Ну и живой пример на нашем опыте.
Для решения TopShop мы создавали свои сетки, но... на базе промышленных стандартов.

Но, начиная с решения Корп сайт, уже работаем строго с сетками Bootstrap (в первую очередь, чтобы встать на рельсы стандартизации, во вторую, он нам нравится, в третью - теперь это тоже "частичка" Битрикса, хотя на момент принятия нашего решения этого еще не было)

А в решении Bxready: Маркет у нас даже есть свои хуки и патчи, корректирующие поведение родного Битриксовского Bootstrap.

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

Пока мы использовали только:
Сетки и часть типографики (вес очень мизерный и даже меньше чем хендмейдовская адаптивная верстка с CSS)
Если понадобится что-то еще готовое, добавим.
Но... делаем мы это осмысленно.

Еще раз отметим почему это выгодно

1. Простота сборки макетов

Попробуйте провести модернизацию или перепланировку handmade верстки и правильно собранного сайта на сетках bootstrap.

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

2. Простота модернизации и адаптации

Попробуйте поуправлять поведением блоков при адаптивности и поэкспериментировать при этом с АБ тестированием.
И представьте handmade адаптив, когда боишься, что банальная перестановка стены обрушит все здание.
Сравните скорости и затраты.

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

Т.е. они как нельзя кстати подходят к современным реалиями

Нейтральный итог:
В приницпе.... на многие моменты в Bootstrap существуют более крутые аналоги, но сетки...
Мне вот просто нравятся и все тут
.
Вы еще верите, что Bootstrap это зло?

Если у вас новый Битрикс, попробуйте сдать его на анализы.
А вдруг где-то в его клеточках притаился этот злобный и ужасный Bootstrap?

Я же обычно интересуюсь, каким образом реализован дизайн и как работает адаптивность?

Ну и еще интересный момент про bootstrap:
Есть у него еще набор шрифтовых иконок GlyphIcon

Прикольная штука, но одно "но". Набор состоит только из бесплатных иконок.
Тем не менее есть альтернатива, которую знают многие: fontawesome (и радует, что этот набор теперь тоже в ядре битрикс и не надо его тащить извне)


А еще я искренне поддерживаю разработчиков Битрикс в их решении в отношении сеток Bootstrap.

С уважением, Алексей Коваленко

P.S.

• На самом деле не всем проектам или сайтам нужны промышленные технологии (сетки, адаптивность и прочее)
• Сеточные технологии, в том числе и сетки Bootstrap, начинаются именно с дизайна. Поэтому сначала надо знать, как они работают и самое важное - это должен знать и соблюдать веб-дизайнер, иначе верстка превратится в "как бы эту картинку впихнуть в невпихуемое, или ну его нафиг, мне платят за точность, а не за пропаганду стандартов".
• Настало время, когда до заказчика уже надо доводить, что есть моменты, в которых верстка должна быть строго по дизайну, а какие моменты варьируемые (резиновые, масштабируемые и т.д.), а это тоже труд.
• Для меня до сих пор является непоняткой, если веб-мастер не знаком с сетками. При подготовке программистов я ранее использовал задания такого плана: сверстать простенький адаптивный макет, изучить Bootstrap, сделать тоже с помощью Bootstrap - и сделать соотв. выводы по простоте и скорости и когда это выгодно.
• Реально встречал случаи некорректного использования bootstrap в модулях, отрицать не буду,, хотя также как и бездумное использование любого другого фреймворка, в том числе и Битрикс.