library fixs

src/blocks/list-nums/list-nums.less

@@ -33,7 +33,7 @@
       font-size: 70%;
       width: 1.9em;
       height: 1.9em;
-      line-height: 2.1em;
+      line-height: 2em;
       color: #fff;
       background-color: @gray-light;
       border-radius: 50%;

src/blocks_library.html

@@ -362,36 +362,35 @@
 
 
 
-  <section class="alert  alert--danger" id="text-sizes">
+  <section class="alert  alert--danger" id="text-helpers">
     <h2>Текстовые хелперы</h2>
     <p>Классов, вроде <code>.test-accent</code> (увеличенный текст), <code>.test-secondary</code> (уменьшенный текст), <code>.test-muted</code> («приглушенный» текст), <code>.align-center</code> (выравнивание текста по центру), <code>.bg-primary</code> (заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.</p>
   </section>
 
 
 
-  <hr>
-
-
-
+  <h2 class="blocks-library__title" id="img">Изображения</h2>
 
 
 
-  <p>
-    <img src="img/TEMP-DavidBlaine.jpg" height="331" width="382" alt="">
+  <section class="blocks-library__item" id="thumb" data-name=".thumb">
+    Без ссылок:
     <img class="thumb" src="img/TEMP-DavidBlaine.jpg" height="331" width="382" alt="">
-    <br>
-    <img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
+    <img class="thumb" src="img/TEMP-DavidBlaine.jpg" height="331" width="382" alt="">
+    <hr>
+    Ссылками:
+    <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
+    <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
     <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
-  </p>
+  </section>
 
 
 
+  <h2 class="blocks-library__title" id="table">Таблицы</h2>
 
-  <section class="blocks-library__item">
 
-    <h2 class="blocks-library__title" id="tables">Таблицы</h2>
-    <p>Стилизация: теги (см. глобальные стили)</p>
 
+  <section class="blocks-library__item" id="table" data-name="Таблицы">
     <div class="row">
       <div class="col-md-6">
         <table>
@@ -427,21 +426,48 @@
       </div>
     </div>
 
-    <section class="blocks-library__item">
-
-      <h3 id="tables-responsive">Адаптивные таблицы</h3>
-
+    <div class="blocks-library__sub-item">
+      <b class="blocks-library__sub-item-title">Адаптивные таблицы</b>
       <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>
 
-      @@include('blocks/table-responsive/table-responsive.html')
+      <style>
+        .blocks-library__table-responsive tbody td:before,
+        .blocks-library__table-responsive tbody th:before {
+          width: 180px;
+          max-width: 180px;
+        }
+      </style>
 
-    </section>
+      <table class="table-responsive  blocks-library__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>
+
+    </div>
   </section>
 
 
 
+  <hr>
+
+
+
   <section class="blocks-library__item">
 
     <h2 id="form">Формы по умолчанию</h2>