RulersGuides.js — линейки и руководства в стиле Photoshop в Интернете
Одна из лучших особенностей Photoshop — это простые в использовании направляющие линии, которые можно извлечь из линейки. Эти руководства могут значительно упростить процесс проектирования, когда речь идет о позиционировании предмета и достижении правильного баланса.
К нашему большому удовольствию, Марк Ролич реализовал эту особенность для использования в Интернете. Он создал RulersGuide.js на основе линейки и направляющих Photoshop.
RulersGuide.js имеет возможность добавить интерфейс стиля линий направляющих Photoshop на веб-страницу. Линии, которые были созданы, могут быть сохранены для будущего использования. Он предоставляет вам три варианта использования: в качестве библиотеки javascript, в виде букмарклета или в качестве расширения Chrome.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Рекомендуемое чтение: 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. Вы можете удалить только все направляющие и создать их с нуля. Тем не менее, если вы часто работаете с веб-макетами в браузерах, этот инструмент для вас.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)