Верстальщики, что вы используете для адаптивной верстки?

Question

[eldar_web]

Еще, хотелось бы узнать, вот я использую Bootstrap Grid System, и вот, есть ли кто тоже использовал его
и выбрал другое, увидев преимущество в том, ну или на чем остановились для адаптивной вертски?

Answer 1

[iBird Rose]

@media запросы используем) создаем свои сетки, которые во всем нас устраивают)

Comments

[Alex55]

Полностью солидарен. Пусть будут говорить, мол, велосипеды делаешь и т.д. Зато я это сделал сам и в любой момент могу найти нужный мне участок кода почти в слепую. Когда мне говорят «используй Bootstrap, если ты веб-разработчик», я таких людей посылаю. У меня свои шаблоны, свои сетки, свои заготовки. Называйте как угодно, но от своих принципов не отступлю.

[Михаил Москалев]

Alex55: а потом твой проект поддерживают другие разработчики и ты начинаешь икать и плохо спать =С
То что ты можешь разобраться в своем коде с закрытыми глазами это здорово, но тогда будь добр писать по нему доку и поддерживать ее.
А еще 24/7 фиксить баги, дорабатывать и всячески эмулировать поведение опенсурс сообщества, которое занимается поддержкой bootstrap, flexbox-greed и т.д.

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

[Владимир Соломыкин]

Михаил Москалев: жалко, нет кнопки "нравится", поэтому просто напишу!

[Aleksey Muskos]

+ chrome dev tool

[Sasha Siniytsin]

Владимир Соломыкин, время пришло!:)))

Answer 2

[Gregory Bass]

Использую препроцессорную адаптивную сетку, что в разы удобнее бутстрапа и аналогичных популярных сеток, где мы расставляем классы в разметке. В препроцессорной сетке вся адаптивка задается в стилях, быстро, красиво и удобно. При этом и код чище (в разы меньше классов, не надо делать бутстраповсткую огромную вложенность) и стили меньше весят.
Вот пример такой сетки https://github.com/GMDJS/GMDJS
Это мой фреймворк, который я развиваю с командой. Сетка уже проверена перепроверена и постоянно используется в работе, вся команда не нарадуется) Ну и другие так же делаем готовые компоненты материал дизайна. Возможности аналогичны бутстрапу, но при этом вся магия происходит в препроцессорах. И поэтому не надо подключать целую либу, в стили скомпилятся только те классы, которые были использованы. Неиспользованные стили в продакшн не попадают.

Comments

[eldar_web]

Вроде бы хорошая вещь. Но что если мне нужен чисто grid и не нужен material components и незнаю GULP, то почему я не могу закачать чисто grid?

[Gregory Bass]

eldar_web: Если не использовать материал компоненты то их и не будет в продакшене. В том и плюс препроцессорного фреймворка. Он может весить мегабайты кода, но в стили попадет только то что вы используете. Просто исползуете сетку и даже не думаете что там есть что-то еще. Ну а по поводу галпа.. без сборщиков не будет и препроцессорных решений. Это прогресс и его нельзя избегать. Как-то так)

[Max Medar]

Интересная штука, присмотрюсь на досуге. Но есть ряд вопросов:
- насколько все завязано на flexbox?
- как оно в старвнении с аналогами? Скажем, Bourbon Neat

[Gregory Bass]

Max Medar: пока что все делается только на фрексах. Думал сделать переключалку флоат / флекс. Но так как делал фреймворк для себя и команды в первую очередь, решил не тормозить прогресс в угоду 2-3% доисторических IE. Ибо если им угождать постоянно поддержкой, они останутся вечной проблемой верстальщиков и так и будут тормозить прогресс и быть причиной выбора кода с костылями вместо элегантных и легковесных современных решений.
А по поводу аналогов, я пробовал другие либы. И мне и команде их сетки не зашли. Я постарался сделать свою сетку интуитивно понятной, чтобы никаких вопросов не возникало. А материал и JS это уже опционально идет и используется только если нужно.

[Nevada18]

Gregory Bass: здравствуйте. решил посмотреть вашу сетку, но при запуске галпа выдает ошибку. скрин prntscr.com/e8ie48

[Gregory Bass]

Nevada18: Добрый день! Просто сейчас ведутся работы. Заканчиваю делать сайт с документацией и в течении недели исправлю ошибку. Там по сути надо только переименовать пару переменных и все будет работать, но я полностью переписал ядро, с учетом пары десятков версток которых я этой сеткой сделал. Можете пока взять этот шаблон https://github.com/gmdjs/ready_template правда там испольуется Pug. Как закончу с документацией сделаю версию шаблона и без html препроцессора

[Gregory Bass]

Nevada18: доки пока только технический вариант, но можете почитать https://gmdjs.github.io/grid.html

[Vasyl Kovbassa]

Gregory Bass: В чем отличия от бутстрап?

[Gregory Bass]

Vasyl Kovbassa: от CSS библиотеки бутстрап?

[Vasyl Kovbassa]

Gregory Bass: от gird system миксинов.

[Gregory Bass]

Vasyl Kovbassa: миксинами их не пользовался, ничего не могу сказать.

Answer 3

[Jimmy Neutron]

Bootstrap
Flexbox
Иногда Zubr

Comments

[dhat]

Flexbogrid по ссылке используете реально на проектах? Или чисто для красивого словца? Я порылся в нем, это же ужас кривой и нерабочий.

[Jimmy Neutron]

dhat: использовал на 3х проектах (просто как тестовый брал)

[dhat]

Александр Власов: что значит "просто как тестовый брал"?

[Jimmy Neutron]

dhat: ну посмотрел, что к чему у него и как. Удобно или нет. Мое мнение, что он на любителя. Меня не впечатлило. Наверно просто привык к bootstrap. С Zubr не так давно знаком, сейчас на нем делаю сайт, вроде нормально, но пока не полностью перекопал, не могу сказать точно что к чему

[dhat]

Александр Власов: я перепробовал штук 5 разных сеток на Флексбоксе. Эта по ссылке показалось самой ужасной. Понравилась сетка Bulma. Надо еще попробовать Бутстрап 4, но пока руки не дошли. Там тоже Флекс.

[Evanre]

dhat: Уже год использую эту сетку, да и в целом, работаю в большей степени с флексами, флоаты почти не использую. А в чем кривизна Flexbogrid?

[Jimmy Neutron]

Евгений Жученко: кривизны то нет, просто не привык к ним, потом может как нибудь займусь изучением нормально

[Evanre]

Александр Власов: Рекомендую. Верстка облегчается в разы.

[Jimmy Neutron]

Евгений Жученко: Ну надо разобраться с ним

Answer 4

[Vasyl Kovbassa]

Скачай себе Миксины от сетки bootstrap 4 и тебе с головой хватит.
А если хочешь мега гибкую систему + приключений на свою задницу + сломанные мозги твой выбор - Susy
Добавил
Кстати неплохой инструмент для тех, кто хочет сделать свою gird систему: breakpoint-sass

Comments

[dhat]

Bourbon тоже тема говорят))

[dhat]

Pavel Ustyugov: написано же - сетка из Бутстрапа 4.

[Vasyl Kovbassa]

1. Относительно Сьюзи.
Да, это возможно самый мощный на сегодня инструмент по построению сеток любых размеров с любым уровнем вложенности. Она без преувеличения может все что может придумать фантазия.
Но сразу тебя отговорю от этой затеи, так как сам уже успел встать на эти грабли:
- Достаточно высокий уровень вхождения. Не самая лучшая документация, оно и не удивительно, потому разработчики продают книгу с подробными туториалом от 99 до 199 $
https://learnsusy.zellwk.com/#signup
- Возможностей у реально очень много, а соответственно на обучение уйдет не мало времени.
- Наверняка не каждый заказчик будет рад если ты сделаешь заказ с использованием Сюзи. Ведь если в будущем нужно будет что-то переделать придется сначала найти человека, который это умеет. А согласно опросу по итогам 2016 года "The State of Front-End Tooling 2016" в мире среди фронтендеров есть 5.51% опытных пользователя этого инструмента и около 10% людей с элементарным понятием о нем, более 50% разработчиков вообще никогда не слышали о таком.
- Если же ты все таки решишься и пройдешь курс самурая)) То в конце тебя ждет еще одно разочарование. 90% всех возможностей этого инструмента просто некуда применить. А с 90% задач с которыми ты сталкиваешься бутсрап справляется на ура.
- Ну и напоследок, хотя многие гуру фронтенда очень положительно отзываются о сабже и многие из известных сайтов сделанные на нем. Сюзи это система сеток на основе плавающих блоков, а мы потихоньку входим в эру Flex-верстки.

[Vasyl Kovbassa]

2. Относительно bootstrap 4.
Вплотную НЕ юзаю потому что Стараюсь придерживаться BEM методологии и вообще не люблю когда код ведет себя не предсказуемо, а с чужим кодом увы такое не редкость. У меня не слишком много практики в верстке, я скорее учусь потому, стараюсь все делать сам, чтобы набить руку. Но bootstrap 4 включает в себя достаточно много классных миксинов которые можно скачать и использовать.
Также нравится их Reboot, как надстройка к Normalize. Организация глобальных переменных, в соответствии со значениями которых Миксины ведут себя по-разному. Ну и сама система сеток, которая позволяет использовать и плавающие блоки и флексбокс.

[dhat]

Vasyl Kovbassa: пока вступим в эру Flex верстки вылезет Grid))

[dhat]

Vasyl Kovbassa: breakpoint-sass - разве это инструмент? Это кажется только коротенькая инструкция как юзать медиа запросы в Сасс. Или я не так понял?

[Vasyl Kovbassa]

dhat Относительно Bourbon - система сетки и конечно более гибкая. Но опять же, а нужно ли?
Сейчас все наоборот призывают писать код максимально просто и поминимуму использовать всякие хитроумные миксины в которых сам автор через неделю уже не может разобраться. Но они сейчас работают над релизом Bourbon 5 посмотрим.

[Vasyl Kovbassa]

dhat Нет, это такая небольшая библиотека миксинов для медиа запросов. Насколько я помню ее с начала разрабатывали как часть фреймворка compass создатели Sass когда еще не было Susy а затем она вылилась в отдельный проект. Ее можно скачать через Боуэр или git, или подключить в настройках компаса.

[dhat]

Точно, нарыл ссылку. Эти гении ее не указали четко на странице - https://github.com/at-import/breakpoint

[Vasyl Kovbassa]

Ну оно было актуально во времена, когда Sass только появился, а бутстрап был на less и не таким популярным был mobile first подход. А сейчас разработчики подзабилы немного...

[Clever_Coyote]

Перегиб про susy) За день его разобрать можно, достаточно глянуть на ютубе курс, потом по необходимости в доки смотреть

[Alex Titakoff]

Clever_Coyote: +1 к susy

Answer 5

[Mike]

Susy Layout + Breakpoint SASS - если нужна поддержка от IE9+
Flexbox + Breakpoint SASS - если не нужна поддержка от IE9+
Всё вместе, если хочется магии поддержки всякого говна вроде Safari #5 под Windows.

Пожалуйста никогда не используйте Bootstrap.

Comments

[Vasyl Kovbassa]

Bootstrap? Почему?

[Mike]

Vasyl Kovbassa: потому что это инструмент прототипирования, это раз. и два, это то что ни один верстальщик не будет править текущие стили буцтрапа, а будет вешать свои поверх. это порождает кашу буквально через 1 месяц разработки.

Answer 6

[amorphine]

Semantic UI

Answer 7

[Vik Ewoods]

руки

Comments

[Роман]

и голова, да? :-)

[Vik Ewoods]

конечно!

Answer 8

[Alex Fastovets]

Тю, вот я не понимаю, вбиваешь тут на сайте поиск - "адаптивная верстка", и там рассказывают кто чем и как и почему пользуются! #непонятнА

пс: практически везде использую UIKIT

Answer 9

[bro-dev]

Если хотите действительно адаптивный только медиазапросы. Любые доп. абстракции привяжут вас к каким то конкретным состояниям в которых сайт будет выглядит норм, а в промежуточных все поедет.
Например сам сайт бутстрапа getbootstrap.com на пол экрана если браузер сделать с фуллхд разрешением, меню уже едет.

Comments

[Vasyl Kovbassa]

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

Answer 10

[xtozna]

Флексбокс, медиазапросы, calc(), vh, vw. Иногда Bootstrap(если он уже есть на проекте).