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