Ответы пользователя по тегу HTML
  • Bootstrap. Cпор с программистом, как убедить?

    dom1n1k
    @dom1n1k
    Имею опыт глубокой кастомизации Бутстрапа. Глупая была затея.
    Родился такой монстр, который просрал плюсы и сочетал минусы обоих подходов (популярный фреймворк vs самописный велосипед).
    Сильно изменив Бутстрап, убиваются:
    - его обновления и багофиксы
    - совместимость со сторонними плагинами
    - низкий порог вхождения новых людей
    - возможность гуглить решения в случае багов
    Но и самописным велосипедом это тоже не является, потому что сильно завязано на исходную архитектуру. То есть нет полной свободы и гибкости, присущей кастомным решениям. БЭМ-ом там, конечно, тоже не пахнет, откуда идут большие проблемы с независимостью.
    Бутстрап нужно использовать либо как есть, либо с минимальными скинами-стилизациями поверх.
    Ответ написан
    Комментировать
  • Именования классов в БЭМ?

    dom1n1k
    @dom1n1k
    Этот вопрос обсуждается во всех руководствах по БЭМу одним из первых!
    Ответ написан
    Комментировать
  • Как задать такую тень?

    dom1n1k
    @dom1n1k
    Видимо, только картинками по бокам.
    В принципе, есть ещё способ с двумя псевдоэлементами, которым дается тень, а потом они смещаются и слегка поворачиваются - но это капризный метод. Чтобы он нормально работал, к тени предъявляется куча требований - она должна быть небольшой, спадать равномерно, сверху не слишком вылазить... На макете это не так.
    Так что настоятельно советую не мудрить чрезмерно.
    Ответ написан
    Комментировать
  • Как такое сверстать?

    dom1n1k
    @dom1n1k
    Ну это только делать карту физически больше с двух сторон и накрывать плашками соответствующих цветов с вырезами (делаются картинками) через z-index. Костыль, неудобно и всё такое - но иначе никак. Дизайнер, рисуя свой шэдэвор, не знал как это потому будет реализовываться.
    Либо поговорить с дизайнром/заказчиком и попытаться найти компромисс, сделав например эти кнопки не прозрачными, а залить каким-то цветом.
    Ответ написан
  • Как сделать красивый футер?

    dom1n1k
    @dom1n1k
    гуглить по словам "sticky footer" - вопрос обсосан сотни раз
    Ответ написан
    Комментировать
  • Как сделать такой button?

    dom1n1k
    @dom1n1k
    Такие вещи делаются картинками.
    Ответ написан
    Комментировать
  • Можно ли тексту давать line-height меньше 1?

    dom1n1k
    @dom1n1k
    Можно ли вообще ставить line-height меньше 1?

    В принципе можно, но в 99,9% случаев не нужно.
    Исключение составляют некоторые очень редкие и специфичные ситуации.

    Судя по вопросу
    как вообще высота текста может быть 13 пикселей, если размер шрифта 18 пикселей?

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

    dom1n1k
    @dom1n1k
    Да, книга устарела. Если она издана в 2012, то информация в ней и вовсе по состоянию на 2010-11. Шесть лет в мире фронт-энда это очень много, практически эпоха. Можно по ней начать, но потом перейти на что-то посвежее.
    Хотя в каком-то смысле можно даже плюсы извлечь - пощупать верстку под старые браузеры, чтобы потом сравнить с новыми. Новички часто воспринимают это все как должное.
    Ответ написан
  • Используете ли вы флексбокс сетку в своих проектах?

    dom1n1k
    @dom1n1k
    почему бы не использовать комбинацию флексбокс сетка + flexibility?

    А вот за это я бы отбивал руки. Категорически нельзя завязывать лейаут на JS. Это медленно, это бажно, это... это медленно!

    Если человек сидит на старом IE (сам по себе очень медленный браузер), то у него с высокой степенью вероятности и компьютер слабый. Далее, у них скорее всего не установлены адблокеры - это ещё куча тормозов. Уж если вы по каким-то причинам решили, что эти пользователи вам нужны - зачем над ними издеваться?
    Тут блин на мощном ПК с самым последним браузером порой раздражаешься оттого, что какая-то прилипающая панелька лагает... А если весь-весь лейаут будет отрисовываться JS в IE - это вешалка.

    Я помню времена, когда CSS3 (скругления, тени, градиенты...) только недавно вышел и естественно IE этого ничего не поддерживал. Довольно быстро сообщество наплодило вагон полифилов для этого дела. Были и маленькие, под одну функцию, были и целые пакеты.
    Так вот: они нормально работали только в демках и простеньких случаях. В реальных сложных сайтах пользоваться было невозможно - всё дико тормозило, да и глючило. Нельзя IE чрезмерно нагружать тем, на что он не предназначен.

    Degradation должна быть gracefull, а не lazy.
    Ответ написан
    Комментировать
  • Предпочтительные единицы измерения для отступов?

    dom1n1k
    @dom1n1k
    Нет единого ответа на этот вопрос, по разному бывает - от ситуации.
    Субъективно у меня чаще используются px и em, реже vw/vh, еще реже rem и %.
    Но используется всё.
    Ответ написан
    Комментировать
  • Как вы используете в вёрстке единицы измерения vh и vw?

    dom1n1k
    @dom1n1k
    Как? С матами :)
    Единицы мегаполезные, но у них есть один неприятный нюанс - размер вьюпорта считается включая полосу прокрутки.
    Это не баг, это так и должно быть по спецификации. И тому есть свои причины, почему сделано именно так.
    Но на практике в очень большой части случаев это неудобно. Это рушит всю идею.
    Ну типа отступили с двух боков марджины по 5vw - значит в середине контент 90vw? А вот фиг там - иногда это так, а иногда нет. Приходится придумывать дикие комбинации медиа-запросов и calc-ов.

    Реальные юзкейсы?
    Ну вот буквально вчера ситуация. Карусель, в которой крутятся влево-вправо некие блоки. И хочется, чтобы в ширину страницы помещалось целое количество блоков. Условно говоря, на планшете 2, на ноуте 3, на десктопе 4. То есть ширина блока должна составлять 50, 33 и 25% соответственно. Но в процентах указывать нельзя! Потому что карусельная либа оборачивает всё это дело в свои врапперы и проценты будут считаться не от экрана, а от этих врапперов. Флекс там тоже не подходит. Ну вот vw это спасение (за исключением вышеописанного нюанса).

    Ещё я приспособился в некоторых ситуациях привязывать размер шрифта к vmin.
    Ответ написан
    Комментировать
  • В каких ситуациях верстать сайты по bem методологии нецелесообразно?

    dom1n1k
    @dom1n1k
    Сайты - целесообразно всегда.
    Нецелесообразно тащить БЭМ в небольшие изолированные фрагменты кода - например, наброски proof of concept, когда нужно просто быстро проверить/продемонстрировать идею. Ответы на Тостере сюда тоже можно отнести. Если же говорить именно о сайте, то есть законченном продукте (пусть даже и небольшом) - БЭМ как минимум не повредит. Сегодня я бы уже не стал верстать без БЭМ-а ничего, что содержит хотя бы 10 классов.

    P.S. Я сам всегда скептически отношусь к хайпам по поводу всех новых и жутко модных технологий, но БЭМ это реально полезная штука. Да и не такая уж новая - фрагментарно его идеи мелькали уже давно, в том числе в моих собственных верстках. Но нужен был локомотив, который их систематизирует и раскрутит.

    P.P.S. Разумеется, речь идет о самой методологии именования классов, а не всех библиотеках-космолетах, что Яндекс родил на эту тему - то уже на любителя.
    Ответ написан
    2 комментария
  • Как ведет себя блочный img?

    dom1n1k
    @dom1n1k
    Видимо потому, что по спецификации дефолтное значение ширины у любого элемента (включая блоки) - auto, а отнюдь не 100%. У картинки auto свое, у текстового потока свое. Но никто не мешает прописать 100% вручную.
    Ответ написан
    Комментировать
  • Уменьшение размера текста относительно его количества - как действовать?

    dom1n1k
    @dom1n1k
    Не надо фантазировать на пустом месте.
    Если текст не очень важен - обрезать с многоточием.
    Если важен - блок скроллится.
    Всё.
    Ответ написан
    Комментировать
  • А что мешает в БЭМ-верстке все сделать блоками вместо элементов?

    dom1n1k
    @dom1n1k
    Блок - это то, что обладает смысловой самостоятельностью, что может быть использовано отдельно, перенесено на другую страницу и т.п.
    Элемент - то, что входит в блок как составная часть и не может быть использовано отдельно.
    Ответ написан
    Комментировать
  • Какие макеты сейчас нужны верстальщику для адаптива?

    dom1n1k
    @dom1n1k
    А 1170 - это что за устройство? А 480?
    Хотя конечно 544 - еще более непонятно :)
    Ответ написан
  • Изменилось расположение шрифта в мобильной "версии" сайта, как поправить?

    dom1n1k
    @dom1n1k
    Практически никак, базовая линия шрифтов, особенно подгружаемых, плавает в разных браузерах. Приходится с этим смириться.
    Не будешь же детектить каждый браузер и ось и костылить им индивидуальный паддинг, подобранный вручную.

    P.S. Calibri - это платный коммерческий шрифт.
    Ответ написан
    1 комментарий
  • Есть ли смысл НЕ использользовать Bootstrap?

    dom1n1k
    @dom1n1k
    Бутстрап это суп из бульонного кубика и чай из пакетика - быстро, удобно, но вряд ли хорошо.
    Ответ написан
    Комментировать
  • Canvas или svg?

    dom1n1k
    @dom1n1k
    Имхо канвас.
    Библиотек несколько разных, например Paper.js
    paperjs.org
    Ответ написан
    Комментировать