responsive fixs

src/blocks/blockquote-right/blockquote-right.less

@@ -5,6 +5,13 @@
 .blockquote-right {
   text-align: right;
   border-left: 0;
-  padding: 0 1.8em 0 0;
-  border-right: 5px solid @border-color;
+  padding: 0 0.5em 0 0;
+  border-right: 1px solid @border-color;
+
+  @media (min-width: @screen-sm) {
+    padding: 0 1.8em 0 0;
+    margin-left: 0;
+    border-right-width: 5px;
+    border-left: 0;
+  }
 }

src/blocks/blocks-library/blocks-library.less

@@ -5,27 +5,36 @@
 .blocks-library {
   &__item {
     position: relative;
-    padding: 1.5rem 2rem 1.5rem 5rem;
+    padding: 1rem;
     border: 2px dashed @gray-lighter;
     margin-bottom: 2rem;
-    min-height: 18rem;
+
+    @media (min-width: @screen-md) {
+      padding: 1.5rem 2rem 1.5rem 5rem;
+      min-height: 18rem;
+    }
 
     &:before {
       content: attr(data-name);
       position: absolute;
+      top: -1em;
+      left: 0;
+      font-weight: 700;
       text-transform: lowercase;
-      left: 2.5rem;
-      top: 14rem;
-      color: @gray;
-      display: block;
       font-size: 1.7rem;
       line-height: 2rem;
       height: 2rem;
       text-align: right;
       white-space: nowrap;
-      width: 15rem;
-      transform: rotate(-90deg);
-      transform-origin: 0 100%;
+      color: @gray-light;
+
+      @media (min-width: @screen-md) {
+        left: 2.5rem;
+        top: 14rem;
+        width: 15rem;
+        transform: rotate(-90deg);
+        transform-origin: 0 100%;
+      }
     }
   }
 

src/blocks/dropdown/dropdown.js

@@ -32,7 +32,6 @@
   }
 
   function clearMenus(e) {
-    console.log('e: ' + e);
     if (e && e.which === 3) return
     $(backdrop).remove()
     $(toggle).each(function () {
@@ -101,8 +100,6 @@
   Dropdown.prototype.keydown = function (e) {
     if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
 
-    console.log(e.which);
-
     var $this = $(this)
 
     e.preventDefault()
@@ -133,7 +130,6 @@
     if (!~index)                                    index = 0
 
     $items.eq(index).trigger('focus')
-    console.log($items.eq(index));
   }
 
 

src/blocks/dropdown/dropdown.less

@@ -11,6 +11,7 @@
       z-index: @z-index-dropdown;
       visibility: visible;
       opacity: 1;
+      width: auto;
     }
   }
 
@@ -29,6 +30,8 @@
   // }
 
   &__menu {
+    max-width: 90vw;
+    width: 1px;
     position: absolute;
     top: 100%;
     left: 0;
@@ -59,16 +62,15 @@
 
     ul& {
       min-width: 16rem;
-      // max-width: 30rem;
       list-style: none;
       padding: .3em 0;
 
       > li > a {
         display: block;
         white-space: nowrap;
-        // width: 100%;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
         padding: .3em 1em;
         color: @text-color;
         text-decoration: none;

src/blocks/step-list/step-list.less

@@ -9,26 +9,44 @@
 
   &__item {
     position: relative;
-    margin-left: 5rem;
-    padding-left: 1.2rem;
-    border-left: 1px solid @border-color;
+
+    @media (min-width: @screen-sm) {
+      margin-left: 5rem;
+      padding-left: 1.2rem;
+      border-left: 1px solid @border-color;
+
+      // На ширинах больше SM показываем цифру сбоку от элемента
+      &:before {
+        content: counter(step-list) '.';
+        counter-increment: step-list;
+        position: absolute;
+        top: 0;
+        left: -5rem;
+        font-size: @font-size--h1;
+        width: 1.2em;
+        height: 1em;
+        line-height: 1em;
+        color: @gray-light;
+        text-align: right;
+      }
+    }
 
     &:not(:last-child) {
       margin-bottom: 1.5rem;
     }
 
-    &:before {
-      content: counter(step-list) '.';
-      counter-increment: step-list;
-      position: absolute;
-      top: 0;
-      left: -5rem;
-      font-size: @font-size--h1;
-      width: 1.2em;
-      height: @line-height;
-      line-height: @line-height;
-      color: @gray-light;
-      text-align: right;
+    // На узких ширинах показываем цифру в заголовке
+    & .step-list__title {
+      &:before {
+        content: counter(step-list) '. ';
+        counter-increment: step-list;
+        color: @gray-light;
+
+        // На ширинах больше SM скроем
+        @media (min-width: @screen-sm) {
+          display: none;
+        }
+      }
     }
 
     &--main {
@@ -53,8 +71,8 @@
   &__title {
     font-size: @font-size--h1;
     font-weight: 400;
-    line-height: @line-height;
-    padding: 0 0 .7rem;
+    line-height: 1em;
+    padding: 0 0 1rem;
     margin: 0 0 1.5rem;
     border-bottom: 2px solid @border-color;
   }

src/blocks_library.html

@@ -21,6 +21,8 @@
 
   <h2 class="blocks-library__title" id="typo">Текст, теги</h2>
 
+
+
   <section class="blocks-library__item" id="text" data-name="Текст">
 
      <p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
@@ -79,9 +81,11 @@
      <div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
   </section>
 
+
+
   <section class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-lg-6">
         <table>
           <tr>
             <td><code>&lt;a&gt;</code></td>
@@ -117,7 +121,7 @@
           </tr>
         </table>
       </div>
-      <div class="col-md-6">
+      <div class="col-lg-6">
         <table>
           <tr>
             <td><code>&lt;mark&gt;</code></td>
@@ -152,6 +156,8 @@
     </div>
   </section>
 
+
+
   <section class="blocks-library__item" id="address" data-name="address">
     <address>
       <strong>Имя Фамилия</strong>
@@ -161,6 +167,8 @@
     </address>
   </section>
 
+
+
   <section class="blocks-library__item" id="blockquote" data-name="blockquote">
     <blockquote>
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
@@ -175,6 +183,8 @@
     </blockquote>
   </section>
 
+
+
   <section class="blocks-library__item" id="pre" data-name="pre">
     <pre>// Блочный код<br>// Вторая строка</pre>
     <pre>
@@ -182,8 +192,12 @@
 // Вторая строка</pre>
   </section>
 
+
+
   <h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
 
+
+
   <section class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
     <dl class="dl-horizontal">
       <dt>Ассоциативный список</dt>
@@ -196,6 +210,8 @@
     </dl>
   </section>
 
+
+
   <section class="blocks-library__item" id="blockquote-right" data-name=".blockquote-right">
     <blockquote class="blockquote-right">
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
@@ -210,9 +226,11 @@
     </blockquote>
   </section>
 
+
+
   <section class="blocks-library__item" id="list-nums" data-name=".list-nums">
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <ol class="list-nums">
           <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
           <li>Одна послушавшись дал, большого.</li>
@@ -225,7 +243,7 @@
           <li>Власти, она себя за?</li>
         </ol>
       </div>
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <ul class="list-nums">
           <li>Далеко-далеко за словесными горами.</li>
           <li>Одна послушавшись дал, большого.</li>
@@ -237,9 +255,11 @@
     </div>
   </section>
 
+
+
   <section class="blocks-library__item" id="list-bullet" data-name=".list-bullet">
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <ul class="list-bullet">
           <li>Далеко-далеко за словесными горами.</li>
           <li>Одна послушавшись дал, большого.</li>
@@ -253,7 +273,7 @@
           <li>Решила алфавит, назад маленький.</li>
         </ul>
       </div>
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <ol class="list-bullet">
           <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
           <li>Одна послушавшись дал, большого.</li>
@@ -264,11 +284,15 @@
     </div>
   </section>
 
+
+
   <section class="alert  alert--danger" id="text-sizes">
     <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>
 
 

src/less/global/global-scaffolding.less

@@ -60,12 +60,16 @@ textarea {
 
 html {
   box-sizing: border-box;
-  font-size: 10px;
+  font-size: 8px;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -ms-overflow-style: scrollbar;
   -ms-text-size-adjust: 100%;
   min-width: 320px;
   site: be cool; // :)
+
+  @media (min-width: @screen-sm) {
+    font-size: 10px;
+  }
 }
 
 body {
@@ -178,7 +182,11 @@ dt {
 }
 
 dd {
-  margin-left: 1.8em;
+  margin-left: 0;
+
+  @media (min-width: @screen-sm) {
+    margin-left: 1.8em;
+  }
 
   & + dt {
     margin-top: (@line-height / 2);
@@ -218,9 +226,16 @@ abbr[title] {
 }
 
 blockquote {
-  padding: 0 0 0 1.8em;
+  padding: 0 0 0 .5em;
   margin-left: 0;
-  border-left: 5px solid @border-color;
+  margin-right: 0;
+  border-left: 1px solid @border-color;
+
+  @media (min-width: @screen-sm) {
+    padding: 0 0 0 1.8em;
+    margin-left: 0;
+    border-left-width: 5px;
+  }
 
   p,
   ul,