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

    dom1n1k
    @dom1n1k
    Я предпочитаю группировать стили по смыслу и по отношению к одному блоку, а не по отношению к размеру экрана.
    Разделять размеры по файлам и тем более папкам кажется логичным только на первый взгляд. По факту так делают жертвы формализма в ущерб здравому смыслу.
    Ну вот открыл я один из файлов, смотрю на код блока. Как я должен догадываться, как он себя поведет при уменьшении экрана? Лезть в другой файл? А потом в третий, четвертый... А может там и нет ничего - я не знаю заранее. А ещё часть стилей всегда общая для разных размеров - их тоже в отдельный файл?

    Уж лучше побить интерфейс на более мелкие блоки и сделать их максимально независимыми. Но внутри блока код пусть будет в одном файле и рядом. Да, медиа-запросы получаются не полностью оптимальными, да, объем кода получается чуть больше, но меня это не парит.
    Ответ написан
    Комментировать
  • Карусель или слайдер в Flexbox?

    dom1n1k
    @dom1n1k
    А зачем родительскому блоку говорить flex?
    Ответ написан
    Комментировать
  • Не правильное отображение сайта на разрешении 1920?

    dom1n1k
    @dom1n1k
    Масштаб увеличенный у клиента настроен.
    Это кстати вполне нормальное явление и не должно ломать верстку.
    Ответ написан
    1 комментарий
  • Как сохранять для верстки такие картинки из Photoshop?

    dom1n1k
    @dom1n1k
    Там наверное режимы смешивания задействованы.
    Вероятнее всего Multiply, но могут быть и другие, типа Overlay, Color Burn и прочих.
    А может быть ещё эффекты какие-то наложены, типа Pattern Overlay.
    Как экспортировать? По отдельности - никак. Ну то есть в браузерах поддержка режимов смешивания формально есть, но кроссбраузерность неважная, да и просто геморно будет этот бутерброд поддерживать, смысла просто нет.
    Надо экспортнуть уже готовый результат в виде простой однослойной картинки.
    Ответ написан
    1 комментарий
  • В каком редакторе лучше верстать?

    dom1n1k
    @dom1n1k
    Sublime, Notepad++. Первый погламурнее, второй покондовее.
    Ответ написан
    Комментировать
  • Как понять БЭМ, и что мотивирует верстальщик в использовании его?

    dom1n1k
    @dom1n1k
    От БЭМ-а тут только двойные подчеркивания. Тут вообще всё неправильно.
    Ответ написан
    Комментировать
  • Как узнать начертание шрифта?

    dom1n1k
    @dom1n1k
    Узнать эти числа можно либо от авторов, либо проведя ручной эксперимент в браузере.
    Дело в том, что все эти наименования (thin, light, bold и пр) никак не стандартизованы и не подчиняются никаким строгим правилам. Есть приблизительные правила, которые сложились исторически и которых все стараются более-менее придерживаться - но исключений встречается довольно много.
    Конкретно в случае с Lato догадаться несложно (очевидно, что 9 начертаний как раз помещаются от 100 до 900 через сотню), но с другим шрифтом всё может быть иначе.
    Кроме того, верстальщик имеет возможность назначать свои значения в font-face.
    Ответ написан
    Комментировать
  • Верстка срезаных блоков?

    dom1n1k
    @dom1n1k
    Картинку использовать религия не позволяет?
    Ответ написан
    3 комментария
  • Что он имеет ввиду? Retina Dpi? Верстка под ретина, неужели так все сложно?

    dom1n1k
    @dom1n1k
    Есть возможность определять ширину экрана в CSS-пикселях, а не физических?

    Размеры не нужно "определять", они и так сами работают именно в CSS-пикселях, а не физических. По умолчанию.
    Во-всяком случае, на абсолютном большинстве устройств (встречал только одного китайца, где это было не так).
    Ответ написан
    Комментировать
  • Как сделать такое увеличение/уменьшение фото при клике, плюс скролл как в ЯндексКартах, например?

    dom1n1k
    @dom1n1k
    Это очень легко делается в картографических апи - как минимум в Leaflet и Яндексе, наверное и в каких-то ещё можно.
    Главная трудность тут подготовить тайлы - то взять картинку во всех нужных масштабах, аккуратно нарезать их на куски и корректно пронумеровать.
    Есть и узкоспециальные плагины для подобного просмотра фото, но те что я видел, мне не очень нравились.
    Ответ написан
    Комментировать
  • Как сделать красивый футер?

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

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

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

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

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

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

    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 комментария
  • А что мешает в БЭМ-верстке все сделать блоками вместо элементов?

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

    dom1n1k
    @dom1n1k
    То есть сам-то с заказчика взял половину денег вперед (он рисковал, что сбежишь с баблом :), а сейчас жмешься показать вторую половину работы? Как-то нехорошо.
    Кроме того, заказчику именно сейчас пропадать уже особого смысла нет, потому что в верстке наверняка есть баги, наверняка будут замечания - удобнее, чтобы подправлял это сам автор.
    Просто заливай и показывай код как есть.

    P.S. Я не учитываю только случаи, если в процессе работы уже были какие-то конфликты и есть конкретные основания полагать, что возможны проблемы.
    Ответ написан
    Комментировать