В рамках данной заметки расскажу про личный опыт работы с Webflow. О том, удобно ли использовать для больших проектов и как в целом там выстроена работа.
Введение
Хотелось бы начать с того, что я уже бывалый верстальщик и в целом произвел сотни работ, однако, как бы я ни старался, на средний лендинг уходит порядка 5 часов, а постдоработка еще часа 2-3.
Как понимаете, с большими проектами все еще веселее и мне хотелось ускорить этот процесс. В следствие чего, постоянно искал новые пути ускорения разработки. Однако было необходимо иметь на выходе хороший код, с которым можно было бы и дальше работать.
Пару лет тому назад было приложение, которое подавало надежды — Macaw. Хоть оно и было тормознутым, однако на выходе был идеальный код, мог сам руками дописывать что нужно + удобная работа с адаптивкой. Но пздц, подкрался незаметно и разработчиков выкупила invision и проект загнулся.
Однако примерно в это время, на рынок вышел сервис webflow со своим продуктом, к которому я отнесся очень скептически из-за того, что это исключительно web-приложение. А мне хотелось работать и offline.
Шли годы, шли роды, и в результате я все-таки попробовал разобраться. Случилось это этим летом. И если сказать, что я в восторге, то значит ничего не сказать. Проблему с сетью я решил тем, что просто раздаю постоянно интернет с телефона на все устройства, а в планшете есть симка, поэтому тут вопрос закрыт.
Про WebFlow
Если коротко, то это конструктор сайтов который основан на принципе ручной верстки. Точнее сказать, вы все делаете визуально и не лезете в код, однако позиционирование элементов происходит такое же, как при наборе кода руками.
Отступы, позиционирование и прочие стили задаются НЕ с помощью абсолютного позиционирования, как в других конструкторах, типа tilda или web builder, а относительно других элементов педдингами и мерджинами и подобными методами
Также, более удобно построена работа с брейкпоинтами при адаптивности сайта. Не самый гибкий вариант, конечно, однако наглядный и заставляет тебя делать более обдуманные варианты.
У нас есть выбор семантических тегов для элементов и возможность прописывать классы, а так же ID, data-* аттрибуты и многое другое.
Помимо этого, можно сделать сниппет, прямо как в figma и использовать элемент дальше без горожения лишнего кода. В общем, все сделано весьма удобно, особенно для бывшего верстальщика. Хотя вестальщики бывшими не бывают.
Мы можем добавлять свой кастомный код, для изменения некоторых стандартных стилей, к примеру точек прокрутки в слайдере. Как вы видите, они выглядят стремно, однако я их сам стилизовал под задачу. Это требуется редко, поэтому вы не часто будете использовать «ручной» код.
Ну и самое главное, за что любят webflow — анимация. Здесь она очень прогрессивная. Я не очень люблю когда все свистопердит, однако простенькие эффекты употребляю в проектах. Пример чуть ниже.
Анимации создаются просто, однако нужно сначала правильно понять логику. Про это я буду рассказывать в отдельных видео, поэтому подписывайтесь на мой youtube канал.
Не без минусов
Да, в бочке меда не без ложки дегтя.
- Нельзя работать с псевдоклассами :before, :after, :nth-child и подобными. Стилизуются только состояния элементов. В некоторых случая очень сильно бьет по яйцам.
- Состояния применяются только с своему классу, но не ко вложенным в него элементам. Немного неверно написал. В общем, задача: нужно увеличить картинку и изменить цвет текста у карточки при наведении на весь блок. Такое можно сделать только с помощью анимации, однако это решение тянет за собой использование JS, что грустно. Однако такие стили можно прописать руками.
- Немного не логичная интерпретация некоторых готовых модулей. К примеру «dropdown». На кой то хер оно оборачивается в тег nav. Хотя я делаю частые вопросы и тут нужно кое-что другое.
- Очень неудобная вставка кода. Однако я нашел метод более удобный. В подвал сайта, в самый низ вставляю блок HTML и в нем пишу, что мне нужно, а глобальные коды уже подключаю в настройках проекта.
- Если чистишь код, как я, например удаляешь лишние id, data и прочую лишнюю информацию для последующей посадки на движок, то могут происходить проблемы. Ну это и понятно, однако если удалить это все из
<html>то вылазит проверка формы, мол ее нет и проверить не получается. Прям бесит и порывшись в js я так и не понял как удалить. Однако если не трогать, то все отлично и в целом это никак на сайт не влияет, чисто моя придирка.
В заключение
Webflow — Это удивительный опыт верстки сайтов. Я очень рад, что попробовал и буду продолжать использовать ибо скорость разработки выросла процентов на 40. И это с учетом того, что я еще разбирался и приложении и смотрел внешние западные уроки. Да, на русском языке полная борода с этим.
При работе с webflow нужно просто понять логику построения и то, как работают все элементы. Мне, как бывалому, было приятно поучаствовать новый опыт. А при работе с flex и grid css я просто кайфанул. Просто потрясающе, просто мышкой тащишь что и куда нужно, прямо визуально все редактируешь. Это действительно здорово. Раньше я особо не использовал grid, но теперь — постоянно!
Поэтому рекомендую хотя-бы попробовать бесплатную версию. Она ограничена лишь количеством проектов и возможностью вставлять свои коды на сайт. В остальном все будет круто. Попробовать WebFlow можете здесь: https://webflow.com/
