library to sexy (wip)

TODO

 ☐ Сделать: Текстовые поля: группа (в т.ч. с кнопками)
+☐ Добавить заглушки пустых картинок и тестировать! http://bitsofco.de/styling-broken-images/
 ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
 ☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом

src/blocks/blocks-library/blocks-library.html

 <!--DEV
 
-Нужно убрать пробел между @-ами:
+<section class="blocks-library__item" data-name="Пояснение сбоку">
 
-@ @include('blocks/blocks-library/blocks-library.html')
+  <h2 class="blocks-library__title" id="">Заголовок</h2>
+
+  Контентю
+
+</section>
 
 -->
-<div class="blocks-library">content</div>

src/blocks/dl-horizontal/dl-horizontal.html

+<!--DEV
+
+<dl class="dl-horizontal">
+  <dt>Ассоциативный список</dt>
+  <dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
+  <dt>Второй термин</dt>
+  <dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
+  <dd>Второе определение подряд.</dd>
+  <dt>Конституционально-эзотерический концептуализм</dt>
+  <dd>Некое определение.</dd>
+</dl>
+
+-->

src/blocks/dl-horizontal/dl-horizontal.less

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.dl-horizontal {
+  @media (min-width: @screen-md) {
+    & > dt {
+      width: 19rem;
+      float: left;
+      margin: 0;
+      word-wrap: break-word;
+      text-align: right;
+      clear: both;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & > dd {
+      margin-left: 20.5rem;
+    }
+  }
+}

src/blocks_library.html

@@ -19,10 +19,10 @@
 
 
 
-  <section class="blocks-library__item" data-name="Текст">
-
   <h2 class="blocks-library__title" id="typo">Текст, теги</h2>
 
+  <div class="blocks-library__item" id="text" data-name="Текст">
+
      <p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
      <h1>Заголовок 1</h1>
@@ -76,8 +76,10 @@
      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
      <hr>
      <p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
-    <div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
+     <div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
+  </div>
 
+  <div class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
     <div class="row">
       <div class="col-md-6">
         <table>
@@ -141,34 +143,61 @@
             <td><code>&lt;sub&gt;</code></td>
             <td>H<sub>2</sub>O</td>
           </tr>
+          <tr>
+            <td><code>&lt;code&gt;</code></td>
+            <td><code>code</code></td>
+          </tr>
         </table>
       </div>
     </div>
+  </div>
 
+  <div class="blocks-library__item" id="address" data-name="address">
     <address>
-      <strong>Имя Фамилия</strong> (тег <code>address</code>)
+      <strong>Имя Фамилия</strong>
       <br>
       г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
-      <a href="mailto:mail@mail.com">mail@mail.com</a>
+      <a href="mailto:imya@mail.com">imya@mail.com</a>
     </address>
+  </div>
+
+  <div class="blocks-library__item" id="blockquote" data-name="blockquote">
+    <blockquote>
+      <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
+    </blockquote>
     <blockquote>
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
       <footer>Emmet</footer>
     </blockquote>
-    <p>Строчный код: <code>&lt;section&gt;</code></p>
-    <pre>// Блочный код<br>// Вторая строка</pre>
-
-  </section>
+    <blockquote>
+      <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
+      <footer><cite>Emmet</cite></footer>
+    </blockquote>
+  </div>
 
+  <div class="blocks-library__item" id="pre" data-name="pre">
+    <pre>// Блочный код<br>// Вторая строка</pre>
+    <pre>
+// Блочный код
+// Вторая строка</pre>
+  </div>
 
+  <h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
 
-  <section class="blocks-library__item" data-name="Текст: дополнения">
+  <div class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
+    <dl class="dl-horizontal">
+      <dt>Ассоциативный список</dt>
+      <dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
+      <dt>Второй термин</dt>
+      <dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
+      <dd>Второе определение подряд.</dd>
+      <dt>Конституционально-эзотерический концептуализм</dt>
+      <dd>Некое определение.</dd>
+    </dl>
+  </div>
 
-    <h2 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h2>
 
-    <p>TODO: гор. списки определений, правая цитата, акцентный текст, второстепенный текст.</p>
 
-  </section>
 
 
 

src/less/global-scaffolding.less

@@ -265,7 +265,7 @@ pre {
   width: 100%;
   margin-top:    @line-height;
   margin-bottom: @line-height;
-  overflow-x: scroll;
+  overflow-x: auto;
   background-color: @gray-lighter;
   padding: .5em;
   border-radius: @border-radius;

src/less/style.less

@@ -6,6 +6,7 @@
 @import "./src/less/global-grid.less";
 @import "./src/less/global-forms.less";
 
+@import "./src/blocks/dl-horizontal/dl-horizontal.less";
 @import "./src/blocks/blocks-library/blocks-library.less";
 @import "./src/blocks/btn/btn.less";
 @import "./src/blocks/table-responsive/table-responsive.less";