Skip to content

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

License

Notifications You must be signed in to change notification settings

ArtMan-8/outline-prototype

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 outline-control.js
  3. Можно подключить панель с переключателем стилей на любой сайта, написав в консоли браузера команду s=document.createElement('script');s.src='https://rawcdn.githack.com/ArtMan-8/outline-prototype/e73da2a1ee9031564b56ed5d98541891f7123933/js/outline-control.js';document.body.appendChild(s);

About

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

Topics

Resources

License

Stars

Watchers

Forks