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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как показать верстку клиенту, не загружая на хостинг?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть довольно занятное сочетание browsersync + localtunnel. Первый инструмент сам по себе при верстке используется, а при необходимости показать что-то, вы в одну команду расшариваете то, что делаете и посылаете ссылку клиенту. Он смотрит, потом вы все выключаете. Из занятного - browsersync продолжает исправно работать, ваш браузер и браузер клиента получаются связанными - скролл, нажатия кнопок, все действия, которые влекут за собой добавление/удаление классов у элементов - вы видите все, что клиент смотрит и можете сами что-то показать. Может быть удобно при одновременном общении в skype/hangouts. Для всего этого не нужен ни хостинг, ни белый ip, ни нормальное железо.
    Ответ написан
    Комментировать
  • Почему из adobe assets не загружаются 'вырезанные' картинки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Такой баг там действительно есть, но все, что попадает во вкладку assets также появляется в ваших файлах (создается папка под названием имя_шаблона-assets, из которой все скачивается нормально).
    Ответ написан
  • Как реализовать с помощью SVG?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Хорошее руководство по SVG есть на developer.mozilla.org, особенно полезно почитать про пути - сколько я видел такие волны делают через кривые Безье. А примеры как всегда есть на codepen, например вот этот. Но стоит помнить, что в общем случае может быть проще нарисовать то, что нужно, в графическом редакторе и экспортировать, чем подбирать числа руками.
    Ответ написан
    Комментировать
  • Как стилизовать radio button таким образом?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Просто стилизуйте не сам radio button, а label для него - пример на codepen.
    Ответ написан
    Комментировать
  • Где брать ссылки для подключения фреймворков?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Есть еще cdnjs.com
    Ответ написан
    Комментировать
  • Правильно ли вносить изменения в стандартный bootstrap.css файл?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    К словам aleserkan хочется также добавить, что bootstrap достаточно хорошо кастомизируется с помощью изменения соответствующих переменных и его пересборки. При этом вы у себя храните только эти сами переменные - пересобрать можете в любой момент. Должно остаться очень небольшое количество стилей, которые вам нужны для дополнительной кастомизации - там и important в количестве нескольких штук в отдельном файле сгодится (не очень красиво, но понятно что и где меняется).

    Если же у вас получается свой файл размером с половину bootstrap, в котором вы переписываете его стили, стоит поставить вопрос ребром - скорее всего логично будет отказаться от его использования и написать все руками. Да, я знаю, что такую постановку вопроса обычно не любят, но не стоит забывать о таком варианте: бывают такие дизайны, что при верстке от bootstrap остается только сетка и пара кнопок - в таком случае его использование теряет смысл.
    Ответ написан
    Комментировать
  • Какую методологию для CSS используете вы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Некоторое время назад наткнулся на не очень популярный у нас rscss. Попробовал. Потом еще раз попробовал... Потом еще раз...
    Ответ написан
    2 комментария
  • Как тестировать верстку в IE?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как подключить шрифт Calibri?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Шрифты Calibri распространяются по лицензии от Microsoft и даются в использование за некоторое количество денег (для уточнения суммы, особенно для коммерческого использования, лучше связаться с официальной техподдержкой). Поэтому или используйте
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

    чтобы те, у кого Calibri есть в системе могли видеть его, но и остальные не сильно пострадали, либо скажите дизайнеру, что он не совсем прав и, если без Calibri никуда, - пусть он сам и покупает все что необходимо
    Ответ написан
    2 комментария
  • Где брать тренировочные задания по верстке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    а есть ли наподобие ... заточенный на верстку, чтоб был roadmap, и много заданий

    Есть codecademy
    Есть, как уже говорили, htmlacademy
    Ответ написан
    Комментировать
  • Верстать веб по макетам в Ai — это нормально?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Присоединюсь к мнению, что фотошоп и psd для верстальщика лучше

    тут пишут
    верстальщику забирать стили из ai файла удобнее, не придется прибегать к конвертированию онлайн

    существует adobe extract, который есть в фотошопе, и в brackets (и там, по личным наблюдениям, ускоряет работу в разы)

    весь мир, включая Индию, давно верстают с вектора

    ну тут тонкий вопрос: логотип или иконки в векторе - это обычно хорошо, фотографии - плохо, кнопки - зачем? В 99% случаев достаточно возможностей css для их стилизации. Получается, что вектор - только для иконок, которые дизайнер (хороший) все равно дает отдельно в виде спрайта.

    верстак должен адаптироваться под условия

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сверстать дугу как на картинке можно вот так
    Ответ написан
    3 комментария
  • Мобильная версия сайта или адаптивная верстка?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Мобильная версия сайта обычно предполагает урезание функционала по сравнению с основной, и разумеется, уменьшение количества картинок/видео/скриптов "для красоты"/ и.т.д. Остается только необходимое. По идее на мобильном интернете грузится быстрее, но:
    • отдельный url (не удобно для пользователя)
    • необходимость поддержки двух сайтов вместо одного

    А в вашем случае даже урезать то нечего - все нужно. Можно только попрятать - меню пересмотреть (может половину пунктов в гамбургер засунуть, или еще что-нибудь придумать), поиск спрятать под кнопку "поискать", рекламу вниз, а все остальное растягивать/сжимать в зависимости от размера экрана. Так что да, адаптивная верстка будет предпочнительнее.
    Ответ написан
    1 комментарий
  • Как разместить ссылку в li по центру при a { display: block }?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В случаях с подобной навигацией часто используют свойство line-height у ссылок - например так.
    Ответ написан
    Комментировать
  • Позиционирование должно идти по видимой области браузера(position: absolute)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Модальные окна лучше позиционировать с помощью position: fixed, например так - как раз это работает для видимой области (а не абсолютное позиционирование). Вы можете посмотреть разные способы позиционирования например на сайте w3schools
    Ответ написан
    Комментировать
  • Как правильно оптимизировать загрузку изображений в карусели при огромном количестве оных?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы хотите сказать, что одна страница может занимать более 300MB? Среднестатистический телефон/планшет/ноутбук от такого может просто в обморок упасть, сколько бы вы не оптимизировали их подгрузку. Если пытаться освобождать память от картинок, то при попытке поскролить обратно наверх придется все скачивать заново, тогда в обморок упадет мобильный интернет. Куда катится веб...
    Ответ написан
    2 комментария
  • Почему кодировка 1251 не воспринимается на iphone и ipad?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Причина в том, что кодировка windows-1251 - это почти вселенское зло. Она не только на i-устройствах может некорректно отображаться - в линуксах тоже бывают проблемы. В наше время имеет смысл использовать utf-8.

    P.S.: Согласно википедии, лишь для 1.9% всех веб-страниц используется Windows-1251 на февраль 2016.
    Ответ написан
    Комментировать
  • Flexbox vs float?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    2) Flexbox лучше, чем float, практически везде - это более гибкий и функциональный инструмент, особенно в умелых руках, но...
    3) Flexbox не нужно использовать, если вам нужна поддержка разных браузеров (в первую очередь это касается IE): как можно увидеть IE11 и то имеет не полную поддержку, что уж говорить про более ранние версии, а добавлять скрипты ради него - это не комильфо.
    Ответ написан
    6 комментариев