Макетирование страниц сайта (шаблонирование)

Вёрстка веб-страниц - основы работы с HTML

- определение возможностей устройства(браузера), используем modernizr, modernizr docs
- html	- применяемые стандарты:
			отраслевой стандарт html.spec.whatwg.org,
			html5, css3(normalize), js source, 
			Limited insert examples:
			jquery, bootstrap+(flexbox), php
			В примерах на ресурсы используются:
			@jukta.twin, node, json, twig, vue, sass, yandexcloud, wordpress ..
			+ c 2022 не поддерживается

АРХИВ:
page_settings_templates		- настройки страницы (сайта)
page_composit_templates		- скелеты, каркасы
page_component_templates	- шаблоны компонентов
page_segment_templates		- сегменты страницы
page_element_templates		- тэги HTML

jukta-site_templates		- шаблоны для проекта Jukta

css	- общая папка со стилями для шаблонов
fonts	- общая папка со шрифтами для шаблонов
incl	- общая папка с данными для шаблонов

page_files_templates	- примеры структуризации проектов и наборы файлов для макетов,
				public: (/CSS /JS /IMG .. .ico .png .svg ..)
css_templates		- примеры и приёмы стилизации
js_templates		- примеры скриптов
			jQuery.viewport	- отслеживание элементов на экране
page_data_templates	- примеры и приёмы работы с данными

standards-guide_crib_W3C	- выдержки из стандартов W3C
instruments			- полезные инструменты для вёрстки
				Viewport Devices & Breakpoint Adobe
			

Требования к шаблонам:
-	семантическая "правильность" кода (максимальная валидность),
-	учёт требований accessibility,
-	поддержка графического SVG любого типа форматирования,
	
markup.sys:
-	минимальное количество скелетов (идеал - один),
	адаптивность от 320px до 1920px(2K-?),
	глобальное осутствие переполнения ширины окна (гор. scroll), *для вертикальных потоков
	блок в центре страницы (осутствие переполнения окна), "CenterPage"
	без переполнения окна по высоте footer прижат к низу окна,
	header фиксируемый \ скрываемый(с прокруткой),
	aside справа и слева (скрываемые, с прокруткой),
			

Охват браузеров (not: HTML5, CSS3, flex):
	IE 11(10-?), "IE"
	Chrome, Firefox, Opera (actual), "actual"
	Android 4.1, "Android"
	Safari 5.1 (for Windows), "Safari"
II этап:
	[Opera mini (?)]
			

Проблемы в браузерах:
	Android 4 (~1% Рынка): vw, vh, height:auto, width:auto, flex
			

Проверено для: CenterPage | IE, actual, Android, Safari
	Skeleton-Pages[единый шаблон]

	markup.sys.doc[нужна доработка]
	TSP-simplest-catalog_table[нужна доработка]
	inline-block_center
			

ТЕРМИНОЛОГИЯ
шаблон	- "templates", о странице, набор всех типовых сегментов(блоков),
			с пробитыми "дырами" под блоки контента(компоненты, элементы)
макет,
композиция	- то же, что и "шаблон", но с набором конкретных сегментов(блоков),
			адаптированных под задачи страницы
скелет,
каркас	- "раскладка", распределение на странице(в окне браузера) стандартных сегментов(блоков) страницы,
			с контролем за неизменным их положением, вне зависимости от размеров окна и типа браузера
markup	- общее обозначение набора технологий, инструментов и приёмов шаблонирования,
			то, что называется "вёрстка"
набор	- "set", группа с ясно прослеживаемой стуктурой иерархии (элементы явно структурированы).
сегмент	- "segment",
	пространственные сегменты: div top, middle, bottom | left, center, right
	семантические сегменты: header, nav*, aside, main, footer | section, article
	nav* - о блоке, оформленом в виде меню.

site templates set	- набор шаблонов сайта
page template		- шаблон страницы
settings	- настройки страницы
composit	- HTML скелет страницы
segment		- часть скелета страницы
component	- набор связанных элементов HTML
element		- элемент HTML, tag