Ответы пользователя по тегу Вёрстка
  • Идеальный алгоритм вёрстки сайта?

    delphinpro
    @delphinpro
    frontend developer
    В целом согласен. До пункта №7.

    Я обычно придерживаюсь принципа верстки независимыми блоками.
    Поэтому после анализа макетов, я делаю одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаю:

    1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
    2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

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

    Для этого всё закидываю на гитхаб-пейдж, чтобы по ссылке я мог открыть с телефона или попросить знакомого проверить на другой ОС c телефона


    Это лишняя трата времени. Пусть небольшая, но все же. Плюс, отслеживать качество верстки все-таки удобнее в процессе, а не по окончании подкручивать.
    Поэтому используем browser-sync. Поднимается сайт, доступный по IP в домашней локалке с любого устройства. Совет: использовать всегда один порт в browser-sync, а на устройствах сделать закладки на этот адрес. Любой сайт, который в данное время разрабатывается, открывается одним тапом по закладке.
    Кроме того BS дает бонус в виде синхронизации действий сразу на всех устройствах: клики, прокрутка, ввод. Это мега-удобно — кликаешь на компе, краем глаза смотришь в планшет и телефоны, сразу видишь там все изменения и поведение.

    Всё готово, сжимаю CSS, JS. через веб-сервисы.


    Опять тратите время. Настроенный Gulp в одну команду проделает все оптимизации (на больших проектах даже кофе можно успеть сделать, пока собирается билд=).

    Еще обратите внимание на инструмент lighthouse в инструментах разработчика.

    скриншот
    608fcaa260f31153020142.png


    Не нужно никуда сайт заливать, чтобы проверить на доступность, производительность и т.п.

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

    Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.


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

    Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.


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

    Префиксы? В кодовом редакторе они и так есть.


    Я считаю, что исходный код должен быть чистым, без префиксов. Это лишний визуальный мусор. Пусть лучше автопрефиксер этим занимается. К тому же этот плагин использует актуальную базу caniuse на основе вашего .browserlist. Пусть профит и не большой, но все же поменьше на выходе неактуальных свойств.
    Ответ написан
    2 комментария
  • Что правильнее использовать?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Вопрос: как правильнее?

    Никак.
    Оба подхода имеют право на жизнь.

    Плейсхолдеры, при правильном использовании, немного сокращают выходной css код.

    Такое ваше использование очень смахивает на atomicCSS.
    Может так и стоит поступить?

    Сделать кучу классов

    .d-flex { display: flex; }
    .justify-content-between { justify-content: space-between; }
    .direction-column { flex-direction: column; }


    И потом использовать либо классы в разметке, либо расширяться прямо от них

    <div class="d-flex justify-content-between"></div>

    .some-class {
      @extends .d-flex;
      @extends .justify-content-between;
    }


    Ой! Мы, кажется, переизобретаем bootstrap...
    Ответ написан
    3 комментария
  • Объясните, что за штука с отступом?

    delphinpro
    @delphinpro
    frontend developer
    Проблема стара как мир (на самом деле не проблема, а фича)

    https://yandex.ru/search/?text=выпадение%20внешних...
    Ответ написан
    Комментировать
  • Как верстать много страничные сайты?

    delphinpro
    @delphinpro
    frontend developer
    Если ваша задача сверстать сайт, то какого хрена речь заходит об реакте и иже с ними? Просто верстаете несколько страниц. На выходе должны быть файл с чистым html. ВСЁ!
    Вы можете облегчить себе работу, используя галп, и шаблонизаторы (gulp-twig, gulp-pug).
    Ответ написан
    Комментировать
  • Как сделать прозрачный border?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Если решать задачу "в лоб", без поиска оптимальных вариантов, то получится примерно так

    Для одного блока совсем всё просто:



    Для нескольких немного усложняется, но принцип оставляем тот же:

    Ответ написан
    1 комментарий
  • Что это за тэги?

    delphinpro
    @delphinpro
    frontend developer
    Комментировать
  • Можно ли закидывать в портфолио работы, которые я сделал по найденным psd макетам в интернете?

    delphinpro
    @delphinpro
    frontend developer
    Вопрос 1: кто проверять будет?
    Вопрос 2: какая разница, реальный или нет проект? Вы сверстали, ваши скилы видно.
    Ответ написан
    Комментировать
  • Input radio, расположение?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ответ написан
  • Зачем нужен tabindex?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    tabindex=0 делает элемент доступным для выбора клавишей tab. Порядок при этом назначается автоматически, обычно, в порядке следования элементов на странице.
    tabindex=-1 соответственно, делает элемент недоступным для выбора клавишей tab

    UPD

    Нужно мне было просто ссылку оставить на документацию https://developer.mozilla.org/ru/docs/Web/HTML/Glo...
    Цитата оттуда:

    • если представлено отрицательное значение – элемент может быть выделен, однако не участвует в последовательной навигации;
    • если представлен 0 – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
    • если представлено положительное целое значение – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение tabindex, их порядок навигации определён относительным расположением в документе (DOM).

    Ответ написан
    3 комментария
  • Из чего составлять портфолио верстальщику?

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

    Если нет желания тратиться на собственный домен (560р/год в зоне ru), для демонстрации верстки вполне можно ипользовать github pages. Тройной бонус — бесплатно, виден результат, виден код.

    Если 560 р/год не жалко, можно и домен приобрести, сделать свой сайт, разместить на нем портфолио, резюме, вести блог разработчика.
    Ответ написан
    Комментировать
  • Нужно ли подключать все форматы шрифтов?

    delphinpro
    @delphinpro
    frontend developer
    Давно уже можно подключать только woff2 (он намного легче woff)
    Плюс woff, если вам нужно поддерживать древности, вроде IE11
    Ответ написан
    Комментировать
  • Как верстать под печать?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ну давай посмотрим на примере тостера.

    Попробуем распечатать страницу с вопросом.
    Для начала вопрос: для чего мы его распечатываем? Очевидно, нам интересен вопрос, и главное его решение. Именно это мы хотим распечатать на бумаге.

    Что же нам предлагают верстальщики из ТМ?
    5f98935dba783645914348.png


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

    Смотрим дальше
    5f98942e4692f875969058.png


    Форма комментирования. Ну что же. Наверное я отстал от современных технологий в своей деревне и во всем мире уже давно можно комментировать распечатанные страницы...

    В самом конце аж три листа совершенно бесполезной информации.

    В общем мы видим совершенно не оптимизированную под печать страницу.

    А вот если не забывать про печатные устройства, можно все это лишнее как минимум спрятать.
    Ответ написан
    2 комментария
  • Вёрстка по фтп?

    delphinpro
    @delphinpro
    frontend developer
    Что значит верстать прямо на хосте?
    Бывает, просят сделать страницу сразу на рабочем сайте.
    Если у заказчика обычный шаред-хостинг, а так всегда и бывает, редко у кого vps, то ноду вы туда никак не поставите. А даже если и vps, то тоже не стоит лезть со своим самоваром.

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

    delphinpro
    @delphinpro
    frontend developer
    Зачем очищать-то постоянно? Это же ужасный геморрой. просто откройте devtools

    5f72ec6eec94f655452702.png

    Пока консоль открыта, кеша не будет.
    Это скрин из хрома. В мозилле точно так же.

    5f72eced49267576013138.png
    Ответ написан
    1 комментарий
  • Как сверстать такую кнопку?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Если фон одноцветный, разделите кнопку на геометрические примитивы и соберите из них.
    Навскидку, здесь скругленный прямоугольник и треугольники. Как вариант — прямоугольник, треугольники и круги.
    Есть еще варианты:
    - нарисовать подложку градиентами на фоне прямоугольной кнопки
    - использовать clip-path
    Ответ написан
    Комментировать
  • Как можно подключить bootstrap grid сетку, не подключая bootstrap стили?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Когда мне нужна только сетка, я подключаю этот свой пакет
    https://github.com/delphinpro/bs-grid-system
    Ответ написан
    Комментировать