Ответы пользователя по тегу Вёрстка
  • Что верстальщики хотели бы донести до веб-дизайнеров?

    MyaFF
    @MyaFF
    Верстальщик
    Если опустить банальности....
    Узнайте (если еще не знаете) о композиции слоев и комментариях в фотошопе. О композиции слоев особенно.
    Текст пиксель-в-пиксель от края до края блока и больше места не предусмотрено - считайте, что он не влез.
    Рисуя версию для мобилы шириной 320, держите в уме, что ее растянут до 650-760.
    Рисуя версию для планшета, держите в уме, что ее скорее всего будут и тянуть в большую сторону, и сжимать в меньшую по ширине. Не надо делать элементы совсем впритык, оставьте место для маневра.
    Помните, что у видео-проигрывателей и карт есть элементы управления (и если вы вдруг решили наложить перекрывающий карту слойчик и в нем инфу - покажите, что вы планируете делать с элементами управления).
    Комментируйте состояния (или соответствующе называйте слой) - просто три кнопки/ссылки разного цвета - это просто три разные кнопки/ссылки.
    Помните, что у полей форм есть состояния: обычное, в фокусе, заполнено, заполнено правильно (по желанию), заполнено не правильно, disabled, некоторые поля требуют пояснений по заполнению. У самой формы есть состояния - отправлена успешно, ошибка - не правильно заполнена, ошибка - не отправлена хз почему. Покажите ответы формы, если у вас формы и на странице, и во всплывашках, и хз где еще - покажите для каждого вида. В макетах надо показать все виды полей (хотя бы основные), а не только те два текстовых поля, которые требуются в конкретной форме "заказать звонок".
    Типовая текстовая страница должна содержать оформление основных текстовых элементов (заголовки, абзацы, списки всех видов, таблицы, картинки и их взаимодействие с окружающими элементами. А не только заголовок и пару абзацев.
    256 оттенков серого и текст размеров 12, 13, 14, 15, 16, 18, 20, 22, 24, 26 итд. конечно держат верстальщика в тонусе, но все же старайтесь несколько ограничивать палитру и количество стилей текста. Будет неплохо, если в них даже будет какая-то логика.
    Используя все доступные начертания парочки шрифтов в макете помните, что парочка шрифтов по 8-10 начертаний - это 16-20 подключаемых шрифтов, а не 2.
    Иконки и картинки смарт-объектами - это удобно, очень.
    Ответ написан
    Комментировать
  • Как сделать margin-bottom всем inline-block которые "не в последней строке"?

    MyaFF
    @MyaFF
    Верстальщик
    Обратите внимание на статью Количественные селекторы CSS
    Конкретно по вашему вопросу вам уже дали хорошее и простое решение, но в статье описаны решения для множества подобных и сложнее ситуаций.
    Ответ написан
    1 комментарий
  • А вы используете Flexbox в продакшене?

    MyaFF
    @MyaFF
    Верстальщик
    Около года назад начали использовать на некоторых блоках, если в ТЗ нет требования IE8+ (по умолчанию его нет уже давненько), основную сетку пока используем бутстрап. Тоже вот думаю, не пора ли и основную сетку флексами делать.

    А у банка (и у госов и "окологосов") скорее всего будет нужна поддержка самых распоследних динозавров
    Ответ написан
    Комментировать
  • Как разделить таблицу на части (сохранив размеры колонок)?

    MyaFF
    @MyaFF
    Верстальщик
    codepen.io/anon/pen/RryLZG

    (изменено анимируемое свойство, требуется поддрежка CSS-transform, минус - информация под таблицей все равно скачет)
    Ответ написан
    Комментировать