Библиотека [ ArioCSS ]
Глобальные CSS настройки и основные стили элементов разметки HTML страниц сайтов.
Тестовый блок (В будущем T-Классы)
1
1
1
1
1
2
2
2
3
4
4
5
5
5
6
7
7
8
8
8
9
10
10
11
11
11
12
13
13
14
14
14
14
15
16
16
17
17
17
18
19
20
21
21
22
22
22
23
23
23
24
24
25
25
25
26
26
26
Глобальные структурные стили
Формируют структуру и общую геометрию верстки. Определяют стили для html, body, header, main и footer.
Глобальные настройки

	1	html {
	2		overflow-y:scroll;
	3	}
	4
	5	body {
	6		margin:0px;overflow:hidden;
	7	}
		

Стили overflow в данном случае работают в совокупности и позволяют элементам child использовать высоту в %, давая возможность уйти от использования min-height или height.


	1	header, main, footer {
	2		width:100%;display:block;
	3	}
		

Задаем элементам блочную структуру верстки и гарантируем ширину относительно body.

Являются строго единичными элементами верстки - дубликаты запрещены!
<doctype html public> <html> <body> <header>header</header> <main>main</main> <footer>footer</footer> </body> </html>
0px
0px
header
main
footer
0px
0px
Надстройки сайта
Центрирование сайта (содержимого html) за счет внутренних отступов. (Указано на примере ниже)
or
Центрирование сайта (содержимого html) за счет выравнивания тела сайта и задания максимальной ширины. Возможно использование в комбинации с @media().

	1	html {
	2		padding:0px 5%;
	3	}
					

	1	body {
	2		margin:0px auto;
	3		max-width:Npx;
	4	}
					
В стандартном варианте ширина body не установлена и работает автоматически, хватая размеры окна html.
<doctype html public> <html> <body> <header>header</header> <main>main</main> <footer>footer</footer> </body> </html>
0px
5%
header
main
footer
5%
0px
Визуальное представление кода
header
main
footer
G-class - глобальные классы
Основные классы адаптивности
Установки

	1	html * {
	2		box-sizing:border-box;
	3		-webkit-box-sizing:border-box;
	4		-moz-box-sizing:border-box;
	5	}
	6
	7	form, fieldset, .div {
	8		display:block;
	9	}
	10
	11	div, table, fieldset, form, .div {
	12		float:left;
	13	} 
		

Строка 2-4: Установка для всех элементов DOM правила опредления ширины согласно offsetWidth.

Строка 8: Определение элементов, как блочных: form,fieldset - по умолчанию; с помощью .div - частно

Строка 12: Установка для блочных элементов режима "обтекание слева".

Применяется ко всем блочным элементам.
Позиционирование

	1	.rel { position:relative; }
	2	.abs { position:absolute; }
	3	.fix { position:fixed; }
	4	.Le, .mod { float:left; }
	5	.Ri { float:right; }
	6	.Ce { margin-left:auto;margin-right:auto; }
		

Строка 1-3: Определения офсетного родителя или положения fixed (относительно html).

Применяется к любым элементам, кроме relative (не работает с td...).

Строка 4-6: Горизонтальное расположение элемента внутри контйнера.

Применяется ко всем блочным элементам.
Прокрутки

	1	.Over {overflow:auto;} .Over-s {overflow:scroll;} .Over-h {overflow:hidden;}	// В доработке
		

Режимы прокрутки overflow.

Режимы прокрутки, используемые зависимо от разрешения монитора @media().

Применяется к элементам с фиксированно заданной высотой.
Курсор

	1	.cur,[onclick] { cursor:pointer; }
	2	.cur.def { cursor:default; }
		

Типы визуалиации курсора.

Работает только во время наведения курсора на элемент.
Элементы адаптивности

	1	@media (min-width:768px){
	2		.landHid { display:none; }
	3	}
	4
	5	@media(min-width:1279px) {
	6		.lgHid { display:none; }
	7	}
	8
	9	@media(min-width:1000px) and (max-width:1278px) {
	10		.mdHid { display:none; }
	11	}
	12
	13	@media(min-width:768px) and (max-width:999px) {
	14		.smHid { display:none; }
	15	}
	16
	17	@media(max-width:767px) {
	18		.portHid { display:none; }
	19	}
		

Строки 1-15: Сокрытие элементов верстки на дисплеях с альбомной ориентацией.

Строка 17-19: Сокрытие элементов верстки на портативных устройствах.

Работают исходя из установок @media().
Элементные

	1	form { margin:0px; }
	2
	3	input,select { background-color:transparent; }
	4
	5	button { border:0px; }
	6
	7	a { color:#000000; text-decoration:none; }
	8
	9	a.div * { float:none; }	
	10
	11	@media (max-width:767px) {
	12		fieldset { width:100%!important; }
	13	}
		

Строка 1: Основная задача - использование и работа с языками Java-Script или jQuery.

Строка 3,5: Обнуление системного оформления элементов взаимодействия: button, input, select. ?????

Строка 7: Приравнивание ссылок к стандартному виду оформления текста согласно DOM-протоколу.

Строка 9: Определение ссылки как блочный элемент верстки.

Строка 12: Задание элементу form автозаполнение по ширине родителя на портативных устройствах (читать подробнее: @media()).

C-class - контекстные классы
Классы, предназначенные для управления и задания структуре верстки .... что-то.
Глобальные настройки

	1	.cont {
	2		width:100%;
	3		position:relative;
	4	}
		

Основной рабочий блок для центрирования верстки в родительском элементе с установкой по бокам (margin). 24 размерных варианта через classList с помощью размерных классов.
Используется, если по бокам ничего нет. Может находиться внутри любого блока.

Применяется ко всем блочным элементам.

	1	.mod {}
		

Основной рабочий блок для построения структуры верстки, размер которого меньше ширины страницы. 24 размерных варианта через classList с помощью размерных классов. Используется, когда в одной линии должно быть несколько модулей.

Применяется ко всем блочным элементам.

	1	.table, .tr, .td { width:100%; }
		

Основной рабочий блок для построения структуры таблицы. 24 размерных варианта через classList с помощью размерных классов.

Применяется ко всем блочным элементам.
<div class="cont">.cont</div> <div class="mod">.mod</div> <div class="table">.table</div>
.cont
.mod
.table
Визуальное представление кода
.cont
.mod
.table
S-class - размерные классы
За счет определения стилей для размерных классов в @media() - установки размеров будут актуальны только при соответствующем разрешении экранов.
Установки

Размерные классы этой категории всегда используются в совокупности с контекстными классами:


.landN и .portN являются первичными при настройке ориентации дисплея и отвечают за основной принцип адаптивности, в частных случаях принято использовать надстройки: .lgN, .mdN, .smN. N - установка параметров ширины блока/элемента, исходя из 24 размерных классов.

.landN
or
 
.lgN
.mdN
.smN
@media(min-width:768px) { ... }
@media(min-width:1279px) { ... }
@media(min-width:1000px) and (max-width:1278px) { ... }
@media(min-width:768px) and (max-width:999px) { ... }
Допускается использование класса .landN в комбинации с .lgN, .mdN и .smN, в целях максимального адаптирования дизайна под разные размеры дисплеев с альбомной ориентацией.
.portN
or
.xsN
@media(max-width:767px) { ... }
Использование размерных классов с классом .cont
.cont.land1, .cont.lg1, .cont.md1, .cont.sm1, .cont.port1, .cont.xs1 .cont.land2, .cont.lg2, .cont.md2, .cont.sm2, .cont.port2, .cont.xs2 .cont.land3, .cont.lg3, .cont.md3, .cont.sm3, .cont.port3, .cont.xs3 .cont.land4, .cont.lg4, .cont.md4, .cont.sm4, .cont.port4, .cont.xs4 .cont.land5, .cont.lg5, .cont.md5, .cont.sm5, .cont.port5, .cont.xs5 .cont.land6, .cont.lg6, .cont.md6, .cont.sm6, .cont.port6, .cont.xs6 .cont.land7, .cont.lg7, .cont.md7, .cont.sm7, .cont.port7, .cont.xs7 .cont.land8, .cont.lg8, .cont.md8, .cont.sm8, .cont.port8, .cont.xs8 .cont.land9, .cont.lg9, .cont.md9, .cont.sm9, .cont.port9, .cont.xs9 .cont.land10, .cont.lg10, .cont.md10, .cont.sm10, .cont.port10, .cont.xs10 .cont.land11, .cont.lg11, .cont.md11, .cont.sm11, .cont.port11, .cont.xs11 .cont.land12, .cont.lg12, .cont.md12, .cont.sm12, .cont.port12, .cont.xs12 .cont.land13, .cont.lg13, .cont.md13, .cont.sm13, .cont.port13, .cont.xs13 .cont.land14, .cont.lg14, .cont.md14, .cont.sm14, .cont.port14, .cont.xs14 .cont.land15, .cont.lg15, .cont.md15, .cont.sm15, .cont.port15, .cont.xs15 .cont.land16, .cont.lg16, .cont.md16, .cont.sm16, .cont.port16, .cont.xs16 .cont.land17, .cont.lg17, .cont.md17, .cont.sm17, .cont.port17, .cont.xs17 .cont.land18, .cont.lg18, .cont.md18, .cont.sm18, .cont.port18, .cont.xs18 .cont.land19, .cont.lg19, .cont.md19, .cont.sm19, .cont.port19, .cont.xs19 .cont.land20, .cont.lg20, .cont.md20, .cont.sm20, .cont.port20, .cont.xs20 .cont.land21, .cont.lg21, .cont.md21, .cont.sm21, .cont.port21, .cont.xs21 .cont.land22, .cont.lg22, .cont.md22, .cont.sm22, .cont.port22, .cont.xs22 .cont.land23, .cont.lg23, .cont.md23, .cont.sm23, .cont.port23, .cont.xs23 .cont.land24, .cont.lg24, .cont.md24, .cont.sm24, .cont.port24, .cont.xs24
{ width:4.16%; margin-right:47.92%; margin-left:47.92%; } { width:8.34%; margin-right:45.83%; margin-left:45.83%; } { width:12.5%; margin-right:43.75%; margin-left:43.75%; } { width:16.66%; margin-right:41.67%; margin-left:41.67%; } { width:20%; margin-right:40%; margin-left:40%; } { width:25%; margin-right:37.5%; margin-left:37.5%; } { width:29.16%; margin-right:35.41%; margin-left:35.41%; } { width:33.33%; margin-right:33.33%; margin-left:33.33%; } { width:37.49%; margin-right:31.25%; margin-left:31.25%; } { width:41.66%; margin-right:29.33%; margin-left:29.33%; } { width:45.83%; margin-right:27.16%; margin-left:27.16%; } { width:50%; margin-right:25%; margin-left:25%;} { width:54.16%; margin-right:22.58%; margin-left:22.58%; } { width:58.33%; margin-right:20.16%; margin-left:20.16%; } { width:62.49%; margin-right:18.4%; margin-left:18.4%; } { width:66.66%; margin-right:16.65%; margin-left:16.65%; } { width:70.81%; margin-right:14.57%; margin-left:14.57%; } { width:75%; margin-right:12.5%; margin-left:12.5%; } { width:79.15%; margin-right:10.41%; margin-left:10.41%; } { width:83.33%; margin-right:8.33%; margin-left:8.33%; } { width:87.49%; margin-right:6.24%; margin-left:6.24%; } { width:91.66%; margin-right:4.16%; margin-left:4.16%; } { width:95.83%; margin-right:2.08%; margin-left:2.08%; } { width:100%; }

landN - Установки размерных классов для устройств с шириной экранов 768px и выше;

lgN - Установки размерных классов для устройств с шириной экранов 1279px и выше;

mdN - Установки размерных классов для устройств с шириной экранов от 1000px до 1278px;

smN - Установки размерных классов для устройств с шириной экранов от 768px до 999px;

portN, xsN - Установки размерных классов для портативных устройств с шириной экранов равной или меньше, чем 767 пикселей.

Работают только в комбинации с классом .cont.
Пример верстки "Блок в блоке"
<div class="cont"> <div class="cont land21"> <div class="cont land16"> <div class="cont land18"> <div class="cont land16"> <div class="cont land14"> ... </div> </div> </div> </div> </div> </div>
.cont
.cont.land21
.cont.land16
.cont.land18
.cont.land16
.cont.land14
Пример верстки "Блок под блоком"
<div class="cont land22"></div> <div class="cont land16"></div> <div class="cont land18"></div> <div class="cont"></div> <div class="cont land14"></div>
.cont.land22
.cont.land16
.cont.land18
.cont
.cont.land14
Использование размерных классов с классом .mod
.mod.land1, .mod.lg1, .mod.md1, .mod.sm1, .mod.port1, .mod.xs1 .mod.land2, .mod.lg2, .mod.md2, .mod.sm2, .mod.port2, .mod.xs2 .mod.land3, .mod.lg3, .mod.md3, .mod.sm3, .mod.port3, .mod.xs3 .mod.land4, .mod.lg4, .mod.md4, .mod.sm4, .mod.port4, .mod.xs4 .mod.land5, .mod.lg5, .mod.md5, .mod.sm5, .mod.port5, .mod.xs5 .mod.land6, .mod.lg6, .mod.md6, .mod.sm6, .mod.port6, .mod.xs6 .mod.land7, .mod.lg7, .mod.md7, .mod.sm7, .mod.port7, .mod.xs7 .mod.land8, .mod.lg8, .mod.md8, .mod.sm8, .mod.port8, .mod.xs8 .mod.land9, .mod.lg9, .mod.md9, .mod.sm9, .mod.port9, .mod.xs9 .mod.land10, .mod.lg10, .mod.md10, .mod.sm10, .mod.port10, .mod.xs10 .mod.land11, .mod.lg11, .mod.md11, .mod.sm11, .mod.port11, .mod.xs11 .mod.land12, .mod.lg12, .mod.md12, .mod.sm12, .mod.port12, .mod.xs12 .mod.land13, .mod.lg13, .mod.md13, .mod.sm13, .mod.port13, .mod.xs13 .mod.land14, .mod.lg14, .mod.md14, .mod.sm14, .mod.port14, .mod.xs14 .mod.land15, .mod.lg15, .mod.md15, .mod.sm15, .mod.port15, .mod.xs15 .mod.land16, .mod.lg16, .mod.md16, .mod.sm16, .mod.port16, .mod.xs16 .mod.land17, .mod.lg17, .mod.md17, .mod.sm17, .mod.port17, .mod.xs17 .mod.land18, .mod.lg18, .mod.md18, .mod.sm18, .mod.port18, .mod.xs18 .mod.land19, .mod.lg19, .mod.md19, .mod.sm19, .mod.port19, .mod.xs19 .mod.land20, .mod.lg20, .mod.md20, .mod.sm20, .mod.port20, .mod.xs20 .mod.land21, .mod.lg21, .mod.md21, .mod.sm21, .mod.port21, .mod.xs21 .mod.land22, .mod.lg22, .mod.md22, .mod.sm22, .mod.port22, .mod.xs22 .mod.land23, .mod.lg23, .mod.md23, .mod.sm23, .mod.port23, .mod.xs23 .mod.land24, .mod.lg24, .mod.md24, .mod.sm24, .mod.port24, .mod.xs24
{ width:4.16%; } { width:8.34%; } { width:12.5%; } { width:16.66%; } { width:20%; } { width:25%; } { width:29.16%; } { width:33.33%; } { width:37.49%; } { width:41.66%; } { width:45.83%; } { width:50%; } { width:54.16%; } { width:58.33%; } { width:62.49%; } { width:66.66%; } { width:70.81%; } { width:75%; } { width:79.15%; } { width:83.33%; } { width:87.49%; } { width:91.66%; } { width:95.83%; } { width:100%; }

landN - Установки размерных классов для устройств с шириной экранов 768px и выше;

lgN - Установки размерных классов для устройств с шириной экранов 1279px и выше;

mdN - Установки размерных классов для устройств с шириной экранов от 1000px до 1278px;

smN - Установки размерных классов для устройств с шириной экранов от 768px до 999px;

portN, xsN - Установки размерных классов для портативных устройств с шириной экранов равной или меньше, чем 767 пикселей.

Работают только в комбинации с классом .mod.
Пример верстки "Блок в блоке"
<div class="mod"> <div class="mod land21"> <div class="mod land16"> <div class="mod land18"> <div class="mod land16"> <div class="mod land14"> ... </div> </div> </div> </div> </div> </div>
.mod
.mod.land21
.mod.land16
.mod.land18
.mod.land16
.mod.land14
Пример верстки "Блок за блоком"
<div class="mod land7"></div> <div class="mod land4"></div> <div class="mod land12"></div> <div class="mod land16"></div> <div class="mod land5"></div> <div class="mod land18"></div> <div class="mod"></div> <div class="mod land14"></div>
.mod.land7
.mod.land5
.mod.land12
.mod.land16
.mod.land5
.mod.land18
.mod.land24
.mod.land14
F-class - шрифтовые классы
Основные классы адаптивности
Глобальные настройки

	...