├── LICENSE
├── README.md
├── css
    ├── outline-prototype-label.css
    └── outline-prototype-safe.css
├── img
    └── outline-prototype.gif
└── js
    └── outline-control.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Vladimir  Artyukhov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # outline-prototype
 2 | ## Для чего
 3 | Не всегда понятно какое место занимает тот или иной html-элемент в структуре html-документа.
 4 | Данный **[outline-prototype](https://github.com/ArtMan-8/outline-prototype/blob/master/css/)**, подключенный к странице, визуально отображает разные блоки.
 5 | 
 6 | ## Как это выглядит
 7 | ![](https://raw.githubusercontent.com/ArtMan-8/outline-prototype/master/img/outline-prototype.gif)
 8 | Основыне блоки **header, main, footer** подсвечиваються широкой красной линией.<p>
 9 | Блоки **nav, section, article, aside** подсвечиваються средней оранжевой линией.<p>
10 | Остальныйе блоки подсвечиваються соответствующими цветами, согласно их вложенности в DOM-дереве, тонкой линией. Что-бы не запутаться в цветах, использовал *радугу*: красный - самый верхний элемент в DOM-дереве, оранжевый - на уровень ниже, жёлтый - ещё ниже, и т.д. После шестого уровня все элементы красяться в серый цвет.
11 | 
12 | ### Есть два вариант [outline-prototype](https://github.com/ArtMan-8/outline-prototype/tree/master/css)
13 | 1. 1й вариант с метками - **[outline-prototype-label.css](https://github.com/ArtMan-8/outline-prototype/blob/master/css/outline-prototype-label.css)** - для базовой разметки, когда нет псевдоэлементов ::before и ::after, и нет абсолютно позиционируемых элементов. Выводит подписи основных блоков.
14 | >**Внимание!** Готовый макет или сайт может ломать, используйте осторожно.
15 | 2. 2й вариант безопасный - **[outline-prototype-safe.css](https://github.com/ArtMan-8/outline-prototype/blob/master/css/outline-prototype-safe.css)** - подойдёт для финальной разметки макетов, и для инспектирования блоков на готовом сайте. Ничего не ломает.
16 | 
17 | ## Как подключить
18 | 1. Можно скачать нужный вариант **[outline-prototype](https://github.com/ArtMan-8/outline-prototype/blob/master/css/)**, поместить в свой проект и подключить.
19 | 2. Можно использовать **CDN** и подключить панель с переключателем стилей. Для этого скопируй ссылку и подключи в своём html
20 | **[outline-control.js](https://rawcdn.githack.com/ArtMan-8/outline-prototype/e73da2a1ee9031564b56ed5d98541891f7123933/js/outline-control.js)**
21 | 3. Можно подключить панель с переключателем стилей на любой сайта, написав в консоли браузера команду `s=document.createElement('script');s.src='https://rawcdn.githack.com/ArtMan-8/outline-prototype/e73da2a1ee9031564b56ed5d98541891f7123933/js/outline-control.js';document.body.appendChild(s);`
22 | 


--------------------------------------------------------------------------------
/css/outline-prototype-label.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   position: relative;
  3 |   background: rgba(169, 169, 169, 0.1);
  4 |   box-shadow: inset 0 0 0 1px darkgrey;
  5 | }
  6 | 
  7 | *::before {
  8 |   content: "";
  9 |   position: absolute;
 10 |   top: -3px;
 11 |   right: 0;
 12 |   left: -3px;
 13 |   left: auto;
 14 | 
 15 |   padding: 2px 5px;
 16 | 
 17 |   font-weight: bold;
 18 |   font-size: 12px;
 19 |   line-height: 12px;
 20 |   font-family: "Courier New", monotype;
 21 |   color: white;
 22 |   text-transform: uppercase;
 23 |   white-space: nowrap;
 24 | 
 25 |   background: darkgray;
 26 | }
 27 | 
 28 | body > * {
 29 |   background: rgba(255, 0, 0, 0.1);
 30 |   box-shadow: 0 0 0 4px red;
 31 | }
 32 | 
 33 | body > *::before {
 34 |   color: white;
 35 |   background: red;
 36 | }
 37 | 
 38 | body > * > * {
 39 |   background: rgba(255, 165, 0, 0.1);
 40 |   box-shadow: 0 0 0 2px orange;
 41 | }
 42 | 
 43 | body > * > *::before {
 44 |   color: white;
 45 |   background: orange;
 46 | }
 47 | 
 48 | body > * > * > * {
 49 |   background: rgba(255, 255, 0, 0.1);
 50 |   box-shadow: 0 0 0 1px yellow;
 51 | }
 52 | 
 53 | body > * > * > *::before {
 54 |   color: black;
 55 |   background: yellow;
 56 | }
 57 | 
 58 | body > * > * > * > * {
 59 |   background: rgba(0, 128, 0, 0.1);
 60 |   box-shadow: 0 0 0 1px green;
 61 | }
 62 | 
 63 | body > * > * > * > *::before {
 64 |   color: white;
 65 |   background: green;
 66 | }
 67 | 
 68 | body > * > * > * > * > * {
 69 |   background: rgba(0, 0, 255, 0.1);
 70 |   box-shadow: inset 0 0 0 1px blue;
 71 | }
 72 | 
 73 | body > * > * > * > * > *::before {
 74 |   color: white;
 75 |   background: blue;
 76 | }
 77 | 
 78 | body > * > * > * > * > * > * {
 79 |   background: rgba(148, 0, 211, 0.1);
 80 |   box-shadow: inset 0 0 0 1px darkviolet;
 81 | }
 82 | 
 83 | body > * > * > * > * > * > *::before {
 84 |   color: white;
 85 |   background: darkviolet;
 86 | }
 87 | 
 88 | /* ------------------ */
 89 | header,
 90 | main,
 91 | footer {
 92 |   box-shadow: 0 0 0 4px red;
 93 | }
 94 | 
 95 | header::before,
 96 | main::before,
 97 | footer::before {
 98 |   right: auto;
 99 |   left: 0;
100 |   z-index: 1;
101 | 
102 |   font-size: 20px;
103 |   line-height: 20px;
104 | }
105 | 
106 | header::before {
107 |   content: "header";
108 | }
109 | 
110 | main::before {
111 |   content: "main";
112 | }
113 | 
114 | footer::before {
115 |   content: "footer";
116 | }
117 | 
118 | /* ------------------ */
119 | nav,
120 | section,
121 | article,
122 | aside {
123 |   box-shadow: 0 0 0 2px orange;
124 | }
125 | 
126 | nav::before,
127 | section::before,
128 | article::before,
129 | aside::before {
130 |   right: 0;
131 |   left: auto;
132 |   z-index: 1;
133 | 
134 |   font-size: 16px;
135 |   line-height: 16px;
136 | }
137 | 
138 | nav::before {
139 |   content: "nav";
140 | }
141 | 
142 | section::before {
143 |   content: "section";
144 | }
145 | 
146 | article::before {
147 |   content: "article";
148 | }
149 | 
150 | aside::before {
151 |   content: "aside";
152 | }
153 | 
154 | /* ------------------ */
155 | h1::before,
156 | h2::before,
157 | h3::before,
158 | h4::before,
159 | h5::before,
160 | h6::before {
161 |   content: "h";
162 |   right: auto;
163 |   left: 0;
164 |   z-index: 1;
165 | }
166 | 
167 | ul::before,
168 | ol::before {
169 |   top: auto;
170 |   right: auto;
171 |   bottom: 0;
172 |   left: 0;
173 |   z-index: 1;
174 | }
175 | 
176 | ul::before {
177 |   content: "ul";
178 | }
179 | 
180 | ol::before {
181 |   content: "ol";
182 | }
183 | 
184 | form::before {
185 |   content: "form";
186 |   top: auto;
187 |   right: 0;
188 |   bottom: 0;
189 |   left: auto;
190 |   z-index: 1;
191 | }
192 | 
193 | p::before {
194 |   content: "p";
195 |   right: auto;
196 |   left: 0;
197 | }
198 | 


--------------------------------------------------------------------------------
/css/outline-prototype-safe.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   background: rgba(169, 169, 169, 0.1);
 3 |   box-shadow: 0 0 0 1px darkgray;
 4 | }
 5 | 
 6 | body > * {
 7 |   background: rgba(255, 0, 0, 0.1);
 8 |   box-shadow: 0 0 0 4px red;
 9 | }
10 | 
11 | body > * > * {
12 |   background: rgba(255, 165, 0, 0.1);
13 |   box-shadow: 0 0 0 2px orange;
14 | }
15 | 
16 | body > * > * > * {
17 |   background: rgba(255, 255, 0, 0.1);
18 |   box-shadow: 0 0 0 1px yellow;
19 | }
20 | 
21 | body > * > * > * > * {
22 |   background: rgba(0, 128, 0, 0.1);
23 |   box-shadow: 0 0 0 1px green;
24 | }
25 | 
26 | body > * > * > * > * > * {
27 |   background: rgba(0, 0, 255, 0.1);
28 |   box-shadow: inset 0 0 0 1px blue;
29 | }
30 | 
31 | body > * > * > * > * > * > * {
32 |   background: rgba(148, 0, 211, 0.1);
33 |   box-shadow: inset 0 0 0 1px darkviolet;
34 | }
35 | 
36 | /* ------------------ */
37 | header,
38 | main,
39 | footer {
40 |   box-shadow: 0 0 0 4px red;
41 | }
42 | 
43 | nav,
44 | section,
45 | article,
46 | aside {
47 |   box-shadow: 0 0 0 2px orange;
48 | }
49 | 
50 | 


--------------------------------------------------------------------------------
/img/outline-prototype.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArtMan-8/outline-prototype/66e11dae1e869145da9a9e333d28167b7bdf8072/img/outline-prototype.gif


--------------------------------------------------------------------------------
/js/outline-control.js:
--------------------------------------------------------------------------------
  1 | (function (){
  2 |   'use strict';
  3 | 
  4 |   /* Вставка тега link */
  5 |   let head = document.getElementsByTagName('head')[0]
  6 |   let cssStyle = document.createElement('link');
  7 |   cssStyle.setAttribute('rel', 'stylesheet');
  8 |   cssStyle.setAttribute('id', 'outline-prototype');
  9 |   head.appendChild(cssStyle);
 10 | 
 11 | 
 12 |   let fragment = document.createDocumentFragment();
 13 |   let section = document.createElement('section');
 14 |   createOutlinePanel();
 15 |   fragment.appendChild(section);
 16 |   document.body.append(fragment);
 17 | 
 18 |   let outlinePanel = document.querySelector('.outline-controls');
 19 |   let outlineMove = document.querySelector('.outline-controls__move');
 20 | 
 21 |   /* Вставка обвёртки для панельки HTML */
 22 |   function createOutlinePanel() {
 23 |     section.classList.add('outline-controls');
 24 |     section.style = 'position: fixed; top: 20px; left: 20px; padding: 5px; border-radius: 5px; background-color: #FFA0A0; z-index: 9999;';
 25 |     for (let i = 0; i < 3; i++) {
 26 |       let div = document.createElement('div');
 27 |       if (i === 0) {
 28 |         div.appendChild(createInputLabel('labelsOn').input);
 29 |         div.appendChild(createInputLabel('labelsOn').label);
 30 |       } else if (i === 1) {
 31 |         div.appendChild(createInputLabel('labelsOff').input);
 32 |         div.appendChild(createInputLabel('labelsOff').label);
 33 |       } else if (i === 2) {
 34 |         div.appendChild(createInputLabel('outlineOff').input);
 35 |         div.appendChild(createInputLabel('outlineOff').label);
 36 |       }
 37 |       section.appendChild(div);
 38 |     };
 39 |     section.appendChild(createButtonMove());
 40 |   }
 41 | 
 42 |   /* Вставка инмутов и лейблов */
 43 |   function createInputLabel(param) {
 44 |     let input = document.createElement('input');
 45 |     input.type = 'radio';
 46 |     input.name = 'outline-choice';
 47 |     input.id = param;
 48 | 
 49 |     let label = document.createElement('label');
 50 |     label.setAttribute('for', param);
 51 |     label.innerText = param;
 52 | 
 53 |     return {
 54 |       input,
 55 |       label
 56 |     }
 57 |   }
 58 | 
 59 |   /* Переключение стилей */
 60 |   outlinePanel.addEventListener('change', onOutlinePanelChoice);
 61 |   function onOutlinePanelChoice(evt) {
 62 |     const outlinelabel = 'https://rawcdn.githack.com/ArtMan-8/outline-prototype/5774cf08d7af2205446a93b345ec0a7bcd0546ed/css/outline-prototype-label.css';
 63 |     const outlineSafe = 'https://rawcdn.githack.com/ArtMan-8/outline-prototype/5774cf08d7af2205446a93b345ec0a7bcd0546ed/css/outline-prototype-safe.css';
 64 |     switch (evt.target.id) {
 65 |       case 'labelsOn':
 66 |         cssStyle.href = outlinelabel;
 67 |         break;
 68 |       case 'labelsOff':
 69 |         cssStyle.href = outlineSafe;
 70 |         break;
 71 |       case 'outlineOff':
 72 |         cssStyle.href = '';
 73 |         break;
 74 |     };
 75 |   }
 76 | 
 77 |   /* Вставка кнопки перемещения */
 78 |   function createButtonMove() {
 79 |     let buttonMove = document.createElement('button');
 80 |     buttonMove.innerText = 'move';
 81 |     buttonMove.classList.add('outline-controls__move');
 82 |     buttonMove.style = 'display: block; width: 100%; margin: auto; border-radius: 5px; cursor: grab;';
 83 |     return buttonMove;
 84 |   }
 85 | 
 86 |   /* Перемещение панельки */
 87 |   outlineMove.addEventListener('mousedown', onMoveMousedown);
 88 |   function onMoveMousedown(evt) {
 89 |     evt.preventDefault();
 90 |     let startCoordinates = {
 91 |       x: evt.clientX,
 92 |       y: evt.clientY
 93 |     };
 94 | 
 95 |     let onMousemove = function (moveEvt) {
 96 |       moveEvt.preventDefault();
 97 |       let shift = {
 98 |         x: startCoordinates.x - moveEvt.clientX,
 99 |         y: startCoordinates.y - moveEvt.clientY
100 |       };
101 | 
102 |       startCoordinates = {
103 |         x: moveEvt.clientX,
104 |         y: moveEvt.clientY
105 |       };
106 | 
107 |       outlinePanel.style.left = (outlinePanel.offsetLeft - shift.x) + 'px';
108 |       outlinePanel.style.top = (outlinePanel.offsetTop - shift.y) + 'px';
109 |     };
110 | 
111 |     let onMouseup = function (upEvt) {
112 |       upEvt.preventDefault();
113 |       document.removeEventListener('mousemove', onMousemove);
114 |       document.removeEventListener('mouseup', onMouseup);
115 |     };
116 | 
117 |     document.addEventListener('mousemove', onMousemove);
118 |     document.addEventListener('mouseup', onMouseup);
119 |   }
120 | })();
121 | 


--------------------------------------------------------------------------------