Need help with pixel-glass-js?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

139 Stars 33 Forks 45 Commits 0 Opened issues


🔮 Tiny JS library for visual checking markup

Services available


Need anything else?

Contributors list

# 66,303
43 commits

Pixel Glass

EN | RU ↓

Pixel Glass is a tiny JavaScript library, it can help you to check out how your markup fits your design. No need to jump to graphical editor and back, no need to leave page every time when you need to look at the design.

It will be very helpful if you make an adaptive design and have more than one design of the page.

How does it work?

Pixel Glass just lets you control your page’s

 opacity. When the 
 becomes semi-transparent, you can see designs through it.

Try it on the demo page.

How to use Pixel Glass in your project?

1. Install the package into your project folder via npm:

  npm i pixel-glass --save-dev

2. Place your mock-ups into img (or any other) folder of your project.

3. Add this code into

 element of your page:

Edit the code to make it fit your project: change media queries or add yours, change image URLs to actual files.

4. Save file, update a page and enjoy!


EN ↑ | RU

Pixel Glass — маленькая библиотека на JavaScript, которая поможет вам проверить насколько разметка страницы соответствует макету, без необходимости запускать графический редактор или уходить со страницы всякий раз, когда вам нужно свериться с макетом.

Она будет полезна, если вы верстаете адаптивный дизайн и у вас есть несколько макетов для разных разрешений экрана.

Как это работает?

Pixel Glass просто управляет прозрачностью элемента

. Когда 
 становится полупрозрачным, через него становятся видны макеты, заданные фоном для 

Посмотрите в действии на демо-странице.

Как использовать Pixel Glass в своём проекте?

1. Установите пакет в папку с проектом через npm:

  npm i pixel-glass --save-dev

2. Поместите макеты страниц в ваш проект в папку

(или в другую, какая вам нравится).

3. Добавьте этот код на вашу страницу в элемент


Отредактируйте код под ваш проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.

4. Сохраните файл, обновите страницу и пользуйтесь! : )


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.