Ответы пользователя по тегу Вёрстка
  • Как выровнять масштаб и положение картинок в блоках для сайта в Photoshop?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Дополню ответ azerphoenix.

    Все иконки стоит обрабатывать вручную, так как:
    1. В верстке они регулируются только по ширине. Да, можно задать условия выравнивания относительно друг-друга или захардкодить размеры, но чем дальше, тем сильнее сердце сжимает от костыльности решений. Базово это ширина. Следовательно, чтобы все они были +- на одной горизонтальной оси — их надо сделать одинаковой высоты и выровнять прямо в ФШ. Верстальщик, если это не ты, спасибо скажет.
    2. Все иконки имеют разный визуальный вес и за счет масштабирования ты, как дизайнер, можешь привести их к единому знаменателю, опять же, вручную.

    3. Их всех стоит загнать в сетку, к примеру на flex-ах, вместо того, чтобы прямо картинки в ряд выстраивать.
    Ответ написан
    1 комментарий
  • Адаптация дизайна под ширину устройства - работа дизайнера или верстальщика?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Я придерживаюсь нескольких взглядов:
    1. Все, что нарисовано может быть сверстано (и при этом хорошо, да)
    2. Дизайнер должен понимать, вне зависимости от квалификации, базовые понятия переноса макета в верстку, т.е. в том числе многоколоночное построение. Как минимум для того, чтобы не быть обманутым фичами в редакторе (XD к примеру для мобилки выстраивает 4-колоночную сетку, что в общем неприемлимо для стандартного подхода неимзменяемого количества колонок на всех разрешениях).
    3. Верстальщик должен уметь понимать дизайнера, его условности, чтобы как минимум донести мысль через аппарат бюрократии или просто напрямую.
    4. Верстальщик в идеале должен иметь навык дизверстки.

    При этом да, бюджет, в основном это:
    1. Где-то нанятый недоучка\начинающий дизайнер, который просто срубил деньжат на скорую руку, а его клиент сэкономил. Он, логично, знать про все это еще не знает.
    2. Вы работаете в одном офисе и можно подойти надавать по щам, да пояснить за жизнь.

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

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

    ЗЫ: в работе я вообще достаточно радикализирован, например общаясь с заинтересованными дизайнерами, которые хотят меня сменить я всегда требую сверстать то, что они нарисовали. Всегда глаза по 5 копеек и поэтому у меня до сих пор нет штатного дизайнера.

    А при работе с внешними дизайнера на подсосе (картинок наделать, например), всегда пишу подробные требования с иллюстрациями.
    Ответ написан
    Комментировать
  • Как можно выровнять столбцы с блоками по высоте?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Присмотрись к https://masonry.desandro.com/. Если сам тебе он не поможет, так хоть сырцы можешь глянуть и под себя логику загнать.

    PS: есть лайфхак с columns, они для другого, поэтому, чтобы их применить придется изрядно повозиться и это скорее костыль.
    Ответ написан
    6 комментариев
  • Html/css + flexbox или bootstrap4 для заказчика?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Все эти термины идут неразрывно друг от друга.

    Сам бутстрап, как фреймворк полностью построен на html+css+js, в том числе флексбоксах (сетка).
    Ответ написан
  • Какой размер картинок нужно делать для мобильной версии?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Плясать надо от брейкпойнтов + делать поправку на экраны повышенной плотности. В среднем используется 3 брейкпонта, следовательно при классово верном подходе необходимо нарезать минимум по 2 пикчи для каждого брекпойнта и экрана повышенной плотности = 6 картинок.

    В принципе можно и оптимизировать, если удасться словить двукратное увеличение между брейкпойнтами. Т.е. брать не 2x от разрешения картинку, а от следующего брейкпонта, но это из области фантастики и больших бюджетов.
    Ответ написан
    Комментировать
  • Что делать с отступами вокруг текста?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Краткий экскурс — типографике в вебе = боль. Наслаждайся. Ничего общего с полиграфией, хотя хотелось бы.

    Теперь по сути:
    1. Править руками частные случаи. Тут возможностей просто море, от line-height:1 (норм) до абсолютного позиционирования (плохо).
    2. Постоянно и везде, поэтому стоит понимать анатомию шрифтов, чтобы знать, как с ними работать. Ну и да, никакой Zeplin тебе эту магию не выдаст, так как это программа, которая просто транспонирует свойства редактора (читай все абсолютно спозиционировано) в типа CSS.
    3. Да, главное не прострелить себе ногу при этом. Т.е. скорее всего не стоит к такому прибегать.
    4. Заказчику важно сделать деньги на том проекте, что ты реализуешь.
    5. Да есть, типа Baseliner-а, или всякие плагины для накладывания полупрозрачной пикчи поверх верстки, но вообще это все от лукавого.
    Ответ написан
  • Как увеличить svg, чтобы адаптив не сказал пока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    SVG по своей сути и названию масштабируемая графика. При интеграции ее в тело документа ты указываешь ей фактические размеры (хотя бы для одного из брекпойнта). Если же интегрируешь с помощью object, то max-width:100%, таким образом SVG будет всегда вписана в область, которая ей отведена.

    Следовательно, в конечном счете размер вектора зависит от родителя (если ты не накосячил, конечно).

    Исходя из этого ты можешь абсолютно позиционировать родителя SVG таким образом, чтобы он занимал столько места от секции, сколько есть в макете. При этом, врядли тебе будет доступен z-index:-1, тогда тебе необходимо будет задать родителю SVG (или ей самой, если ты без родителя обошелся) z-index:0, а форме свойства position:relative;z-index:1;, чтобы она [форма] могла «лечь» поверх пикчи.

    Фоном делать не рекомендую, так как в случае с SVG ты потеряешь возможность точно управлять ей.

    А начать постигать дзен SVG можно отсюда.
    Ответ написан
    Комментировать
  • Как правильно делать адаптив верстки под большие экраны?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Mobile first уже не первый год оправдывает свое существование. Оптимальнее идти от меньше к большему в верстке.
    2. Для использования различных изображений используется srcset в img или picture тегах.
    3. Большой монитор (чаще широкоформатный) != ретина дисплей (дисплей с повышенной плотностью).
    4. Для нестандартных мониторов, в том числе широкофматных нужен макет, либо ответственность за изменения макета (вообще круто, когда широкоформатка отображает подогнанный под нее дизайн), в противном случае центрируй основной контейнер. Даже при подгонке под широкоформатку имеет место быть центрированный контейнер.
    5. Такие изощрения сами по себе никакого отношения к SEO не имеют. Важно, чтобы сайт адаптировался под мобилку, так как поисковая выдача все больше идет на них.
    6. При такой постановке вопроса ты скорее всего запорешь оптимизацию проекта, либо наделаешь кучу ошибок по валидации и без удержания внимания на сайте при естественном продвижении скорее всего будешь болтаться где-то в конце списка.

    Как правильно делать адаптив верстки под большие экраны?

    Иметь макет для подобных форматов или иметь опыт дизверстки.
    Ответ написан
    Комментировать
  • Как адаптивно сверстать такое меню средствами Bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

    Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

    Структурно же у тебя все вписывается в сетку и логику:
    container-fluid
    →container (верхняя часть шапки)
    →container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

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

    PS: в идеале решение должно быть mobile-first (так проще).
    Ответ написан
    Комментировать
  • Как сделать верхнюю шапку длиннее?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Чтобы шапка была во всю ширину экрана, и при этом сам контент вписывался в общий контейнер ее делают в два уровня тегов. Верхний → по сути только ради фона, а внутри тот, который задает ширину макета + margin:auto (к примеру) для выравнивания посередине.
    Ответ написан
    Комментировать
  • Как добавить отступ к ссылке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    SVG, как и изображение требует фиксированных размеров в соответствии со своими исходными параметрами, в img это размер кратинки, в SVG это вьюпорт канвы, на которой он был создан.

    А потом этим размеры изменяются с помощью CSS, например max-width: 100%. Но так просто это сработает только с картинками, по идее с object тоже. Будет проще, если ты ресурс SVG вставишь в IMG, минус возможности, плюс к адаптации, как для новичка.

    К слову, данный вопрос не имеет никакого отношения к Bootstrap-у.
    Ответ написан
    Комментировать
  • Какой вариант выбрать для верстки сайта с заданными элементами?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если нет желания идти и специализированно получать знания у кого-то, то ты можешь почерпнуть достаточно разумные подходы у фреймворков, да. Например у этого https://getbootstrap.com/.

    У них из коробки есть и шапка и карусель и баннеры и большинство основных элементов для сайта.

    Не рекомендую бездумно копировать, а советую взять компонент, изучить, разобрать на части, понять, как работает → написать самому. Ничего сложного в этом нет.
    Ответ написан
  • Вопрос к опытным верстальщикам от студента?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Я наставничаю по фронту и вот что скажу. Когда ты учишься по программе, то использовать готовые решения — почти табу, так как задачу обучения — научить верстать, а не копировать. Т.е. привить понимание того, что ты делаешь.

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

    Поэтому как для этапа обучения — все верно, учись сам такое делать, к тому же ничего сложного. Как для реальной жизни — бред, использовать такой подход вполне законно.

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

    Самую малость оффтопом: я считаю нормой давать сперва материал по конкретным технологиям, а потом дополнять упрощениями, библиотеками и т.д. А не наоборот, когда сперва учишь как использовать бутстрап, а потом объясняешь, к примеру, зачем нужен aria-label.
    Ответ написан
    Комментировать
  • Почему в некоторых случаях не указывают класс в html, в частности для h5?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    Вариантов несколько:
    1. Автор пролюбил класс, но успел начать.
    2. Класс очищается JS
    3. Автор перенес откуда-то из доков верстку, но ему показалось, что классы лишние, а убирать сам атрибут не стал.
    4. Автор мазохист и ловит только h5, у которых есть атрибут class (читай подробнее в селекторах)
    5. Автор просто идиот.
    6. Класс раздается автоматически, например, бэком, и условие при рендере не выполнено, отчего класс оказался пустым.
    7. И т.д.

    Автор кода, верстала т.е.
    Ответ написан
    1 комментарий
  • Как реализовать выход блока за контейнер?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если ты хочешь сделать переполнение, то просто запрети перенос элементов внутри зеленого блока. Сделать это можно с помощью flex-wrap: nowrap, если он уже флексбокс. Но ты можешь его таким сделать, добавив свойство display: flex. Это я все еще про зеленый блок.

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

    Между делом, чтобы снизить количество багов, тебе скорее всего потребуется дополнительно обернуть в блок, который будет занимать оставшееся от соседнего синего с текстом до конца родителя (черного).

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

    Даже если ты решишь реализовать это с помощью абсолютного позиционирования, размеры тебе все равно придется считать с помощью JS.

    Ну а если же тебе надо просто, чтобы оберазалась правая часть слайдера при переполнении (скажем для эффекта появления из-за границы черного блока), то ничего считать не надо, просто делай первые пункты выше.
    Ответ написан
    Комментировать
  • Как создать форму ввода данных на сайте?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Form, внутри которой input type checkbox\radiobutton (выбор да нет) + range (для ползунка) и кнопка либо button, либо input type submit.

    И кастомизировать внешний вид + немного JS, чтобы ползунок при вводе показывал текущее значение. Из коробки HTML так не умеет.
    Ответ написан
    Комментировать
  • Почему вертикальное выравнивание текста работает по разному на десктопе и мобильных устройствах?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Выше тебе показали метрики. Ты можешь на базе их создать канву для иконки, чтобы, вписать ее, скажем, в x-height, да экспортировать в виде кода, задать ей свойства inline уже в html-коде, чтобы она встроилась, как текст.

    Придется пошаманить с настройкой ее как инлайновой (да или inline-block) единицы, но оно того стоит. По этому принципу можно и регулировать свои иконочные шрифты под основное начертание в проекте. Но это уже другая тема.
    Ответ написан
  • Одновременно вырубились два сайта с одинаковыми темами. Wordpress. Что это может быть?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    И смех и грех.

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

    Искать надо в сторону таких вот зависимостей. Ибо за вирусы хостер бы первый завопил с большей вероятностью. А некоторые, к слову, иногда подсказывают, что именно дает такой таймаут (я пока одного встречал хостера).
    Ответ написан
  • Как сделать кнопки с годами, в которых менялся бы контент?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Это обычная табуляция.
    Если хочешь минимум заморачиваться, заюзай какой-то JS -фреймворк, который позволит хранить состояние.
    Либо выводи шаблонизатором от бэка + табы от бута.

    В любом случае это вывод циклом, сортированным по году. Ничего сложного.

    При всем при этом не рекомендую тащить все, что ты найдешь по ссылкам, так как если бездумно подключать все к своему проекту, то рано или поздно браузеры откажутся его запускать и грузить.
    Ответ написан
    Комментировать
  • Какие знания должны быть для первой работы верстальщиком?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. JS
    2. Фотошоп стремительно теряет в актуальности, поэтому посмотри в сторону Figma\Sketch.

    Если без второго можно прожить, то без базового JS ты никому не нужен.
    Ответ написан