https://github.com/yoksel/pixel-glass-js
🔮 Tiny JS library for visual checking markup
https://github.com/yoksel/pixel-glass-js
adaptive adaptive-layouts javascript pixel-glass pixel-perfect
Last synced: 11 months ago
JSON representation
🔮 Tiny JS library for visual checking markup
- Host: GitHub
- URL: https://github.com/yoksel/pixel-glass-js
- Owner: yoksel
- Created: 2017-01-04T16:40:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-10T15:18:54.000Z (over 9 years ago)
- Last Synced: 2025-03-05T03:11:40.401Z (over 1 year ago)
- Topics: adaptive, adaptive-layouts, javascript, pixel-glass, pixel-perfect
- Language: JavaScript
- Homepage: https://yoksel.github.io/pixel-glass-js/
- Size: 2.75 MB
- Stars: 158
- Watchers: 8
- Forks: 28
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pixel Glass
**EN** | [RU ↓](#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**](https://yoksel.github.io/pixel-glass-js/).
## How to use Pixel Glass in your project?
**1.** Install the package into your project folder via npm:
```shell
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:
```html
HTML {
background-repeat: no-repeat;
background-position: 50% 0;
/* Mobile layout by default */
background-image: url( "img/320.png" );
}
/* Tablet */
@media ( min-width: 760px ) {
HTML {
/* Tablet layout */
background-image: url( "img/760.png" );
}
}
/* Desktop */
@media ( min-width: 960px ) {
HTML {
/* Desktop layout */
background-image: url( "img/960.png" );
}
}
```
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 ↑](#en) | **RU**
**Pixel Glass** — маленькая библиотека на JavaScript, которая поможет вам проверить насколько разметка страницы соответствует макету, без необходимости запускать графический редактор или уходить со страницы всякий раз, когда вам нужно свериться с макетом.
Она будет полезна, если вы верстаете адаптивный дизайн и у вас есть несколько макетов для разных разрешений экрана.
## Как это работает?
**Pixel Glass** просто управляет прозрачностью элемента ``. Когда `` становится полупрозрачным, через него становятся видны макеты, заданные фоном для ``.
Посмотрите в действии на [**демо-странице**](https://yoksel.github.io/pixel-glass-js/).
## Как использовать Pixel Glass в своём проекте?
**1.** Установите пакет в папку с проектом через npm:
```shell
npm i pixel-glass --save-dev
```
**2.** Поместите макеты страниц в ваш проект в папку `img` (или в другую, какая вам нравится).
**3.** Добавьте этот код на вашу страницу в элемент ``:
```html
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" );
}
}
```
Отредактируйте код под ваш проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.
**4.** Сохраните файл, обновите страницу и пользуйтесь! : )
