css-фреймворк для максимально швидкої і простої верстки сторінок сайту.
Формально -- обов’язковими є тільки 1, 2 і 3.
Основний принцип, який використано при створенні фреймворка — принцип очевидності та коротких називних імен! Себто назви класів повинні мати очевидні зрозумілі назви, які пояснюватимуть, що це за клас.
Майже кожен тег має додатковий (альтернативний) клас, наприклад, семантично півжирний/півжирний (<strong>/<b>) мають синоніми у вигляді класів .strong і відповідно .b.
У назвах класів використовується дефіс! Тому у власних стилях рекомендовано використовувати нижнє підкреслення, CamelCase або великі літери щоб не виник конфлікт стилів.
Комусь подобається нормалізація, себто прописання стилів для кожного тегу. А тут зроблено у два кроки: крок 1 — скидання усіх параметрів так, як це запропонував Eric Meyer, плюс вертикальне вирівнювання зображень по нижньому краю (щоб прибрати зайвий відступ унизу); і крок 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>
Зображення (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>
<ol> <li>Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. </li> <li>Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, <ol> <li>коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. </li> <li>"Риба" не тільки успішно пережила п'ять століть, <ol> <li>але й прижилася в електронному верстуванні, </li> <li>залишаючись по суті незмінною. </li> </ol> </li> </ol> </li> </ol>
.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> ←</li> <li> Category</li> <li> ←</li> <li><strong><Page</strong>< </li> </ul>
<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>
Люблю метричну систему, тому сітка 10-колонкова, а не традиційна 12-и. Оскільки сітка фактично є переробленою класичною таблицею і принцип відображення інформації в ній є типово табличний, тому і назви відповідні.
Основна обгортка, яка не є обов’язковою, але рекомендованою, має назву .tbl (таблиця).
Рядок має префікс .tr- і на даний час буває двох типів: .tr-0 (вічка без відступів) і .tr-10 (є 10-піксельний відступ між вічками).
Колонки (вічка), як правило мають синоніми:
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="tr-10 center"> <div class="td-0"> <div class="bg-orange white">0</div> </div> </div>
Блоки оптимально використовувати у масивах даних, наприклад, анонси, фотогалереї. Цифра означає кількість блоків в одному рядку.
Відстань між блоками 1%, висота автоматична, тобто якщо один блок має умовно 200пх, другий 150пх, а всі решта по 100, то на екрані вони все одно будуть розміщені в рядку за висотою найвищого!
Можна використовувати не тільки стандартний "маркований список" (ul li), а й вкладені блоки.
<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>
<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>
Якщо необхідно вставити між блоками горизонтальну рекламу на всю ширину шпальти, наприклад, від гугл-едвордс, то використовувати клас з суфіксом 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>
Блоки оптимально використовувати у масивах даних, наприклад, анонси, фотогалереї. Цифра означає кількість блоків в одному рядку.
<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 не міститиме повторів, жартів, нехарактерних для латини слів і т.ін.
Мінімальний набір шрифтових іконок, для відображення можна використовувати клас (.icon-*), назву шрифта (клас .mini або синонім .font-mini) великі літери від A до Q або ж код (у псевдоелементі after чи before). Назва шрифта “mini”, тому що мінімальний набір іконок.
<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>
<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
Кілька варіантів стандартного горизонтального меню.
На малому екрані усі пункти меню будуть зліва.
<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>
<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>
<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>
<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>
<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>
<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>
<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
<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
<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" />
Без стилізації (у планах):
За замовчуванням таблиця має 100% ширину і склеєні лінії у вічок.
Для того, щоб таблиця не ламала верстку на малих екранах, рекомендовано обгортати класом .scroll
Виняток: додаткових класів (.table, .tr, .th, .td) немає.
У планах додати такі класи, доробити "шашкову розмітку" додати JavaScript-плагін для оптимізації таблиць на малих екранах.
<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 - це текст-"риба", що використовується в друкарстві та дизайні. |
<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 - це текст-"риба", що використовується в друкарстві та дизайні. |
<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 |
Таблиці. Стилізація радіо-кнопок, селектів, інших елементів форми. Класи та стилі для решти тегів.
Підключити стилі (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" />
Вітається конструктивна критика, зауваження і поради.