Pixel perfect верстка

в 14:22, , рубрики: css, html, JS, pixel perfect, web-разработка, Веб-разработка, верстка, верстка сайтов, модернизация, рабочая среда, разработка сайтов, улучшение, метки: , , , , , , , , ,

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

  • Быстрее создается страница, чем когда бегаешь между браузером и PSD.
  • Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
  • Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.

Вкратце:
При создании нового проекта нужно будет подключать скрипт, и не забывать его удалять при сдаче.
После подключение нужно создавать папку или указать в диалоговом окне имя папки где лежит наша картинка, или же сразу прямой url. Я использую '.ajax' с отключенным кроссдоменном. Так что картинки нужно хранить на том же домене где и сайт.

Далее можно настроить позиционирование и прозрачность картинки так как вы этого хотите.
Скрипт сохраняет каждую манипуляцию с картинкой в cookie, бегая по страницам сайта не нужно будет настраивать все заново.
Во время создания скрипта я представлял как разработчик будет переходить на другую страницу и видеть дизайн предыдущей страницы, тогда появилась идея создать layouts. Используя хот-кеи можно быстро поменять изображение соответствующее текущей странице сайта.
Последней удобной функцией пока стала 'Hover mode', картинка прячется автоматически если вы стараетесь инспектором выбрать какой-то элемент, и показывается снова.
Все хот-кеи тут:

П.С. Скрипт я писал в первую очередь для себя и друзей. Друзья одобрили и сказали делись со всеми. Вот делюсь.
Надеюсь он будет полезен и вам.

Автор: JekFdrv

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js