Pixel Glass — маленькая библиотека на JavaScript, которая поможет вам проверить насколько разметка страницы соответствует макету, без необходимости запускать графический редактор или уходить со страницы всякий раз, когда вам нужно свериться с макетом.
Она будет полезна, если вы верстаете адаптивный дизайн и у вас есть несколько макетов для разных разрешений экрана.
Как это работает?
Pixel Glass просто управляет прозрачностью элемента <body> . Когда <body> становится полупрозрачным, через него становятся видны макеты, заданные фоном для <html>.
Как использовать Pixel Glass в своём проекте?
1. Установите пакет в папку с проектом через npm:
npm i pixel-glass --save-dev
2. Поместите макеты страниц в ваш проект в папку image (или в другую, какая вам нравится).
3. Добавьте этот код на вашу страницу в элемент <head>
<!-- Pixel Glass -->
<style>
HTML {
background-repeat: no-repeat;
background-position: 50% 0;
/* По умолчанию показывается мобильный макет */
background-image: url( "img/320.png" );
}
/* Планшет */
@media ( min-width: 760px ) {
HTML {
/* Планшетный макет */
background-image: url( "img/760.png" );
}
}
/* Десктоп */
@media ( min-width: 960px ) {
HTML {
/* Десктопный макет */
background-image: url( "img/960.png" );
}
}
</style>
<link href="../node_modules/pixel-glass/styles.css" rel="stylesheet">
<script src="../node_modules/pixel-glass/script.js"></script>
<!-- // Pixel Glass -->Отредактируйте код под ваш проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.
4. Сохраните файл, обновите страницу и пользуйтесь!