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

    alvvi
    @alvvi
    export default apathy;
    Так вы ведь нигде текст не сохраняете, он попросту обрезается через вызов text.substr(0, i)
    и все, на странице его нет, как, вы предполагаете, он должен возвращаться?
    Ответ написан
    Комментировать
  • Как сверстать этот нестандартный макет админки?

    alvvi
    @alvvi
    export default apathy;
    Второе несложно сделать с помощью SVG, для первого попробуйте адаптировать уже существующие плагины для отрисовки графиков.
    Ответ написан
    Комментировать
  • Результаты работы верстальщиков - чего ожидать?

    alvvi
    @alvvi
    export default apathy;
    Очень странный вопрос, вас же не устраивает верстка, очевидно, что результат не нормальный. Тут вы решаете как заказчик. Семантика - это тоже часть верстки, вы в праве предъявить за нее притензию, необходимо было сразу проинспектировать написанный HTML и CSS, а то могло и что-нибудь похуже в итоге "оказаться".

    не подразумевая работу программиста в принципе.

    Собственно если заранее и не обговорена "работа программиста", то и не должна верстка ее подразумевать, но то что вы сказали - это ошибки семантики (пункты 1,2) и некачественно написанные стили (пункт 3), к бэкенду это не относится.
    Ответ написан
    Комментировать
  • Как правильно экспортировать svg из .psd файла?

    alvvi
    @alvvi
    export default apathy;
    Если в макете нормальный SVG - все спокойно экспортируется как через export as, так и через copy SVG в контекстном меню на слое с фигурой. Если же слой с SVG растрирован, нет смысла экспортировать его в SVG - в итоге внутри окажется только тег <image></image> с растровой png в base64. Обратите внимание на сам слой который экспортируете, он должен быть векторным. Ну и смотрите исходный код получившегося SVG, там все будет видно.
    Ответ написан
    Комментировать
  • Gulp не следит за изменениями в файлах .html и .css?

    alvvi
    @alvvi
    export default apathy;
    gulp.watch(paths.css, paths.html)
    Вы передали два разных аргумента, а нужен один.
    Попробуйте
    gulp.watch(['./path/to/styles/*/**.*.css ', './path/to/html/*/**.*html'])
    Ответ написан
    2 комментария
  • Как построить такую сетку?

    alvvi
    @alvvi
    export default apathy;
    У вас в макете хорошо виден отступ в одну колонку для второго блока и отсутствие этих отступов у первого, не ясно в чем вопрос.
    Но тогда в оставшиеся 10-колонок уже сложнее разместить информацию в три ряда

    В макете она размещена в 10 колонок? Если да, то не понятно в чем сложность. Если вопрос задан с точки зрения дизайнера, то делите внутри с другими интервалами, если считаете это необходимым. Это усложняет верстку, но не критически.
    Кроме того, тот межколоночный интервал, который использовался для ширины в 1200 уже оказывается неудобен

    Опять не ясно о чем вы. Если внутри 10 колонок в макете межколоночный интервал не по сетке, стройте внутри еще сетку с display: flex самостоятельно. Все зависит от секции, у вас на скрине таких проблем не видно.
    Ответ написан
  • Как сверстать разные типы страниц Wordpress?

    alvvi
    @alvvi
    export default apathy;
    Как сверстать разные типы страниц Wordpress?

    Создать кастомный темплейт и назначить его странице. Создается он в виде файла со специальным комментарием в папке с темой. Информацию можно найти здесь

    Разные шапки и подвалы можно вставлять обычными get_footer/get_header используя аргумент $name, e.g. если в папке с темой есть footer-foo.php, то get_footer('foo'); заинклюдит этот подвал, а не footer.php
    Ответ написан
    Комментировать
  • Как игнорировать системные шрифты на сайте?

    alvvi
    @alvvi
    export default apathy;
    @font-face?
    Google Fonts правда их же использует, не ясно в чем у вас проблема.
    Ответ написан
    Комментировать
  • Как сверстать подобный заголовок?

    alvvi
    @alvvi
    export default apathy;
    На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before.

    А чем вам h1 не угодил? Внутри можно span-ами разделить с display: block, и все будет семантично.
    Вариант со второй картинки делается с помощью max-width, без паддингов. ::before нужно спозиционировать только один раз, а родителю добавить position: relative.

    p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"

    Нужно чтобы везде было идеально, но проходишься в итоге все равно по точкам, желательно вообще не иметь @media не соответствующих заранее определенным брейкпоинтам (хотя есть исключения).
    Ответ написан
    2 комментария
  • Куда семантичнее класть H1 — в HEADER или в MAIN?

    alvvi
    @alvvi
    export default apathy;
    В упрощенном видео обычно либо
    <header><nav></nav></header>
    <main> 
      <section class="hero"><h1></h1></section>
    </main>

    либо
    <header>
       <nav></nav> 
       <section class="hero">
         <h1></h1> 
       </section>
    </header>

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

    alvvi
    @alvvi
    export default apathy;
    Так же как и любые другие картинки, разве нет? В чем конкретно проблема?
    $img_array = //... как-то получаем с бэкенда, сustom fields и тд
      <?php foreach($img_array as $img): ?>
         <div class="slide" style="background-image: url(<?php echo $img['url'] ?>);"> < / div >
      <?php endforeach; ?>

    Если интересует именно бэкенд, то https://codex.wordpress.org/Custom_Fields , можно использовать плагины типа ACF
    Ответ написан
  • Как "зафиксировать" ширину блока при присвоении position: fixed; и контролировать его поведение?

    alvvi
    @alvvi
    export default apathy;
    Вообще поведение полностью логичное. Вы сами пишите
    что, в принципе, естественно, т.к. отчет от экрана, и с этим можно бороться

    относительный размер (как у вас) тоже будет считаться от экрана.
    Насколько я понимаю эту проблему призван решить position: sticky, (поправьте, если нет) но работает он пока что далеко не везде.

    1. В любом решении без JS необходимо будет какое-то фиксированное значение, один из вариантов: добавить контейнеру фиксированный max-width, а блоку
    width: inherit;
    max-width: inherit;

    Таким образом блок унаследует max-width контейнера и не будет выходить за его пределы.

    2. Как контролировать поведение и сделать плавное "скольжение" блока без прыжков на старте?

    "Прыжок" в вашем случае это премещение на 12px от края экрана, поскольку вы добавляете класс с
    position: fixed 
    top: 12px
    только когда scrollTop становится равен offsetTop, а после этого он естественно отпрыгивает вниз на 12px. Чтобы избежать этого надо добавлять класс когда scrollTop равен (offsetTop - 12px), потому что в этом случае блок при добавлении будет уже в "нужном" месте.

    https://codepen.io/Alvvi/pen/MEXeaV
    Ответ написан
    Комментировать
  • Какое решения для использования медиазапросов с Sass вы считаете самым эффективным?

    alvvi
    @alvvi
    export default apathy;
    sass-lang.com/documentation/file.SASS_REFERENCE.ht... вот для scss
    для синтаксиса с пробелами вместо скобок, нужно, просто заменить скобки пробелами
    @media (max-width: 320px) 
      .hello 
        rule: value
    
    // а лучше
    
    .hello
      @media (max-width: 320px)
        rule: value
    Ответ написан
    Комментировать
  • Как оставить в bootstrap 4 только сетку и вспомогательные классы?

    alvvi
    @alvvi
    export default apathy;
    Вообще вот так:
    @import "functions";
    @import "variables";
    @import "mixins";
    @import "grid";
    @import "utilities";

    Если Gulp выдает вам какую-то ошибку, то надо смотреть, что за ошибка.
    Ответ написан
    Комментировать
  • Эпически-Бомбический пользователь - ГитХаб?

    alvvi
    @alvvi
    export default apathy;
    *кидает палкой*

    Прошу разъяснить мне бестолковому, как юзать ГитХаб, а точнее как посмотреть "промо" того или иного кода (без скачивания к себе и запуска index.html).

    Например использовать github pages
    https://pages.github.com/
    Или просто сделать сайт с демкой на отдельном хостинге и прикрепить ссылку в репо.
    Гитхаб - это не аналог codepen, это сервис решающий совершенно другие задачи.
    Ответ написан
    1 комментарий
  • Как писать стили для множества страниц?

    alvvi
    @alvvi
    export default apathy;
    Не создавать же свой отдельный CSS файл для каждой страницы

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

    он сразу все загружает когда мы зашли на сайт?

    По умолчанию так, но можно загружать что-то асинхронно.
    Ответ написан
    Комментировать
  • Два сета глифов у шрифта, как разделить?

    alvvi
    @alvvi Автор вопроса
    export default apathy;
    В общем, нашел какую-то олдскульную прогу под названием FontForge, и с помощью нее вручную создал новый шрифт с нужными глифами. Если кто-то знает более удобный софт - милости прошу, поделитесь.
    Ответ написан
    Комментировать
  • Какой редактор кода лучше?

    alvvi
    @alvvi
    export default apathy;
    Я пользуюсь VSCode, как для верстки, так и для фронтенда, имхо, лучший редактор.

    intelliSense из коробки, который отлично дружит с JS, плагины на все случаи жизни, интеграция с git-ом, etc etc.
    Ответ написан
    Комментировать
  • Возможно ли это сделать на css3?

    alvvi
    @alvvi
    export default apathy;
    Комментировать