Levus-css 2.3   Levus-css 2.7

css-фреймворк для максимально швидкої і простої верстки сторінок сайту.

Схема:

  1. Обнулення
  2. Основні стилі
  3. Сітка, блоки та колонки
  4. Іконки
  5. Меню
  6. Кольори
  7. Кнопки, форми
  8. Таблиця
  9. Заплановано
  10. Підключити/завантажити
  11. Залишити коментар

Формально -- обов’язковими є тільки 1, 2 і 3.

Основний принцип, який використано при створенні фреймворка — принцип очевидності та коротких називних імен! Себто назви класів повинні мати очевидні зрозумілі назви, які пояснюватимуть, що це за клас.

Майже кожен тег має додатковий (альтернативний) клас, наприклад, семантично півжирний/півжирний (<strong>/<b>) мають синоніми у вигляді класів .strong і відповідно .b.

У назвах класів використовується дефіс! Тому у власних стилях рекомендовано використовувати нижнє підкреслення, CamelCase або великі літери щоб не виник конфлікт стилів.

1. Обнулення усіх тегів

Комусь подобається нормалізація, себто прописання стилів для кожного тегу. А тут зроблено у два кроки: крок 1 — скидання усіх параметрів так, як це запропонував Eric Meyer, плюс вертикальне вирівнювання зображень по нижньому краю (щоб прибрати зайвий відступ унизу); і крок 2 — стилізація.

2. Основні стилі

Шрифт тексту: рублений; sans-serif.

Шрифт заголовків: зі засічками; serif. Заголовки також мають додаткові класи: .h1, .h2, .h3, .h4, .h5, .h6

На демонстраційній сторінці використано шрифт font-family: 'PT Sans', sans-serif;

	<h1>Заголовок 1</h1>
	<h2>Заголовок 2</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
	<span class="h1">Заголовок 1</span>
	<span class="h2 green">Заголовок 2</span>
	<span class="h3">Заголовок 3</span>
	<span class="h4 green">Заголовок 4</span>
	<span class="h5">Заголовок 5</span>
	<span class="h6 green">Заголовок 6</span>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6
Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

Зображення

Зображення (img) за замовчуванням не є гумове (responsive), для того, щоб воно таким стало, використовується клас .image, можна вкласти зображення в обгортку або ж присвоїти клас безпосередньо картинці:

<img src="path-to-image" class="image" />
<p class="image">
	<img src="path-to-image" />
</p>

Дисплей:

.block{ display: block}

.inline{ display: inline}

.inline-block{ display: inline-block}

.list-item{ display: list-item}

.none{ display: none}

П’ять основних типів дисплея.

Півжирний текст

b, strong, .b, .strong{ font-weight: 700;}

Курсивний текст

i, em, cite, dfn, address, var, .i, .em{ font-style: italic;}

Прописний текст (великі літери)

.upper, .uppercase{ text-transform: uppercase;}

Малі літери

.lover, .lovercase{ text-transform: lowercase;}

Перша літера кожного слова велика

.capital, .capitalize{ text-transform: capitalize;}

Верхній індекс (степінь)

sup, .sup{ font-size: 0.6em; vertical-align: super; font-family: 'AGFatumC', sans-serif;}

Нижній індекс

sub, .sub{ font-size: 0.6em; vertical-align: sub; font-family: 'AGFatumC', sans-serif;}

Моноширинний текст

samp, tt, ins, .samp, .tt, .ins{ font-family: "Courier New", Courier, mono;}

Виділений текст

mark, .mark{ background: #eee; padding:1px 3px;}

Блочна цитата

blockquote, .blockquote{ margin: 5px 5px 5px 60px; padding:5px 5px 5px 10px; font-family: 'PetersburgCyrillic', serif; font-style: italic; border-left: 5px solid #eee; border-right: 5px solid #eee; border-radius: 10px;}

Цитата-виділення у тексті

q, .q{ font-family: 'PetersburgCyrillic', serif; font-style: italic; quotes: "«" "»"} q:before{ content: open-quote; font-size: 1.6em;} q:after{ content: close-quote; font-size: 1.6em;}

Закреслено

strike, del, s, .strike, .del, .s{ text-decoration: line-through;}

Тег strike вважається застарілим.

Фрагмент тексту меншим розміром ніж решта

small, .small{ font-size: 0.8em;}

Можна зменшити і текст, і кнопку (button, input)

Фрагмент тексту більшим розміром ніж решта

big, .big{ font-size: 1.2em;}

Можна збільшити і текст, і кнопку (button, input)

Тег big вважається застарілим.

Маркований і нумерований список

<ul>
	<li>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</li>
	<li>Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, 
		<ul>
			<li>коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. </li>
			<li>"Риба" не тільки успішно пережила п'ять століть, 
				<ul>
					<li>але й прижилася в електронному верстуванні, </li>
					<li>залишаючись по суті незмінною. </li>
				</ul>				
			</li>	
		</ul>
	</li>
</ul>
  • Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
  • Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя,
    • коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів.
    • "Риба" не тільки успішно пережила п'ять століть,
      • але й прижилася в електронному верстуванні,
      • залишаючись по суті незмінною. 
<ol>
	<li>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. </li>
	<li>Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, 
		<ol>
			<li>коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. </li>
			<li>"Риба" не тільки успішно пережила п'ять століть, 
				<ol>
					<li>але й прижилася в електронному верстуванні, </li>
					<li>залишаючись по суті незмінною. </li>
				</ol>				
			</li>	
		</ol>
	</li>
</ol>
  1. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
  2. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя,
    1. коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів.
    2. "Риба" не тільки успішно пережила п'ять століть,
      1. але й прижилася в електронному верстуванні,
      2. залишаючись по суті незмінною.

Позиціонування

.relative, .p-r{ position: relative;}

.static, .p-s{ position: static;}

.fixed, .p-f{ position: fixed;}

.absolute, .p-a{ position: absolute;}

Центрування блоку

.auto{ margin: auto; float: none!important;}

Вирівнювання тексту

.left{ text-align: left!important;}

.right{ text-align: right!important;}

.center{ text-align: center!important;}

Текст на малому екрані примусово вліво!

	<p class="left">Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</p>
	<p class="right">Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</p>
	<p class="center">Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</p>

Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.

Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.

Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.

Границя

.border{ border: 1px solid #eee;}

Горизонтальна прокрутка

.scroll{ overflow-x: auto; width: 100%;}

Може використовуватися разом з таблицею

Скруглення кутів

.radius{ border-radius:0.3em;}

Фрейм

iframe{ max-width: 100%!important;}

Хлібні крихти

<ul class="breadcrumbs">
	<li>Home page</li> 
	<li> &larr;</li> 
	<li> Category</li> 
	<li> &larr;</li> 
	<li><strong><Page</strong>< </li> 
</ul>
  • Home page
  • ←
  • Category
  • ←
  • Page

Посторінкова навігація на сайті

<ul class="pagination">
	<li> <a href="#">««</a> </li>
	<li> … </li>
	<li> <a href="#">«</a> </li>
	<li> <a href="#">2</a> </li>
	<li> <a href="#">3</a> </li>
	<li> <span class="active">4</span> </li>
	<li> <a href="#">5</a> </li>
	<li> <a href="#">6</a> </li>
	<li> <a href="#">»</a> </li>
	<li> … </li>
	<li> <a href="#">»»</a> </li>
</ul>

3. Cітка, блоки та колонки

3.1 Сітка (розмітка, grid)

Люблю метричну систему, тому сітка 10-колонкова, а не традиційна 12-и. Оскільки сітка фактично є переробленою класичною таблицею і принцип відображення інформації в ній є типово табличний, тому і назви відповідні.

Основна обгортка, яка не є обов’язковою, але рекомендованою, має назву .tbl (таблиця).

Рядок має префікс .tr- і на даний час буває двох типів: .tr-0 (вічка без відступів) і .tr-10 (є 10-піксельний відступ між вічками).

Колонки (вічка), як правило мають синоніми:

  • .td-1, .td-10{ width: 10%;} 10 колонок
  • .td-11{ width: 11.1111111111%;} 9 колонок
  • .td-12{ width: 12.5%;} 8 колонок
  • .td-14{ width: 14.28571428%;} 7 колонок
  • .td-15{ width: 15%;}
  • .td-16{ width: 16.666666666%;} 6 колонок
  • .td-2, .td-20{ width: 20%;} 5 колонок
  • .td-22{ width: 22%;}
  • .td-25{ width: 25%;} 4 колонки
  • .td-3, .td-30{ width: 30%;}
  • .td-33{ width: 33.33333333%;} 3 колонки, третина
  • .td-35{ width: 35%;}
  • .td-4, .td-40{ width: 40%;}
  • .td-45{ width: 45%;}
  • .td-5, .td-50{ width: 50%;} 2 колонки
  • .td-55{ width: 55%;}
  • .td-6, .td-60{ width: 60%;}
  • .td-65{ width: 65%;}
  • .td-66{ width: 66.6%;} дві третини
  • .td-7, .td-70{ width: 70%;}
  • .td-75{ width: 75%;} три чверті
  • .td-8, .td-80{ width: 80%;}
  • .td-85{ width: 85%;}
  • .td-9, .td-90{ width: 90%;}
  • .td-0, .td-00, .td-100{ width: 100%;} 1 колонка 
	<div class="tr-10 center">
		<div class="td-1">
			<div class="bg-orange white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-orange white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>	
		<div class="td-1">
			<div class="bg-orange white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>		
		<div class="td-1">
			<div class="bg-orange white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>		
		<div class="td-1">
			<div class="bg-orange white">1</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>		
	</div>
1
1
1
1
1
1
1
1
1
1
	<div class="tr-10 center">
		<div class="td-11">
			<div class="bg-orange white">11</div>
		</div>
		<div class="td-11">
			<div class="bg-green white">11</div>
		</div>
		<div class="td-11">
			<div class="bg-orange white">11</div>
		</div>
		<div class="td-11">
			<div class="bg-green white">11</div>
		</div>	
		<div class="td-11">
			<div class="bg-orange white">11</div>
		</div>
		<div class="td-11">
			<div class="bg-green white">11</div>
		</div>		
		<div class="td-11">
			<div class="bg-orange white">11</div>
		</div>
		<div class="td-11">
			<div class="bg-green white">11</div>
		</div>		
		<div class="td-11">
			<div class="bg-orange white">11</div>
		</div>	
	</div>
11
11
11
11
11
11
11
11
11
	<div class="tr-10 center">
		<div class="td-12">
			<div class="bg-orange white">12</div>
		</div>
		<div class="td-12">
			<div class="bg-green white">12</div>
		</div>
		<div class="td-12">
			<div class="bg-orange white">12</div>
		</div>
		<div class="td-12">
			<div class="bg-green white">12</div>
		</div>	
		<div class="td-12">
			<div class="bg-orange white">12</div>
		</div>
		<div class="td-12">
			<div class="bg-green white">12</div>
		</div>		
		<div class="td-12">
			<div class="bg-orange white">12</div>
		</div>
		<div class="td-12">
			<div class="bg-green white">12</div>
		</div>
	</div>
12
12
12
12
12
12
12
12
	<div class="tr-10 center">
		<div class="td-14">
			<div class="bg-orange white">14</div>
		</div>
		<div class="td-14">
			<div class="bg-green white">14</div>
		</div>
		<div class="td-14">
			<div class="bg-orange white">14</div>
		</div>
		<div class="td-14">
			<div class="bg-green white">14</div>
		</div>	
		<div class="td-14">
			<div class="bg-orange white">14</div>
		</div>
		<div class="td-14">
			<div class="bg-green white">14</div>
		</div>		
		<div class="td-14">
			<div class="bg-orange white">14</div>
		</div>
	</div>
14
14
14
14
14
14
14
	<div class="tr-10 center">
		<div class="td-15">
			<div class="bg-orange white">15</div>
		</div>
		<div class="td-85">
			<div class="bg-green white">85</div>
		</div>
	</div>
15
85
	<div class="tr-10 center">
		<div class="td-16">
			<div class="bg-orange white">16</div>
		</div>
		<div class="td-16">
			<div class="bg-green white">16</div>
		</div>
		<div class="td-16">
			<div class="bg-orange white">16</div>
		</div>
		<div class="td-16">
			<div class="bg-green white">16</div>
		</div>	
		<div class="td-16">
			<div class="bg-orange white">16</div>
		</div>
		<div class="td-16">
			<div class="bg-green white">16</div>
		</div>
	</div>
16
16
16
16
16
16
	<div class="tr-10 center">
		<div class="td-2">
			<div class="bg-orange white">2</div>
		</div>
		<div class="td-2">
			<div class="bg-green white">2</div>
		</div>
		<div class="td-2">
			<div class="bg-orange white">2</div>
		</div>
		<div class="td-2">
			<div class="bg-green white">2</div>
		</div>	
		<div class="td-2">
			<div class="bg-orange white">2</div>
		</div>
	</div>
2
2
2
2
2
	<div class="tr-10 center">
		<div class="td-3">
			<div class="bg-orange white">3</div>
		</div>
		<div class="td-7">
			<div class="bg-green white">7</div>
		</div>
	</div>
3
7
	<div class="tr-10 center">
		<div class="td-33">
			<div class="bg-orange white">33</div>
		</div>
		<div class="td-33">
			<div class="bg-green white">33</div>
		</div>
		<div class="td-33">
			<div class="bg-orange white">33</div>
		</div>
	</div>
33
33
33
	<div class="tr-10 center">
		<div class="td-35">
			<div class="bg-orange white">35</div>
		</div>
		<div class="td-65">
			<div class="bg-green white">65</div>
		</div>
	</div>
35
65
	<div class="tr-10 center">
		<div class="td-4">
			<div class="bg-orange white">4</div>
		</div>
		<div class="td-6">
			<div class="bg-green white">6</div>
		</div>
	</div>
4
6
	<div class="tr-10 center">
		<div class="td-45">
			<div class="bg-orange white">45</div>
		</div>
		<div class="td-55">
			<div class="bg-green white">55</div>
		</div>
	</div>
45
55
	<div class="tr-10 center">
		<div class="td-5">
			<div class="bg-orange white">5</div>
		</div>
		<div class="td-5">
			<div class="bg-green white">5</div>
		</div>
	</div>
5
5
	<div class="tr-10 center">
		<div class="td-66">
			<div class="bg-orange white">66</div>
		</div>
		<div class="td-33">
			<div class="bg-green white">33</div>
		</div>
	</div>
66
33
	<div class="tr-10 center">
		<div class="td-8">
			<div class="bg-orange white">8</div>
		</div>
		<div class="td-2">
			<div class="bg-green white">2</div>
		</div>
	</div>
8
2
	<div class="tr-10 center">
		<div class="td-9">
			<div class="bg-orange white">9</div>
		</div>
		<div class="td-1">
			<div class="bg-green white">1</div>
		</div>
	</div>
9
1
	<div class="tr-10 center">
		<div class="td-0">
			<div class="bg-orange white">0</div>
		</div>
	</div>
0

3.2 Блоки (плашки однакової ширини і висоти)

Блоки оптимально використовувати у масивах даних, наприклад, анонси, фотогалереї. Цифра означає кількість блоків в одному рядку.

Відстань між блоками 1%, висота автоматична, тобто якщо один блок має умовно 200пх, другий 150пх, а всі решта по 100, то на екрані вони все одно будуть розміщені в рядку за висотою найвищого!

Можна використовувати не тільки стандартний "маркований список" (ul li), а й вкладені блоки.

  • .li2 (2 колонки; >776px: 2 колонки; >420px: 1 колонка)
  • .li3 (3 колонки; >776px: 2 колонки; >420px: 1 колонка)
  • .li4 (4 колонки; >776px: 2 колонки; >420px: 1 колонка)
  • .li5 (5 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .li6 (6 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .li7 (7 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .li8 (8 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .li9 (9 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .li10 (10 колонок; >776px: 2 колонки; >420px: 1 колонка)
ul.li5
	<ul class="li5">
		<li>
			Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
		</li>
		<li>
			Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. 
		</li>
		<li>
			"Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною.
		</li>
		<li>
			Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
		</li>	
		<li>
			На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер.
		</li>
		<li>
			Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. 
		</li>	
		<li>
			Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження.
		</li>
		<li>
			Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.
		</li>	
		<li>
			Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених.
		</li>
		<li>
			Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
		</li>		
		<li>
			Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. 
		</li>
		<li>
			Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст."
		</li>		
		<li>
			Це робить текст схожим на оповідний.
		</li>
		<li>
			Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані.
		</li>		
		<li>
			Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
		</li>
	</ul>
  • Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
  • Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів.
  • "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною.
  • Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
  • На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер.
  • Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело.
  • Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження.
  • Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.
  • Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених.
  • Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
  • Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки.
  • Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст."
  • Це робить текст схожим на оповідний.
  • Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані.
  • Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
.li7
	<div class="li7">
		<i>
			Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
		</i>
		<i>
			Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. 
		</i>
		<i>
			"Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною.
		</i>
		<i>
			Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
		</i>	
		<i>
			На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер.
		</i>
		<i>
			Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. 
		</i>		
		<i>
			Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження.
		</i>
		<i>
			Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.
		</i>		
		<i>
			Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених.
		</i>
		<i>
			Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
		</i>		
		<i>
			Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. 
		</i>
		<i>
			Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст."
		</i>		
		<i>
			Це робить текст схожим на оповідний.
		</i>
		<i>
			Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані.
		</i>			
		<b>
			Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
		</b>	
	</div>
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum. На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер. Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження. Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32. Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених. Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом. Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст." Це робить текст схожим на оповідний. Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані. Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
.li3plus

Якщо необхідно вставити між блоками горизонтальну рекламу на всю ширину шпальти, наприклад, від гугл-едвордс, то використовувати клас з суфіксом plus, що означає додаткове поле після n блоків

	<div class="li3plus">
		<div>
			Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
		</div>
		<div>
			Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. 
		</div>
		<div>
			"Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною.
		</div>
		<div>
			РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
		</div>	
		<div>
			На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер.
		</div>
		<div>
			Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. 
		</div>		
		<div>
			Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження.
		</div>
		<div>
			РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
		</div>		
		<div>
			Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених.
		</div>
		<div>
			Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
		</div>		
		<div>
			Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. 
		</div>
		<div>
			РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
		</div>		
		<div>
			Це робить текст схожим на оповідний.
		</div>
		<div>
			Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані.
		</div>			
		<div>
			Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
		</div>	
	</div>
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів.
"Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною.
РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер.
Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело.
Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження.
РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених.
Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки.
РЕКЛАМНИЙ БЛОК НА ВСЮ ШИРИНУ
Це робить текст схожим на оповідний.
Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані.
Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).

3.3 Колонки (columns)

Блоки оптимально використовувати у масивах даних, наприклад, анонси, фотогалереї. Цифра означає кількість блоків в одному рядку.

  • .columns2 (2 колонки; >776px: 1 колонка; >420px: 1 колонка)
  • .columns3 (3 колонки; >776px: 2 колонки; >420px: 1 колонка)
  • .columns4 (4 колонки; >776px: 2 колонки; >420px: 1 колонка)
  • .columns5 (5 колонок; >776px: 2 колонки; >420px: 1 колонка)
  • .columns6 (6 колонок; >776px: 3 колонки; >420px: 1 колонка)
  • .columns7 (7 колонок; >776px: 3 колонки; >420px: 1 колонка)
  • .columns8 (8 колонок; >776px: 4 колонки; >420px: 1 колонка)
  • .columns9 (9 колонок; >776px: 4 колонки; >420px: 2 колонки)
  • .columns10 (10 колонок; >776px: 4 колонки; >420px: 2 колонки)
columns3
	<div class="columns3">
		<p>
			Що таке Lorem Ipsum?
		</p>
		<p>
			Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
		</p>
		<p>
			Звідки він походить?
		</p>
		<p>
			На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер. Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження. Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.
		</p>	
		<p>
			Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених. Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.
		</p>
		<p>
			Чому ми ним користуємось?
		</p>		
		<p>
			Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст." Це робить текст схожим на оповідний. Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані. Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).
		</p>
		<p>
			Де собі взяти трохи?
		</p>	
		<p>
			Існує багато варіацій уривків з Lorem Ipsum, але більшість з них зазнала певних змін на кшталт жартівливих вставок або змішування слів, які навіть не виглядають правдоподібно. Якщо ви збираєтесь використовувати Lorem Ipsum, ви маєте упевнитись в тому, що всередині тексту не приховано нічого, що могло б викликати у читача конфуз. Більшість відомих генераторів Lorem Ipsum в Мережі генерують текст шляхом повторення наперед заданих послідовностей Lorem Ipsum. Принципова відмінність цього генератора робить його першим справжнім генератором Lorem Ipsum. Він використовує словник з більш як 200 слів латини та цілий набір моделей речень - це дозволяє генерувати Lorem Ipsum, який виглядає осмислено. Таким чином, згенерований Lorem Ipsum не міститиме повторів, жартів, нехарактерних для латини слів і т.ін.
		</p>	
	</div>

Що таке Lorem Ipsum?

Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.

Звідки він походить?

На відміну від поширеної думки Lorem Ipsum не є випадковим набором літер. Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Річард Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" ("Про межі добра і зла"), написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження. Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.

Класичний текст, використовуваний з XVI сторіччя, наведено нижче для всіх зацікавлених. Також точно за оригіналом наведено розділи 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum" разом із перекладом англійською, виконаним 1914 року Х.Рекемом.

Чому ми ним користуємось?

Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Тут іде текст." Це робить текст схожим на оповідний. Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані. Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).

Де собі взяти трохи?

Існує багато варіацій уривків з Lorem Ipsum, але більшість з них зазнала певних змін на кшталт жартівливих вставок або змішування слів, які навіть не виглядають правдоподібно. Якщо ви збираєтесь використовувати Lorem Ipsum, ви маєте упевнитись в тому, що всередині тексту не приховано нічого, що могло б викликати у читача конфуз. Більшість відомих генераторів Lorem Ipsum в Мережі генерують текст шляхом повторення наперед заданих послідовностей Lorem Ipsum. Принципова відмінність цього генератора робить його першим справжнім генератором Lorem Ipsum. Він використовує словник з більш як 200 слів латини та цілий набір моделей речень - це дозволяє генерувати Lorem Ipsum, який виглядає осмислено. Таким чином, згенерований Lorem Ipsum не міститиме повторів, жартів, нехарактерних для латини слів і т.ін.

4. Іконки

Мінімальний набір шрифтових іконок, для відображення можна використовувати клас (.icon-*), назву шрифта (клас .mini або синонім .font-mini) великі літери від A до Q або ж код (у псевдоелементі after чи before). Назва шрифта “mini”, тому що мінімальний набір іконок.

  • .icon-home:before{content:'\0041'} A
  • .icon-mail:before{content:'\0042'} B
  • .icon-phone:before{content:'\0043'} C
  • .icon-search:before{content:'\0044'} D
  • .icon-good:before{content:'\0045'} E
  • .icon-basket:before{content:'\0046'} F
  • .icon-sitemap:before{content:'\0047'} G
  • .icon-menu:before{content:'\0048'} H
  • .icon-checked:before{content:'\0049'} I
  • .icon-bad:before{content:'\004a'} J
  • .icon-facebook:before{content:'\004b'} K
  • .icon-skype:before{content:'\004c'} L
  • .icon-pinterest:before{content:'\004d'} M (помилка: це іконка Інстаграму)
  • .icon-twitter:before{content:'\004e'} N
  • .icon-youtube:before{content:'\004f'} O
  • .icon-vkontakte:before{content:'\0050'} P
  • .icon-google:before{content:'\0051'} Q

4.1 Іконки класом

<p class="h1">
	<i class="icon-home green big"></i> 
	<i class="icon-mail small"></i> 
	<i class="icon-phone"></i> 
	<i class="icon-search"></i> 
	<i class="icon-good"></i> 
	<i class="icon-basket"></i> 
	<i class="icon-sitemap"></i> 
	<i class="icon-menu"></i> 
	<i class="icon-checked"></i> 
	<i class="icon-bad"></i> 
	<i class="icon-facebook"></i> 
	<i class="icon-skype"></i> 
	<i class="icon-pinterest"></i> 
	<i class="icon-twitter"></i> 
	<i class="icon-youtube"></i> 
	<i class="icon-vkontakte"></i> 
	<i class="icon-google"></i>
</p>

4.2 Іконки літерою

	
<p class="h1">
	<span class="mini green big">A</span>
	<span class="mini small">B</span>
	<span class="mini white bg-red"> C </span>
	<span class="mini">D</span>
	<span class="mini">E</span>
	<span class="mini">F</span>
	<span class="mini">G</span>
	<span class="mini">H</span>
	<span class="mini">I</span>
	<span class="mini">J</span>
	<span class="mini">K</span>
	<span class="mini">L</span>
	<span class="mini">M</span>
	<span class="mini">N</span>
	<span class="mini">O</span>
	<span class="mini">P</span>
	<span class="mini">Q</span>
</p>

A B  C  D E F G H I J K L M N O P Q 

	
<style>
	.phone:before{ content:'\0043'; font-family:mini; padding-right: 5px; font-size: 1.1em; position: relative; top: 5px;}
</style>
<p class="phone h1">+38 067 123-45-67</p>

+38 067 123-45-67

5. Меню

Кілька варіантів стандартного горизонтального меню.

На малому екрані усі пункти меню будуть зліва.

5.1 Меню в центрі

<div class="nav-center">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

5.2 Меню зліва

<div class="nav-left">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

5.3 Меню справа

<div class="nav-right">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

5.4 "Гумове" меню, на всю ширину

<div class="nav">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

5.5 Яскраве меню

<div class="menu">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

5.6 Меню зі сепаратором (вертикальною рискою між пунктами)

<div class="menu-separator">
	<ul>
		<li><a href="#" class="current">перший</a></li>
		<li><a href="#">другий</a></li>
		<li><a href="#">третій</a></li>
		<li><a href="#">четвертий</a></li>
		<li><a href="#">останній</a></li>
	</ul>
</div>

6. Стандартні кольори

6.1 Колір тексту

  • .red{ color: #f33;}
  • .blue{ color: #3366ff;}
  • .green{ color: #339933;}
  • .yellow{ color: #ff3;}
  • .white{ color: #fff;}
  • .black{ color: #000;}
  • .orange{ color: #ff6600;}
  • .gray{ color: #eee;}
  • .brown{ color: #72250b;}
	<p class="red">.red</p>
	<p class="blue">.blue</p>
	<p class="green">.green</p>
	<p class="yellow">.yellow</p>
	<p class="white">.white</p>
	<p class="black">.black</p>
	<p class="orange">.orange</p>
	<p class="gray">.gray</p>
	<p class="brown">.brown</p>

.red

.blue

.green

.yellow

.white

.black

.orange

.gray

.brown

6.2 Колір фону

  • .bg-red{ background: #f33;}
  • .bg-blue{ background: #3366ff;}
  • .bg-green{ background: #339933;}
  • .bg-yellow{ background: #ff3;}
  • .bg-white{ background: #fff;}
  • .bg-black{ background: #000;}
  • .bg-orange{ background: #ff6600;}
  • .bg-gray{ background: #eee;}
  • .bg-brown{ background: #72250b;}
	<p class="bg-red">.red</p>
	<p class="bg-green">.green</p>
	<p class="bg-blue">.blue</p>	
	<p class="bg-yellow">.yellow</p>
	<p class="bg-black">.black</p>
	<p class="bg-gray">.gray</p>
	<p class="bg-white">.white</p>
	<p class="bg-orange">.orange</p>
	<p class="bg-brown">.brown</p>

.red

.green

.blue

.yellow

.black

.gray

.white

.orange

.brown

7. Кнопки, поля, форми

	<input type="text" /> <input type="submit" class="btn" value="- відправити -" /> <button class="btn">- відправити -</button>

	
	<input type="submit" class="btn" /> 
	<input type="submit" class="btn bg-red" /> 
	<input type="submit" class="btn bg-green" /> 
	<input type="submit" class="btn bg-white" /> 
	<input type="submit" class="btn bg-yellow" /> 
	<input type="submit" class="btn bg-black" /> 
	<input type="submit" class="btn bg-orange" /> 
	<input type="submit" class="btn bg-gray" /> 
	<input type="submit" class="btn bg-brown" />	

	<input type="submit" class="btn small" />

	<input type="submit" class="btn big" />

	<textarea>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</textarea>

	<input type="file" class="btn" />

Без стилізації (у планах):

8. Таблиця

За замовчуванням таблиця має 100% ширину і склеєні лінії у вічок.

Для того, щоб таблиця не ламала верстку на малих екранах, рекомендовано обгортати класом .scroll

Виняток: додаткових класів (.table, .tr, .th, .td) немає.

У планах додати такі класи, доробити "шашкову розмітку" додати JavaScript-плагін для оптимізації таблиць на малих екранах.

8.1 Звичайна таблиця

	<div class="scroll">
		<table>
			<tr>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
			<tr>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
			<tr>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
		</table>
	</div>
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.

8.2 “Шашкова розмітка”

	<div class="scroll">
		<table class="even">
			<tr>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<th>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
			<tr>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
			<tr>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
				<td>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.</th>
			</tr>
		</table>
	</div>
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.
Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні.

8.3 Таблиця з границями

<div class="scroll">
	<table class="border">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
	</table>
</div>
1 2 3
4 5 6
7 8 9

9. TODO (Заплановано)

Таблиці. Стилізація радіо-кнопок, селектів, інших елементів форми. Класи та стилі для решти тегів.

10. Підключити / завантажити

Підключити стилі (1)обнулення, (2)основні, (3)сітку, блоки та колонки: <link rel="stylesheet" href="http://css.levus.info/css/levus-2.7.css" />

Підключити стилі (4)іконок

Підключити стилі (5)меню: <link rel="stylesheet" href="http://css.levus.info/css/menu-2.3.css" />

Підключити стилі (6)кольорів: <link rel="stylesheet" href="http://css.levus.info/css/colors-2.3.css" />

Підключити стилі (7)кнопок: <link rel="stylesheet" href="http://css.levus.info/css/forms-2.3.css" />

Підключити стилі (8)таблиці: <link rel="stylesheet" href="http://css.levus.info/css/table-2.3.css" />

11. Залишити коментар

Вітається конструктивна критика, зауваження і поради.

▲