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

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer


    Вариантов много. Например, так.
    Здесь я применил свойство aspect-ratio, просто чтобы сократить код, и побыстрее написать пример. Вы можете использовать хак с паддингом и дополнительным элементом для круга, если нужна поддержка более старых браузеров.
    Ответ написан
    Комментировать
  • Как в Bootstrap 5 сделать ширину контейнера 100%?

    delphinpro
    @delphinpro
    frontend developer
    Нужно понимать, как работает сетка бутстрапа.
    Если вам нужно задать фон для шапки, можете использовать обертку
    <div class="header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="jumbotron">
              <h1>hello</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

    .header {
      background: gray;
    }

    или задавать фон для элемента .row
    <div class="container-fluid">
      <div class="row header">
        <div class="col-md-12">
          <div class="jumbotron">
            <h1>hello</h1>
          </div>
        </div>
      </div>
    </div>
    Ответ написан
    Комментировать
  • Как назвать эту панель при вёрстке?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    chat, favourites, profile

    user-area
    personal

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

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ответ написан
    1 комментарий
  • Что прописывать в alt аттрибут?

    delphinpro
    @delphinpro
    frontend developer
    Иконки не являются частью контента. Они несут только визуальную нагрузку. Оформительскую. Для машинного чтения бесполезны, даже вредны.
    Представьте, что вы "просматриваете" страницу скринридером. И он начинает вам зачитывать описания иконок. Оно вам надо? Вы пришли за информацией.
    Поэтому иконки вообще не следует верстать тегом img. А уж если сверстали, то оставьте alt пустым и добавьте role="presentation"
    Ответ написан
    2 комментария
  • Что значит инкапсулировать правила?

    delphinpro
    @delphinpro
    frontend developer
    Нужно взять файл сетки https://github.com/zachacole/Simple-Grid/blob/mast...
    Убрать оттуда общие классы и теги, оставить только сетку.
    Всем классам сетки (container, row, col) добавить какой-либо префикс. Например sg-.
    Скомпилировать файлик.
    Ответ написан
    Комментировать
  • Как разместить два дива поверх картинки? У родителя relative, у детей absolute, однако все равно не работает, что не так?

    delphinpro
    @delphinpro
    frontend developer
    relative должен быть у .banner
    Ответ написан
    Комментировать
  • Кто нибудь поделиться примером ФИО для рыбы максимально разумной длины?

    delphinpro
    @delphinpro
    frontend developer
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut cumque dolore doloremque eius et ex fuga iste laboriosam magni maxime molestiae necessitatibus nostrum, optio quae, quasi quisquam reiciendis sunt!

    Нельзя завязываться на максимально возможную длину. Верстка в идеале не должна ехать при любой длине контента.
    Ответ написан
  • Как убрать прыжки кнопки при открытии modal на Bootstrap-5?

    delphinpro
    @delphinpro
    frontend developer
    Слушать событие открытия модалки и добавлять вручную паддинг-райт всем блокам в фиксированной позицией растянутым во всю ширину (по аналогии с бади)

    Имейте ввиду, что паддинг не должен быть фиксированным. Это ширина скроллбара, которую нужно вычислить программно.
    Ответ написан
    Комментировать
  • Как мне поместить содержимое одного div выше соседнего?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Нужно вынести попап из первой колонки.
    Вообще попапы обычно делают прямыми потомками body и размещают в конце всей разметки.
    Ответ написан
    Комментировать
  • Почему в IE 11 svg в shadow dom не видна?

    delphinpro
    @delphinpro
    frontend developer
    https://github.com/jonathantneal/svg4everybody

    Или самостоятельно нужно вставить содержимое всего файла со спрайтами на страницу (полифил именно это и делает).
    Ответ написан
  • Как правильно задать контейнер?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Непонятно.
    Если он не может быть меньше 1200, то задавайте min-width:1200px
    Ответ написан
  • Как правильно сверстать?

    delphinpro
    @delphinpro
    frontend developer
    body{
        width: 1080px;
        /* … */
    }


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

    Рекомендую погуглить основы адаптивной верстки.
    Ответ написан
    Комментировать
  • Идеальный алгоритм вёрстки сайта?

    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 комментарий