/outline-prototype

В помощь для визуального восприятия блоков при вёрстке

Primary LanguageJavaScriptMIT LicenseMIT

outline-prototype

Для чего

Не всегда понятно какое место занимает тот или иной html-элемент в структуре html-документа. Данный outline-prototype, подключенный к странице, визуально отображает разные блоки.

Как это выглядит

Основыне блоки header, main, footer подсвечиваються широкой красной линией.

Блоки nav, section, article, aside подсвечиваються средней оранжевой линией.

Остальныйе блоки подсвечиваються соответствующими цветами, согласно их вложенности в DOM-дереве, тонкой линией. Что-бы не запутаться в цветах, использовал радугу: красный - самый верхний элемент в DOM-дереве, оранжевый - на уровень ниже, жёлтый - ещё ниже, и т.д. После шестого уровня все элементы красяться в серый цвет.

Есть два вариант outline-prototype

  1. 1й вариант с метками - outline-prototype-label.css - для базовой разметки, когда нет псевдоэлементов ::before и ::after, и нет абсолютно позиционируемых элементов. Выводит подписи основных блоков.

Внимание! Готовый макет или сайт может ломать, используйте осторожно.

  1. 2й вариант безопасный - outline-prototype-safe.css - подойдёт для финальной разметки макетов, и для инспектирования блоков на готовом сайте. Ничего не ломает.

Как подключить

  1. Можно скачать нужный вариант outline-prototype, поместить в свой проект и подключить.
  2. Можно использовать CDN и подключить стили. Для этого скопируй ссылку с нужным вариантом, и подключи в своём html
  1. Можно использовать CDN и подключить скрипт. Для этого скопируй ссылку и подключи в своём html outline-control.js
  2. Можно применить для любого сайта, написав в консоли браузера команду
  • панель переключения стилей s=document.createElement('script');s.src='https://rawcdn.githack.com/ArtMan-8/outline-prototype/9735cb1ad2dc8b759c76c94fc92f4be68d66798d/js/outline-control.js';document.body.appendChild(s);
  • вариант с метками s=document.createElement('link');s.rel='stylesheet';s.href='https://rawcdn.githack.com/ArtMan-8/outline-prototype/7d7765cd572bdec952ca61280d70dd9f1781c153/css/outline-prototype-label.css';document.body.appendChild(s);
  • безопасный вариант s=document.createElement('link');s.rel='stylesheet';s.href='https://rawcdn.githack.com/ArtMan-8/outline-prototype/7d7765cd572bdec952ca61280d70dd9f1781c153/css/outline-prototype-safe.css';document.body.appendChild(s);