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

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
    Что такое .title? Заголовок. Какой заголовок? А хз...
    А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

    Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

    Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

    Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
    Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

    если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

    Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.
    Ответ написан
    1 комментарий
  • Эти картинки лучше делать через тэг img(или псевдоэлемент)?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

    Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    
    	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    </svg>


    Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

    Картинка из такого спрайта вставляется в html следующей конструкцией:

    <svg class="my-icon">
        <use xlink:href="images/svg-sprite.svg#archive"></use>
    </svg>


    Здесь указывается путь к картинке и после решетки тот самый идентификатор символа, указанный внутри спрайта.

    Теперь вы можете полностью управлять вставленной картинкой стилями:

    .my-icon {
      width: 50px;
      height: 50px;
      fill: orange; /* Цвет заливки */
      stroke: blue; /* Цвет обводки */
    }


    Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

    .my-icon {
      fill: currentColor; /* Цвет заливки */
    }


    Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.
    Ответ написан
    Комментировать
  • Сетки, с чем их едят?

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

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

    Всё остальное — следствие. Верстальщику становится мало просто классов для описания раскладки макета. Он решает приправить их медиа-запросами, чтобы и базовая адаптивность страницы была что называется "из-коробки". Опять же для упрощения и ускорения своего труда. Потом решает еще что-то добавить, к примеру смещение колонок и т.п.

    Так появились типовые сетки, типа бутстрапа. Так как они предназначены для универсального использования, в них сделали возможности для настройки основных параметров — количества колонок, промежутков между ними, ширин контейнеров и т.д.

    Потом появились дизайнеры, которые стали рисовать свои макеты "под бутстрап" =) Ничего плохого, это ускоряет (а значит удешевляет) разработку конечного продукта. Но нужно понимать, что дизайн первичен. А сетку можно любую сделать.
    Ответ написан
    Комментировать
  • Как исправить некорректное поведение блока при наведении в браузерах Chromium?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

    Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

    Вряд ли это можно исправить.
    Ответ написан
    1 комментарий
  • А для чего @retina-dpi:144dpi; @retina-dppx:1.5dppx; и как часто используется и для чего @media(min-resolution: ??

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев
    Ответ написан
    6 комментариев
  • "Колоночная простановка" flexbox?

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

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

    Просто сделайте свой кастомный контейнер с фиксированными паддингами, пикселей 70-80.

    .my-container {
      max-width: 1300px;
      margin: auto;
    
      @include media-breakpoint-up(xl){
        padding: 0 80px;
      }
    }
    Ответ написан
    Комментировать
  • Экспортирую изображение с фотошопа, но получаю без обрезов, получаю обычное изображение. Как правильно экспортировать?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Картинка должна быть прямоугольная, без вырезов. Чтобы ее можно было легко заменить. А всё остальное уже делается средствами css

    Примерно так https://codepen.io/delphinpro/pen/xaoEZx
    Ответ написан
    2 комментария
  • Как убрать отступы под лого и сделать, чтобы заползало на нижний бэграунд?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Примерно так https://codepen.io/anon/pen/NLVQQm
    Ответ написан
    Комментировать
  • Как убрать отступы у текста?

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

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    jsfiddle.net/bx8p2gk6

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

    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
    Для лендинга целесообразно подключать отдельный стилевой файл, ввиду назначения самой страницы — обычно действие посетитель должен произвести прямо на ней, и не гулять дальше.
    Ответ написан
    Комментировать