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/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";