Задать вопрос
Ответы пользователя по тегу Вёрстка
  • Как измерить расстояние в фотошопе 2018?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Сторонняя программа-линейка идеально подходит для верстальщика.
    Вот например эта (есть бесплатный вариант, ничем не ограничен) https://picpick.app/ru/

    помимо линейки, есть еще пипетка, скриншотилка, угломер, лупа...

    5b718206a4d64087831960.png
    Ответ написан
    Комментировать
  • Хороший пример структурированного CSS файла?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вот реальный файл
    /*!
     * Main styles
     *
     * @author     delphinpro <delphinpro@gmail.com>
     * @copyright  copyright © 2018 delphinpro
     * @license    licensed under the MIT license
     */
    //==
    //== Config & mixins
    //== ======================================= ==//
    $DEV_MODE: true;
    @import "vrhythm.cfg.scss";
    @import "grid.cfg.scss";
    @import "../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../../node_modules/vrhythm/source/mixins/rhythm";
    @import "main.cfg.scss";
    @import "mixins.scss";
    @import "../../node_modules/tiny-slider/src/tiny-slider";
    //==
    //== Global styles
    //== ======================================= ==//
    @import "webfonts.scss";
    @import "vendor/normalize";
    @import "base/global.scss";
    @import "base/grid-system.scss";
    @import "base/page.scss";
    @import "base/site.scss";
    @import "base/table.scss";
    @import "base/input.scss";
    @import "base/uploadbox.scss";
    @import "base/buttons.scss";
    @import "base/checkbox.scss";
    @import "base/radio.scss";
    @import "base/radio-button.scss";
    @import "base/radio-panel.scss";
    @import "base/controls-group.scss";
    @import "base/form-field.scss";
    @import "base/auto-height.scss";
    @import "base/transitions.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/availability.scss";
    @import "blocks/availability-details.scss";
    @import "blocks/back-link.scss";
    @import "blocks/benefit-block.scss";
    @import "blocks/block-heading.scss";
    @import "blocks/breadcrumb.scss";
    @import "blocks/btn-close.scss";
    @import "blocks/callback-link.scss";
    @import "blocks/checked-list.scss";
    @import "blocks/ci.scss";
    @import "blocks/clear-link.scss";
    @import "blocks/document-list.scss";
    @import "blocks/download-link.scss";
    @import "blocks/email-link.scss";
    @import "blocks/entry-item.scss";
    @import "blocks/expert-consult.scss";
    @import "blocks/goods-attributes.scss";
    @import "blocks/heading.scss";
    @import "blocks/icons.scss";
    @import "blocks/info-text.scss";
    @import "blocks/logo.scss";
    @import "blocks/paginate.scss";
    @import "blocks/phone-link.scss";
    @import "blocks/phone-with-icon.scss";
    @import "blocks/phone.scss";
    @import "blocks/popular-links.scss";
    @import "blocks/price.scss";
    @import "blocks/print-link.scss";
    @import "blocks/section.scss";
    @import "blocks/service-description.scss";
    @import "blocks/services.scss";
    @import "blocks/share-block.scss";
    @import "blocks/show-all.scss";
    @import "blocks/smenu-box.scss";
    @import "blocks/smenu.scss";
    @import "blocks/tags.scss";
    @import "blocks/unordered-list.scss";
    @import "blocks/worktime.scss";
    @import "blocks/zoom.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/about-us-section.scss";
    @import "blocks/article-section.scss";
    @import "blocks/benefits.scss";
    @import "blocks/carousel.scss";
    @import "blocks/cart.scss";
    @import "blocks/delivery-map.scss";
    @import "blocks/delivery-partners.scss";
    @import "blocks/delivery.scss";
    @import "blocks/footer.scss";
    @import "blocks/header.scss";
    @import "blocks/help-me.scss";
    @import "blocks/load-more.scss";
    @import "blocks/nav-catalog.scss";
    @import "blocks/nav.scss";
    @import "blocks/navbar.scss";
    @import "blocks/news-section.scss";
    @import "blocks/panel.scss";
    @import "blocks/params-panel.scss";
    @import "blocks/payment-block.scss";
    @import "blocks/search.scss";
    @import "blocks/catalog-table.scss";
    @import "blocks/catalog-grid.scss";
    @import "blocks/time-range.scss";
    //==
    //== Components
    //== ======================================= ==//
    @import "components/spin.scss";
    @import "components/selector.scss";
    @import "components/tabs.scss";
    @import "components/hamburger.scss";
    @import "components/fixed-bar.scss";
    @import "components/step-indicator.scss";
    @import "components/complete-screen.scss";
    @import "components/ordering.scss";
    @import "components/order-complete.scss";
    @import "components/summary.scss";
    @import "components/goods.scss";
    @import "components/basket-contains.scss";
    @import "components/basket-goods.scss";
    @import "components/basket.scss";
    @import "components/icon-complete.scss";
    @import "components/big-order-form.scss";
    @import "components/feedback-form.scss";
    @import "components/modal.scss";
    @import "components/vue-scrollbar.scss";
    @import "components/mobile-menu.scss";
    @import "components/gallery.scss";
    //==
    //== Page specific classes
    //== ======================================= ==//
    @import "pages/home.scss";
    @import "pages/articles.scss";
    @import "pages/catalog.scss";
    @import "pages/product.scss";
    @import "pages/terms.scss";
    @import "pages/services.scss";
    @import "pages/news.scss";
    @import "pages/feedback.scss";
    @import "pages/page404.scss";
    //==
    //== Helpers & other classes
    //== ======================================= ==//
    @import "base/helpers.scss";
    @import "base/printer.scss";
    Ответ написан
    5 комментариев
  • Стоит ли собрать стили в 1 файл или разделить на несколько при подключении к разным HTML документам?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Для лендинга целесообразно подключать отдельный стилевой файл, ввиду назначения самой страницы — обычно действие посетитель должен произвести прямо на ней, и не гулять дальше.
    Ответ написан
    Комментировать
  • Какие книги must-have для верстальщика-профессионала по Вашему мнению?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Конкретно в этой области книги реально устареют прежде чем выйдут из печати. Уж слишком быстро всё меняется и дополняется.

    Мастхев — это MDN и спека. Плюс бложики по вкусу. Плюс можно подписаться на рассылку codepen, они иногда интересные вещи рассылают. В общем только онлайн.

    Важный апдейт: Это мнение именно насчет состоявшихся профи. Для обучения возможно и можно что-то нарыть в печати, более или менее стоящее.
    Ответ написан
    Комментировать
  • Почему свойство transition не работает на flex?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Потому что некоторые (и их много) свойства принимают только дискретные значения
    5b2ccaf7c5914797582900.png
    Ответ написан
    Комментировать
  • Как сверстать линию прогресса для IE9 без flexbox?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Фиксированная таблица распределяет ячейки равномерно, как space-between во флексах.
    Отсюда и пляшите

    .progress
      .cell
    
    .progress { display: table; table-layout: fixed; width: 100%; }
    .cell { display: table-cell; }


    Возможно придется добавить обертку для table-row
    Ячейки релатив, или внутри доп. контейнер с релатив.
    Точки добавить внутрь, раскидать обсолютом по границам ячеек.
    Ответ написан
    8 комментариев
  • Как узнать тень и градиент элемента из PSD макета?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Фотошоп
    Если слой и/или его стили не растрированы, то кликаем два раза по слою, открывается окно стиля слоя. Переходим на вкладку «Тени» и смотрим значения

    Например
    box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.21);

    5ae608645f2cc872444626.png

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

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    .selector {
      font-size: 16px; /* fallback */
      font-size: 1rem;
    }


    Разумеется, следует написать миксинчик для препроцессора, который будет в пиксели/ремы/вьюпорты пересчитывать. Или плагин для пост-цсс.
    Ответ написан
    3 комментария
  • Нет прокрутки при клике на вкладку в опере, почему?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Проверьте версию. Это было в 52 версии.
    Проверьте флаг Scroll Active Tab on Click

    5adf2c31986a5860067217.png

    Если всё как надо, значит проблема хз где =)) Может расширение какое глючит, может луна в раке...
    Ответ написан
    1 комментарий
  • Как правильно оформлять медиазапросы: медиазапросы внутри класса или классы внутри медиазапроса?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

    Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

    НО, даже в первом варианте я категорически не рекомендую писать так, как вы написали. Гораздо лучше и удобнее будет так:

    /*== Какой-то блок на странице */
    .class-1 {
      /* стили для экранов 767px и менее */
    }
    @media (max-width: 767px) {
      .class-1 {
        /* стили для экранов 767px и менее */
      }
    }
    
    /*== Какой-то другой блок на странице */
    .class-2 {
      /* стили для экранов 767px и менее */
    }
    @media (max-width: 767px) {
      .class-2 {
        /* стили для экранов 767px и менее */
      }
    }
    
    /*== И так далее… */
    …


    Код должен быть структурирован. Стили, описывающие отдельный селектор, всегда должны быть все вместе и рядом.

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

    Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.
    Ответ написан
    7 комментариев
  • Как сверстать такой треугольник?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Небольшой прямоугольник с overflow:hidden и два его абсолютно позиционированных псевдо-элемента с подобранным положением и border-radius
    Суть на картинке:
    5a9abaf4042b5532247763.png

    https://jsfiddle.net/ywh2fd3f/56/

    как-то так =)
    Ответ написан
    4 комментария
  • Как убрать из woff/woff2 файлов шрифта лишние символы?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Воспользуйтесь конструктором fontello.com
    Соберите шрифт сами с необходимым набором иконок.
    Ответ написан
    Комментировать
  • Есть идеи, как реализовать данный элемент на сайте через HTML и CSS?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Самое сложное было придумать селектор для блока ))
    https://codepen.io/delphinpro/pen/xYJxgN?editors=1100
    Ответ написан
    2 комментария
  • Как в бутстрап сетке задать ширину под max-width 480px?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    1. Добавим брикпойнт и контейнер
    $screen-xs-min: 520px;
    $container-xs: 480px;


    2. дополним класс .container
    .container {
      @include container-fixed;
    
      @media (min-width: $screen-xs-min) {
        width: $container-xs;
      }
      // … Дальше оставляем как было
    }


    3. поправим миксин
    @mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
      @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
      }
    …


    4. Вызовем его
    @include make-grid-columns();

    5. Заменим строчку
    @include make-grid(xs);
    на
    @include make-grid(xxs);

    6. Добавим

    @media (min-width: $screen-xs-min) {
      @include make-grid(xs);
    }


    И всё!!

    Теперь в промежутке от 0 до 480 можем использовать колонки xxs
    480 — 768 колонки xs
    а далее стандартно.

    [sarkazm on]
    Ничего сложного, да ведь? =)))
    [sarkazm off]

    Поэтому я обычно выкидываю сетку версии 3 и использую гибрид — сетка как в третьей версии, на флоатах и т.д., но используя миксины (тоже немного доработанные) от четвёртой версии.
    Там добавление брикпойнта сводится к простому добавлению значений в пару массивов (мапов) настроек.
    Ответ написан
  • Как продлить по высоте второй блок?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ввиду того, что не озвучены подробные условия, смею предположить что подойдёт старая добрая имитация https://jsfiddle.net/f5yxror3/
    Ответ написан
    Комментировать
  • Как правильно организовать работу?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Вопрос - как по вашему правильно отдавать файлы клиенту все и что лучше? Минифицированное все или нет?


    Вы не находите, что вопрос странный?
    Ваш сборщик должен генерить три файла - *.js / *.min.js / *.min.js.map
    Аналогично для стилей.
    Отдавать вы разумеется должны всё — и билд, и исходники.
    Ответ написан
    Комментировать
  • Составили требований для верстальщика, не перегнули ли палку?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Детский сад.
    Сорри.

    Вы точно не перегнули палку. Скорее — недогнули =)
    Хотя некоторые пункты и спорные, но это уже личное предпочтение ))
    Ответ написан
    4 комментария
  • Как убрать двойной скрол и пустое место из-за длины абс. спозиционированного меню?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
    Надеюсь кто-нибудь объяснить мне почему так происходит.

    А куда же им деться?
    Причина очевидна — блок растягивает страницу настолько, чтобы вместиться в неё. И неважно, абсолютный он, или нет.

    Ведь они же не в потоке?

    Ну и что? Ну вынули элемент из потока, со страницы-то он никуда не делся.

    ---
    Простое решение:
    дать выпадашкам position:fixed а при ховере - absolute
    Побочный эффект — скролл страницы будет проявляться только при открытом меню, если оно не вместится.
    Еще простое решение (частный случай):
    Для последнего уровня задать максимальную высоту и oveflow:auto
    Минусы — годится только для последнего уровня, потому что его границы уже ничего не вылезет из-за overflow

    Все остальные решения требуют вмешательства javascript или серьёзной переработки принципа показа подменюшек.
    Ответ написан
    Комментировать
  • Как привязать стрелочки к конкретному слайдеру в Slick Slider?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Читаем документацию, видим, что nextArrow может принимать string (html | jQuery selector) | object (DOM node | jQuery object)
    Чуть-чуть думаем, и понимаем, что мы можем передать сюда любой jquery-объект со страницы. Осталось только выбрать нужный.
    Кнопочки обычно недалеко от слайдера, значит их легко найти через общего родителя.
    Ну и всё. Осталось только наговнокодить.
    Примерно так:

    $('[data-carousel]').each((index, el) => {
      const $carousel = $(el);
      let what        = $carousel.data('carousel');
    
      if (!carouselConfig.hasOwnProperty(what)) return;
    
      let $arrows = $carousel.parents('.carousel-wrapper').find('.arrows').children();
    
      $carousel.slick({
        arrows   : true,
        infinite : true,
        prevArrow: $arrows.filter('.arrows__prev'),
        nextArrow: $arrows.filter('.arrows__next'),
        ...carouselConfig[what],
      });
    });
    Ответ написан
    3 комментария