RulersGuides.js — линейки и руководства в стиле Photoshop в Интернете

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

К нашему большому удовольствию, Марк Ролич реализовал эту особенность для использования в Интернете. Он создал RulersGuide.js на основе линейки и направляющих Photoshop.

RulersGuide.js имеет возможность добавить интерфейс стиля линий направляющих Photoshop на веб-страницу. Линии, которые были созданы, могут быть сохранены для будущего использования. Он предоставляет вам три варианта использования: в качестве библиотеки javascript, в виде букмарклета или в качестве расширения Chrome.

Рекомендуемое чтение: 5 последних инструментов веб-разработки, которые вы должны знать

Javascript

RulersGuide.js требует, чтобы некоторые другие зависимости работали хорошо. Так как он работает путем перетаскивания строк на страницу и требует некоторого использования событий, вам нужно добавить Dragdrop.js (доступно Вот) и Event.js (доступно Вот). Затем включите эти зависимости вместе с источником RulersGuide.js (скачать Вот) вот так:

Если вам не нравится стиль по умолчанию, вы можете отредактировать его CSS на свой вкус. Затем инициализируйте эти пакеты следующим скриптом:

Расширение Bookmarklet и Chrome

Для удобства вы можете использовать этот инструмент как букмарклет или расширение Chrome и открывать его в любое время и в любом месте.
Установка букмарклета
Для букмарклета просто установите его как обычно. Поскольку Internet Explorer иногда работает по-другому, этот инструмент приспосабливает это, дифференцируя установщик букмарклетов для пользователей IE и не-IE. Просто перетащите соответствующую ссылку ниже на панель закладок.
Установка расширения Chrome
Если вы любитель Chrome, вам может понравиться этот вариант. К сожалению, RulersGuide еще не доступен в Интернет-магазин Chrome, Единственный выбор — установить его вручную.

Сначала захватите файл расширения Вот, Браузер попросит вас подтвердить файл; просто нажмите продолжить. Расширение не будет установлено автоматически, потому что Chrome имеет его протокол безопасности чтобы держать вас в безопасности.

Откройте его, перейдя в Option> Tools> Extensions или откройте новую вкладку, затем скопируйте и вставьте chrome: // extensions в адресную строку. Затем перетащите загруженный файл RulersGuide.crx на страницу расширения, как показано ниже.

Расширение теперь готово.

Работа с RulersGuide

Как уже упоминалось, RulersGuide работает точно так же, как линейка Photoshop и направляющая линия. Когда вы включите этот инструмент, вы увидите линейки в верхней и левой части браузера. Вы можете вытащить несколько строк из этих правителей.

А в левом верхнем углу страницы вы можете получить дополнительные параметры из доступного меню. Из этого меню вы можете настроить, хотите ли вы, чтобы линии отображались, сохранялись, блокировались и многое другое.

Давайте лучше узнаем варианты.

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

• Если вы нажмете «Разблокировать», линейки останутся видимыми на странице во время прокрутки. Очистка всех направляющих полезна, если вы хотите стереть все сделанные вами направляющие.
• Опция Сохранить сетку используется для сохранения созданной вами сетки. Сетка будет сохранена в зависимости от местоположения страницы, поэтому вы не можете использовать эту сетку в других окнах / вкладках браузера. И, как и следовало ожидать, опция Open grid — открыть сохраненные сетки.

• Когда вы нажимаете опцию Показать подробную информацию, режим подробной информации будет включен. Он может показать вам положение и размер областей сетки, которую вы создаете, а также любые изменения, которые вы вносите в положение гида.

• Последний вариант — привязка. Это то, что мне нравится в RulersGuide. Вы можете привязать направляющие к элементу DOM или использовать его с определенным размером пикселя. Обратите внимание, что опция Snap to DOM все еще находится в стадии эксперимента на момент написания. Это может замедлить работу или не отвечать на страницу со многими элементами.

Вывод

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