lists

src/blocks/list-bullet/list-bullet.html

+<!--DEV
+
+<ul class="list-bullet">
+  <li>Далеко-далеко за словесными горами.</li>
+  <li>Одна послушавшись дал, большого.</li>
+  <li>Проектах за вопрос курсивных.</li>
+  <li>Власти, она себя за?</li>
+  <li>Решила алфавит, назад маленький.</li>
+</ul>
+
+-->

src/blocks/list-bullet/list-bullet.less

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.list-bullet {
+  list-style: none;
+
+  & > li {
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: .6em;
+      left: -1.3em;
+      font-size: 80%;
+      width: 0.5em;
+      height: 0.5em;
+      border-radius: 50%;
+      background-color: @color-main;
+    }
+  }
+}

src/blocks/list-nums/list-nums.html

+<!--DEV
+
+<ol class="list-nums">
+  <li>Далеко-далеко за словесными горами.</li>
+  <li>Одна послушавшись дал, большого.</li>
+  <li>Проектах за вопрос курсивных.</li>
+  <li>Власти, она себя за?</li>
+  <li>Решила алфавит, назад маленький.</li>
+</ol>
+
+-->

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

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.list-nums {
+  list-style: none;
+  padding-left: 0;
+  counter-reset: li;
+
+  & &  {
+    counter-reset: li-in;
+    padding-top: .25em;
+
+    & > li {
+      &:before {
+        content: counter(li) '.' counter(li-in);
+        counter-increment: li-in;
+      }
+    }
+  }
+
+  & > li {
+    position: relative;
+    padding-left: 1.8em;
+    padding-top: .25em;
+    padding-bottom: .25em;
+
+    &:before {
+      content: counter(li);
+      counter-increment: li;
+      position: absolute;
+      top: .35em;
+      left: 0;
+      font-size: 70%;
+      width: 1.9em;
+      height: 1.9em;
+      line-height: 2em;
+      color: #fff;
+      background-color: @color-main;
+      border-radius: 50%;
+      text-align: center;
+    }
+  }
+}

src/blocks/step-list/step-list.html

+<!--DEV
+
+<ol class="step-list">
+  <li class="step-list__item">
+    <h2 class="step-list__title">Автоматизируйте всё</h2>
+    <div class="step-list__text">
+      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
+    </div>
+    <a href="https://github.com/nicothin/NTH-start-project" class="btn">Автоматизировать</a>
+  </li>
+  <li class="step-list__item  step-list__item--main">
+    <h2 class="step-list__title">Используйте голову</h2>
+    <div class="step-list__text">
+      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
+    </div>
+    <a href="" class="btn  btn--main">Начать</a>
+  </li>
+  <li class="step-list__item  step-list__item--danger">
+    <h2 class="step-list__title">Верстайте быстро</h2>
+    <div class="step-list__text">
+      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
+    </div>
+    <a href="" class="btn  btn--danger">Приступить</a>
+  </li>
+  <li class="step-list__item  step-list__item--success">
+    <h2 class="step-list__title">Испытывайте удовольствие от работы</h2>
+    <div class="step-list__text">
+      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
+    </div>
+    <a href="" class="btn  btn--success">Да, детка, сверстай мне!</a>
+  </li>
+</ol>
+
+-->

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

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.step-list {
+  list-style: none;
+  padding-left: 0;
+  counter-reset: step-list;
+
+  &__item {
+    position: relative;
+    margin-left: 5rem;
+    margin-bottom: 1.5rem;
+    padding-left: 1.2rem;
+    border-left: 1px solid @border-color;
+
+    &:before {
+      content: counter(step-list) '.';
+      counter-increment: step-list;
+      position: absolute;
+      top: 0;
+      left: -5rem;
+      font-size: @font-size--h2;
+      width: 1.2em;
+      height: @line-height;
+      line-height: @line-height;
+      color: @gray-light;
+      text-align: right;
+    }
+
+    &--main {
+      .step-list__title {
+        border-color: @color-main;
+      }
+    }
+
+    &--danger {
+      .step-list__title {
+        border-color: @color-danger;
+      }
+    }
+
+    &--success {
+      .step-list__title {
+        border-color: @color-success;
+      }
+    }
+  }
+
+  &__title {
+    font-size: @font-size--h2;
+    font-weight: 400;
+    line-height: @line-height;
+    padding: 0 0 .7rem;
+    margin: 0 0 1.5rem;
+    border-bottom: 2px solid @border-color;
+  }
+
+  &__text {
+    margin-bottom: 2rem;
+  }
+
+}

src/blocks_library.html

@@ -21,7 +21,7 @@
 
   <h2 class="blocks-library__title" id="typo">Текст, теги</h2>
 
-  <div class="blocks-library__item" id="text" data-name="Текст">
+  <section class="blocks-library__item" id="text" data-name="Текст">
 
      <p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
      <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
@@ -77,9 +77,9 @@
      <hr>
      <p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
      <div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
-  </div>
+  </section>
 
-  <div class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
+  <section class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
     <div class="row">
       <div class="col-md-6">
         <table>
@@ -150,18 +150,18 @@
         </table>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="blocks-library__item" id="address" data-name="address">
+  <section class="blocks-library__item" id="address" data-name="address">
     <address>
       <strong>Имя Фамилия</strong>
       <br>
       г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
       <a href="mailto:imya@mail.com">imya@mail.com</a>
     </address>
-  </div>
+  </section>
 
-  <div class="blocks-library__item" id="blockquote" data-name="blockquote">
+  <section class="blocks-library__item" id="blockquote" data-name="blockquote">
     <blockquote>
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
     </blockquote>
@@ -173,18 +173,18 @@
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
       <footer><cite>Emmet</cite></footer>
     </blockquote>
-  </div>
+  </section>
 
-  <div class="blocks-library__item" id="pre" data-name="pre">
+  <section class="blocks-library__item" id="pre" data-name="pre">
     <pre>// Блочный код<br>// Вторая строка</pre>
     <pre>
 // Блочный код
 // Вторая строка</pre>
-  </div>
+  </section>
 
   <h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
 
-  <div class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
+  <section class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
     <dl class="dl-horizontal">
       <dt>Ассоциативный список</dt>
       <dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
@@ -194,9 +194,9 @@
       <dt>Конституционально-эзотерический концептуализм</dt>
       <dd>Некое определение многословного термина.</dd>
     </dl>
-  </div>
+  </section>
 
-  <div class="blocks-library__item" id="blockquote-right" data-name=".blockquote-right">
+  <section class="blocks-library__item" id="blockquote-right" data-name=".blockquote-right">
     <blockquote class="blockquote-right">
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
     </blockquote>
@@ -208,7 +208,66 @@
       <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
       <footer><cite>Emmet</cite></footer>
     </blockquote>
+  </section>
+
+  <section class="blocks-library__item" id="list-nums" data-name=".list-nums">
+    <div class="row">
+      <div class="col-sm-6">
+        <ol class="list-nums">
+          <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
+          <li>Одна послушавшись дал, большого.</li>
+          <li>Проектах за вопрос курсивных.
+            <ul class="list-nums">
+              <li>Одна послушавшись дал, большого.</li>
+              <li>Далеко-далеко за словесными горами.</li>
+            </ul>
+          </li>
+          <li>Власти, она себя за?</li>
+        </ol>
+      </div>
+      <div class="col-sm-6">
+        <ul class="list-nums">
+          <li>Далеко-далеко за словесными горами.</li>
+          <li>Одна послушавшись дал, большого.</li>
+          <li>Проектах за вопрос курсивных.</li>
+          <li>Власти, она себя за?</li>
+          <li>Решила алфавит, назад маленький.</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <section class="blocks-library__item" id="list-bullet" data-name=".list-bullet">
+    <div class="row">
+      <div class="col-sm-6">
+        <ul class="list-bullet">
+          <li>Далеко-далеко за словесными горами.</li>
+          <li>Одна послушавшись дал, большого.</li>
+          <li>Проектах за вопрос курсивных.</li>
+          <li>Власти, она себя за?
+            <ul>
+              <li>Одна послушавшись дал, большого.</li>
+              <li>Далеко-далеко за словесными горами.</li>
+            </ul>
+          </li>
+          <li>Решила алфавит, назад маленький.</li>
+        </ul>
       </div>
+      <div class="col-sm-6">
+        <ol class="list-bullet">
+          <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
+          <li>Одна послушавшись дал, большого.</li>
+          <li>Проектах за вопрос курсивных.</li>
+          <li>Власти, она себя за?</li>
+        </ol>
+      </div>
+    </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>
 
@@ -1255,6 +1314,39 @@ $('#test').on('hidden.nth.dropdown', function () {
 }</pre>
   </section>
 
+  <section class="blocks-library__item" id="step-list" data-name=".step-list">
+    <ol class="step-list">
+      <li class="step-list__item">
+        <h2 class="step-list__title">Автоматизируйте всё</h2>
+        <div class="step-list__text">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
+        </div>
+        <a href="https://github.com/nicothin/NTH-start-project" class="btn">Автоматизировать</a>
+      </li>
+      <li class="step-list__item  step-list__item--main">
+        <h2 class="step-list__title">Используйте голову</h2>
+        <div class="step-list__text">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
+        </div>
+        <a href="" class="btn  btn--main">Начать</a>
+      </li>
+      <li class="step-list__item  step-list__item--danger">
+        <h2 class="step-list__title">Верстайте быстро</h2>
+        <div class="step-list__text">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
+        </div>
+        <a href="" class="btn  btn--danger">Приступить</a>
+      </li>
+      <li class="step-list__item  step-list__item--success">
+        <h2 class="step-list__title">Испытывайте удовольствие от работы</h2>
+        <div class="step-list__text">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
+        </div>
+        <a href="" class="btn  btn--success">Да, детка, сверстай мне!</a>
+      </li>
+    </ol>
+  </section>
+
 
 
 </section>

src/less/global/global-scaffolding.less

@@ -169,6 +169,10 @@ ul ol {
   margin-bottom: 0;
 }
 
+li {
+  line-height: @line-height;
+}
+
 dt {
   font-weight: 700;
 }

src/less/style.less

@@ -31,3 +31,6 @@
 @import "./src/blocks/fields-group/fields-group__item--dropdown.less";
 @import "./src/blocks/btn-group/btn-group.less";
 @import "./src/blocks/checked-btn/checked-btn.less";
+@import "./src/blocks/list-nums/list-nums.less";
+@import "./src/blocks/list-bullet/list-bullet.less";
+@import "./src/blocks/step-list/step-list.less";