Skip to content

K
kpp
Commit 9104ecf1 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

description fix

parent 3f8f91c9
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 166 deletions
src/_blocks_library.html
View file @ 9104ecf1
...@@ -13,138 +13,139 @@ ...@@ -13,138 +13,139 @@
<section class="container blocks-library"> <section class="container blocks-library">
<h1>Библиотека блоков <a href="/">проекта</a></h1> <h1>Библиотека блоков <a href="/">проекта</a></h1>
<p>Расположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.</p> <p>Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки показаны без стилизации, значит они не используются и импорт их стилей отключен в файле диспетчера подключений.</p>
<p><strong>Проектные блоки</strong> — те, что cозданы специально для этого проекта (по умолчанию отсутствуют).</p>
<p><strong>Исходные блоки</strong> — те, что есть в стартовом наборе блоков проекта (могут быть отключены).</p>
<section> <section class="blocks-library__item">
<h2>Исходное: Типографика +</h2> <h2 class="blocks-library__title" id="typo">Типографика, код</h2>
<section> <p>Стилизация: теги (см. глобальные стили)</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1</h1> <h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2</h2> <h2>Заголовок 2</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h3>Заголовок 3</h4> <h3>Заголовок 3</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h4>Заголовок 4</h4> <h4>Заголовок 4</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h5>Заголовок 5</h5> <h5>Заголовок 5</h5>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6> <h6>Заголовок 6</h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<ul> <ul>
<li>Пункт 1 <li>Пункт 1
<ul> <ul>
<li>Подпункт 1</li> <li>Подпункт 1</li>
<li>Подпункт 2</li> <li>Подпункт 2</li>
</ul> </ul>
</li> </li>
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ul> </ul>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<ol> <ol>
<li>Пункт 1 <li>Пункт 1
<ol> <ol>
<li>Подпункт 1</li> <li>Подпункт 1</li>
<li>Подпункт 2</li> <li>Подпункт 2</li>
</ol> </ol>
</li> </li>
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ol> </ol>
</div>
</div> </div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, многострочное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="col-md-6">
<p><img src="img/TEMP_DavidBlaine.jpg" alt=""></p>
<table>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s&gt;</code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td>
</tr>
</table>
<address>
тег address
</address>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<p>Строчный код: <code>&lt;section&gt;</code></p>
<pre>// Блочный код<br>// Вторая строка</pre>
</div> </div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, многострочное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div> </div>
</section> <div class="col-md-6">
<hr> <p><img src="img/TEMP_DavidBlaine.jpg" alt=""></p>
<table>
<tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка, внешний вид</a></td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s&gt;</code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td>
</tr>
</table>
<address>
тег address
</address>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<p>Строчный код: <code>&lt;section&gt;</code></p>
<pre>// Блочный код<br>// Вторая строка</pre>
</div>
</div>
</section> </section>
<section> <section class="blocks-library__item">
<h2>Исходное: Таблицы</h2> <h2 class="blocks-library__title" id="tables">Таблицы</h2>
<p>Стилизация: теги (см. глобальные стили)</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<table> <table>
...@@ -179,36 +180,37 @@ ...@@ -179,36 +180,37 @@
</table> </table>
</div> </div>
</div> </div>
<hr> <section class="blocks-library__item">
<h3 id="tables-responsive">Адаптивные таблицы</h3>
<p>Стилизация: БЭМ-блок <code>.table-responsive</code></p>
<p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается индивидуально).</p>
<p class="alert alert--success">Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
<table class="table-responsive">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкоё примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
</tr>
</tbody>
</table>
</section>
</section> </section>
<section>
<h2>Исходное: Адаптивные таблицы</h2>
<p>Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается для каждой таблицы индивидуально).</p>
<table class="table-responsive">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкоё примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
</tr>
</tbody>
</table>
<p>Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
<hr>
</section>
<section>
<h2>Исходное: Формы по умолчанию</h2> <section class="blocks-library__item">
<h2 id="form">Формы по умолчанию</h2>
<p>Стилизация: теги (см. глобальные стили)</p>
<form action=""> <form action="">
<fieldset> <fieldset>
<legend>Это <code>legend</code> <code>fieldset</code>-а</legend> <legend>Это <code>legend</code> <code>fieldset</code>-а</legend>
...@@ -265,11 +267,12 @@ ...@@ -265,11 +267,12 @@
<input type="file"> <input type="file">
</fieldset> </fieldset>
</form> </form>
<hr>
</section> </section>
<section> <section class="blocks-library__item">
<h2 id="btn">Исходное: кнопки</h2> <h2 id="btn">Кнопки</h2>
<p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
<p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>.</p>
<p> <p>
<!-- <input type="text" value="Текстово поле" style="width:80px"> --> <!-- <input type="text" value="Текстово поле" style="width:80px"> -->
<a href="" class="btn">Cсылка</a> <a href="" class="btn">Cсылка</a>
...@@ -285,15 +288,12 @@ ...@@ -285,15 +288,12 @@
<input type="submit" class="btn btn--danger" value="Input"> <input type="submit" class="btn btn--danger" value="Input">
<button class="btn btn--danger">Button</button> <button class="btn btn--danger">Button</button>
</p> </p>
<p>Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>.</p>
<hr>
</section> </section>
<section> <section class="blocks-library__item">
<h2>Исходное: Модульная сетка на flexbox</h2> <h2 id="grid">Модульная сетка на flexbox</h2>
<p>Сетка вдохновлена сеткой bootstrap 4.</p> <p>Стилизация: БЭМ-блоки <code>.row</code>, <code>.col-[ID]-[COL]</code>, <code>.col-[ID]-offset-[COL]</code></p>
<p>Классы <code>.container</code>, <code>.row</code>, <code>.col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]</code>. См. глобальную сетку и примеси.</p> <p>Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.</p>
<p><code>.col-[xxl]-[1 - @grid-columns]</code> по умолчанию отсутствуют (закомментированы).</p>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;"> <div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
...@@ -328,8 +328,8 @@ ...@@ -328,8 +328,8 @@
</div> </div>
</div> </div>
</div> </div>
<h3>LESS-примеси</h3> <h3 id="grid-mixins">LESS-примеси</h3>
<p>Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p> <p class="alert alert--success">Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<pre> <pre>
...@@ -362,7 +362,6 @@ ...@@ -362,7 +362,6 @@
</pre> </pre>
</div> </div>
</div> </div>
<hr>
</section> </section>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment