На сайте бюро при нажатии на
Сайт бюро адаптируется для трёх ключевых типов устройств. Мы считаем «мобильными» экраны с шириной менее 960 пикселей, «лаптопами» — экраны с шириной от 961 до 1400 пикселей, «десктопами» — экраны с шириной от 1401 пикселя. Поэтому количество колонок в сетке зависит от ширины окна браузера. На десктопе в сетке 16 колонок, на лаптопе — 12, на мобильных — 4.
Все текстовые элементы подчиняются единой сетке базовых линий, кратной 9 пикселям. Стандартные расстояния по вертикали, например, межстрочник, также кратны 9 пикселям.
Сама сетка — это див с 16 дивами‑колонками:
<div class="debugger is__active">
<div class="debugger-cols">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
</div>И немного стилей:
.debugger {
--debuggerTopCompensator: -3px; /* Скомпенсируем начало сетки дебаггера на сдвиг от шапки */
--debuggerLineHeight: 9px; /* Вертикальное расстояние между линейками */
--debuggerGutter: 18px; /* Межколонник, используемый на сайте */
display: none; /* По умолчанию сетка спрятана */
position: absolute;
top: var(--debuggerTopCompensator);
right: 0;
left: 0;
z-index: 999999;
min-height: 100lvh;
background-image: linear-gradient(to bottom, grey .5px, transparent .5px); /* Рисуем горизонтальные линеечки через каждые 9 пк */
background-size: var(--debuggerLineHeight) var(--debuggerLineHeight);
pointer-events: none;
}
.debugger.is__active { /* По нажатию на Ctrl+G сетка получает класс is__active и показывается */
display: block;
}
@media (resolution < 2dppx) { /* На неретиновых экранах рисуем линейки толщиной в 1 пикселей, чтобы они не исчезали */
.debugger {
background-image: linear-gradient(to bottom, grey 1px, transparent 1px);
}
}
.debugger-cols {
position: absolute;
top: 0;
bottom: 0;
right: 6%; /* Пусть у нашего сайта поля в 6% на десктопах и лаптопах */
left: 6%;
margin-left: calc(var(--debuggerGutter) / -2);
margin-right: calc(var(--debuggerGutter) / -2);
display: flex;
opacity: .15;
}
@media (width <= 768px) {
.debugger-cols {
left: 20px; /* А на мобильных поля зафиксированы в 20 пикселей */
right: 20px;
}
}
.debugger-cols div {
flex: 1;
border: calc(var(--debuggerGutter) / 2) solid #000; /* Рисуем колонки с полями-бордерами */
background: red;
}
@media (width <= 961px) {
.debugger-cols div:nth-child(-n+4) { display: none; } /* На лаптопах оставляем 12 колонок */
}
@media (width <= 768px) {
.debugger-cols div:nth-child(-n+12) { display: none; } /* На мобильных оставляем 4 колонки */
}
Чтобы «оживить» сетку, добавляем немного Яваскрипта:
(function() {
let isDebugMode = true // Включена ли сейчас сетка
const debuggerEl = document.querySelector('.debugger')
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.code === 'KeyG') { // Включаем-выключаем сетку по ctrl-g
isDebugMode = !isDebugMode
debuggerEl.classList.toggle('is__active')
debuggerEl.style.height = document.body.clientHeight + 'px' // Растягиваем сетку на всю высоту окна
}
if (isDebugMode && ['ArrowUp', 'ArrowDown'].includes(e.code)) { // Обрабатываем нажатия на стрелки вверх-вниз
e.preventDefault()
// Сдвигаем сетку дебаггера вверх-вниз на пиксель
const top = parseInt(debuggerEl.style.top, 10) || 0
const shift = e.code === 'ArrowUp' ? -1 : 1
const newTop = top + shift
debuggerEl.style.top = newTop + 'px'
}
})
debuggerEl.style.height = document.body.clientHeight + 'px'
})()
Итоговый результат смотрите на Кодпене.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.