description fix

src/_blocks_library.html

@@ -13,16 +13,14 @@
 
 <section class="container  blocks-library">
   <h1>Библиотека блоков <a href="/">проекта</a></h1>
-  <p>Расположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.</p>
-  <p><strong>Проектные блоки</strong> — те, что cозданы специально для этого проекта (по умолчанию отсутствуют).</p>
-  <p><strong>Исходные блоки</strong> — те, что есть в стартовом наборе блоков проекта (могут быть отключены).</p>
+  <p>Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки показаны без стилизации, значит они не используются и импорт их стилей отключен в файле диспетчера подключений.</p>
 
-  <section>
-    <h2>Исходное: Типографика +</h2>
-    <section>
+  <section class="blocks-library__item">
+    <h2 class="blocks-library__title" id="typo">Типографика, код</h2>
+    <p>Стилизация: теги (см. глобальные стили)</p>
     <div class="row">
       <div class="col-md-6">
-          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
+        <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
         <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
         <h1>Заголовок 1</h1>
         <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
@@ -75,6 +73,10 @@
       <div class="col-md-6">
         <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>
@@ -140,11 +142,10 @@
       </div>
     </div>
   </section>
-    <hr>
-  </section>
 
-  <section>
-    <h2>Исходное: Таблицы</h2>
+  <section class="blocks-library__item">
+    <h2 class="blocks-library__title" id="tables">Таблицы</h2>
+    <p>Стилизация: теги (см. глобальные стили)</p>
     <div class="row">
       <div class="col-md-6">
         <table>
@@ -179,12 +180,11 @@
         </table>
       </div>
     </div>
-    <hr>
-  </section>
-
-  <section>
-    <h2>Исходное: Адаптивные таблицы</h2>
-    <p>Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается для каждой таблицы индивидуально).</p>
+    <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>
@@ -203,12 +203,14 @@
           </tr>
         </tbody>
       </table>
-    <p>Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
-    <hr>
     </section>
+  </section>
+
+
 
-  <section>
-    <h2>Исходное: Формы по умолчанию</h2>
+  <section class="blocks-library__item">
+    <h2 id="form">Формы по умолчанию</h2>
+    <p>Стилизация: теги (см. глобальные стили)</p>
     <form action="">
       <fieldset>
         <legend>Это <code>legend</code> <code>fieldset</code>-а</legend>
@@ -265,11 +267,12 @@
         <input type="file">
       </fieldset>
     </form>
-    <hr>
   </section>
 
-  <section>
-    <h2 id="btn">Исходное: кнопки</h2>
+  <section class="blocks-library__item">
+    <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>
       <!-- <input type="text" value="Текстово поле" style="width:80px"> -->
       <a href="" class="btn">Cсылка</a>
@@ -285,15 +288,12 @@
       <input type="submit" class="btn  btn--danger" value="Input">
       <button class="btn  btn--danger">Button</button>
     </p>
-    <p>Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>.</p>
-    <hr>
   </section>
 
-  <section>
-    <h2>Исходное: Модульная сетка на flexbox</h2>
-    <p>Сетка вдохновлена сеткой bootstrap 4.</p>
-    <p>Классы <code>.container</code>, <code>.row</code>, <code>.col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]</code>. См. глобальную сетку и примеси.</p>
-    <p><code>.col-[xxl]-[1 - @grid-columns]</code> по умолчанию отсутствуют (закомментированы).</p>
+  <section class="blocks-library__item">
+    <h2 id="grid">Модульная сетка на flexbox</h2>
+    <p>Стилизация: БЭМ-блоки <code>.row</code>, <code>.col-[ID]-[COL]</code>, <code>.col-[ID]-offset-[COL]</code></p>
+    <p>Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.</p>
     <div class="row">
       <div class="col-xs-12  col-sm-6  col-md-4  col-lg-3">
         <div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
@@ -328,8 +328,8 @@
         </div>
       </div>
     </div>
-    <h3>LESS-примеси</h3>
-    <p>Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p>
+    <h3 id="grid-mixins">LESS-примеси</h3>
+    <p class="alert  alert--success">Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p>
     <div class="row">
       <div class="col-lg-6">
 <pre>
@@ -362,7 +362,6 @@
 </pre>
       </div>
     </div>
-    <hr>
   </section>
 </section>