Ответы пользователя по тегу Вёрстка
  • Как убрать отступы у текста?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Да изучите вы уже как устроены шрифты... css-live.ru/css/metriki-shrifta-line-height-vertic...
    Постоянно об одном и том же спрашивают.
    Ответ написан
    Комментировать
  • Как можно с помощью css сделать закругление углов как показано в картинке?

    delphinpro
    @delphinpro
    frontend developer
    jsfiddle.net/bx8p2gk6

    Это чисто верстка. Промаркировать ячейки нужными классами отдельная алгоритмическая задача.
    Ответ написан
    Комментировать
  • Насколько правильно с точки зрения БЭМ?

    delphinpro
    @delphinpro
    frontend developer
    Вы, как и многие другие, встали на сторону, как я его называю, "западного" БЭМа. То есть используете исключительно булевы модификаторы (Да/Нет). Тогда как "классическая" методология даёт более широкие возможности, предлагая вам модификаторы типа Name/Value.

    Ответ на ваш вопрос я вижу таким

    // Блок
    .heading {}
    
    // Модификации блока
    
    // Размеры
    .heading_level_one {}
    .heading_level_two {}
      // или
    .heading_size_small {}
    .heading_size_normal {}
    
    // Цвет
    .heading_color_main {}
    .heading_color_inverse {}


    И соответственно, давая разные модификаторы, получаем любые комбинации.

    <h1 class="heading
               heading_size_large
               heading_color_main"></h1>
    Ответ написан
    1 комментарий
  • Для чего делать такие размеры?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Смотрите ситуацию. Я человек с плохим зрением. В моём браузере стоит увеличенный размер шрифта. Я открываю сайт в котором верстальщик шрифты указал как надо, в rem, а на размеры/отступы забил и задал их в пикселях. Получается уродство:

    5b935705491c9619831053.png

    Потом верстальщик стал умнее, и переписал размеры/отступы в rem'ы и сразу всё стало очень хорошо:

    hzhezdpprfkudyrsgnvz0iz1bhs.png

    Понятно?
    Ответ написан
    3 комментария
  • Зачем дизайнеру подстраиваться под верстальщика в случае с Bootstrap?

    delphinpro
    @delphinpro
    frontend developer
    Вы абсолютно правы во всём.
    И если у вас, как у дизайнера, хорошо продуманный макет на выходе, пусть и "нестандартный", у нормального верстальщика никаких, я акцентирую, никаких проблем при верстке не возникнет.

    С другой стороны, некоторые комментаторы тоже правы по-своему. Если на первом месте для проекта стоит цена, то оптимальнее идти по проторенной дорожке.

    Итог в том, что придется выбирать: ширпотреб или авторская работа. А выбирать, понятно, заказчику.
    Ответ написан
    Комментировать
  • Не работает overflow, bootstrap 4, в чем проблема??

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Отвечу только на последний вопрос
    Ставил overflow-x на хедер, но тогда меню обрезается вообще полностью по все осям и Х, и Y, что за бред? почему по Y вы высоту меню обрезается-то??


    Если вы задаёте свойство overflow, неважно, по одной оси, или по обеим, то контент в любом случае будет обрезан. Вы можете лишь контролировать как он будет обработан — обрезан (hidden), либо появится полоса прокрутки (scroll/auto). Значение visible заданное лишь по одной оси не сработает.

    Касаемо основного вопроса — лучше бы приложили пример в песочнице, чем скриншоты. Вероятность получения ответа существенно возросла бы.
    Ответ написан
    Комментировать
  • Чем адаптивное меню на чистом css лучше такого же меню на js?

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

    Если нет, и джаваскрипт необходим для реализации, то в этом нет абсолютно ничего страшного.

    В обоих случаях действует одно и то же правило: не делайте через жопу.
    Ответ написан
    4 комментария
  • Универсальная верстка для sidebar-content-sidebar?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Заворачиваем все в контейнер и делаем что хотим

    <div class="layout">
      <main class="layout__main"></main>
      <aside class="layout__aside1"></aside>
      <aside class="layout__aside2"></aside>
    </div>


    .layout {
      display: flex;
    
      &__main   { order: 2; width: auto;  flex: 1 0 auto; }
      &__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
      &__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
    }

    Меняя order, меняем порядок
    Ответ написан
  • Как измерить расстояние в фотошопе 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 комментария