Перевел все компоненты на rem

aa5ab54a · Nikolay Gromov · d2d292e8 · aa5ab54a · aa5ab54a · aa5ab54a
Commit aa5ab54a authored Dec 24, 2017 by Nikolay Gromov
37 changed files
--- a/src/blocks-demo.pug
+++ b/src/blocks-demo.pug
@@ -91,7 +91,7 @@ block content



-  h1 Блоки стартового репозитория #[a(href='index.html') проекта]
+  h1.blocks-library__title Блоки стартового репозитория #[a(href='index.html') проекта]

  +block-lib('page', 'Страница', false)
    include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/page/readme.md
@@ -379,6 +379,9 @@ block content
        .embed-responsive-demo__item:last-child {
          padding-left: 5px;
        }
+        .embed-responsive-demo .embed-responsive {
+          margin: 0;
+        }
      }
    .embed-responsive-demo
      .embed-responsive-demo__item
@@ -760,7 +763,7 @@ block content
  +block-lib('nouislider', 'Выбор диапазона с <a href="https://refreshless.com/nouislider/">noUiSlider</a>', false)
    include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/nouislider/readme.md
    +nouislider('demo-nouislider')
-      p
+      p(style='margin-top: 1rem;')
        input#demo-nouislider-start(type='number', value='10')
        input#demo-nouislider-end(type='number', value='80')
    +block-lib-code()

--- a/src/blocks/alert/alert.scss
+++ b/src/blocks/alert/alert.scss
@@ -7,8 +7,10 @@ $color-success:               hsl(120, 39%, 54%) !default;
 $color-danger:                hsl(2, 64%, 58%) !default;
 $color-warning:               hsl(35, 84%, 62%) !default;
 $text-color:                  hsl(0, 0%, 10%) !default;
-$font-size--h3:               1.5em !default;
-$border-radius:               3px !default;
+
+$font-size--h3:               rem(24px) !default;
+
+$border-radius:               rem(3px) !default;

 .alert {

@@ -23,31 +25,34 @@ $border-radius:               3px !default;
  color: $text-color;
  background-color: #fff;

-  > * {
-
-    &:first-child {
-      margin-top: 0;
-    }
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }

-    &:last-child {
-      margin-bottom: 0;
-    }
+  & > * + * {
+    margin-top: 1rem;
  }

  &__header {
    display: block;
    margin-top: 0;
-    margin-bottom: 0.4em;
+    margin-bottom: 0.5rem;
    font-size: $font-size--h3;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
+
+    & + * {
+      margin-top: 0;
+    }
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
+    margin: 0;
  }



--- a/src/blocks/breadcrumbs/breadcrumbs.scss
+++ b/src/blocks/breadcrumbs/breadcrumbs.scss
@@ -2,8 +2,6 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

-$line-height:                 1.375em !default;
-
 $text-color:                  hsl(0, 0%, 10%) !default;

 .breadcrumbs {
@@ -13,7 +11,8 @@ $text-color:                  hsl(0, 0%, 10%) !default;

  padding: 0;
  list-style: none;
-  margin: $line-height 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
  color: $text-color;

  a {
@@ -35,7 +34,7 @@ $text-color:                  hsl(0, 0%, 10%) !default;
    &:not(:last-child):after {
      content: '>';
      display: inline-block;
-      margin-left: 0.8em;
+      margin-left: 0.8rem;
      color: $gray;
    }
  }

--- a/src/blocks/btn/btn.scss
+++ b/src/blocks/btn/btn.scss
@@ -5,12 +5,12 @@
 $gray-lighter:                hsl(0, 0%, 80%) !default;
 $gray-lightest:               hsl(0, 0%, 90%) !default;
 $text-color:                  hsl(0, 0%, 10%) !default;
-$line-height:                 1.375em;
+$line-height:                 1.5 !default;

 $field-padding-vertical:      0.3em !default;
 $field-padding-horizontal:    0.7em !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .btn {

@@ -44,6 +44,10 @@ $border-radius:               3px !default;
    border-color: darken($gray-lighter, 12%);
  }

+  &:visited {
+    color: $text-color;
+  }
+
  &:active,
  &:focus {
    @include field-focus;

--- a/src/blocks/code/code.scss
+++ b/src/blocks/code/code.scss
@@ -5,9 +5,7 @@
 $gray-lighter:                hsl(0, 0%, 80%) !default;
 $gray-lightest:               hsl(0, 0%, 90%) !default;

-$line-height:                 1.375em !default;
-
-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .code {

@@ -16,8 +14,8 @@ $border-radius:               3px !default;
  display: block;
  width: 100%;
  max-height: 50rem;
-  padding: 1em;
-  margin-bottom: ($line-height / 2);
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
  overflow-x: auto;
  background-color: $gray-lightest;
  border-radius: $border-radius;

--- a/src/blocks/comment/comment.scss
+++ b/src/blocks/comment/comment.scss
@@ -2,17 +2,19 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

+$screen-md:                   768px !default;
+
 .comment {

  $block-name:                &; // #{$block-name}__element

-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 1rem;
+  margin-bottom: 1rem;

  @media (min-width: $screen-md) {

    & & {
-      padding-left: calc(60px + 1em);
+      padding-left: calc(60px + 1rem);
    }

    & & & & {
@@ -26,7 +28,7 @@

  &__avatar-wrap {
    flex-shrink: 0;
-    margin-right: 1em;
+    margin-right: 1rem;

    img {
      display: block;

--- a/src/blocks/dropdown/dropdown.scss
+++ b/src/blocks/dropdown/dropdown.scss
@@ -6,7 +6,7 @@ $text-color:                  hsl(0, 0%, 10%) !default;

 $border-color:                hsl(0, 0%, 60%) !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 $transition-time:             0.3s !default;


--- a/src/blocks/embed-responsive/embed-responsive.scss
+++ b/src/blocks/embed-responsive/embed-responsive.scss
@@ -6,8 +6,8 @@
  position: relative;
  display: block;
  width: 100%;
-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
  padding: 0;
  overflow: hidden;


--- a/src/blocks/field-actions/field-actions.scss
+++ b/src/blocks/field-actions/field-actions.scss
@@ -4,22 +4,22 @@

 $text-color--muted:           hsl(0, 0%, 50%) !default;

-$font-size--small:            0.75em !default;
+$font-size--small:            80% !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 .field-actions {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-top: $line-height;
-  margin-bottom: ($line-height / 2);
+  margin-top: 1rem;
+  margin-bottom: 1rem;

  &__text {
    display: block;
-    margin-top: ($line-height / 2);
-    margin-bottom: ($line-height / 2);
+    margin-top: 1rem;
+    margin-bottom: 1rem;
    font-size: $font-size--small;
    color: $text-color--muted;
    line-height: 1.2em;

--- a/src/blocks/field-checkbox/field-checkbox.scss
+++ b/src/blocks/field-checkbox/field-checkbox.scss
@@ -2,14 +2,16 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;
+
+$border-radius:               rem(3px) !default;

 .field-checkbox {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__title {
    display: block;
@@ -21,7 +23,7 @@ $line-height:                 1.375em !default;
  &__input-wrap {

    & + & {
-      margin-top: ($line-height / 2);
+      margin-top: 1rem;
    }
  }

@@ -35,16 +37,17 @@ $line-height:                 1.375em !default;
  }

  &__name-text {
+    display: inline-block;

    // свой чекбокс с картинкой

    // &:before {
    //   content: '';
    //   position: absolute;
-    //   top: 0.1em;
+    //   top: rem(5px);
    //   left: 0;
-    //   width: 14px;
-    //   height: 14px;
+    //   width: rem(14px);
+    //   height: rem(14px);
    //   background-image: svg-load('../blocks/field-checkbox/bg-img/checkbox.svg');
    //   background-size: 100%;
    // }
@@ -59,10 +62,10 @@ $line-height:                 1.375em !default;
    &:before {
      content: '';
      position: absolute;
-      top: 0.1em;
+      top: rem(5px);
      left: 0;
-      width: 14px;
-      height: 14px;
+      width: rem(14px);
+      height: rem(14px);
      border: 2px solid currentColor;
      border-radius: $border-radius;
    }
@@ -74,10 +77,10 @@ $line-height:                 1.375em !default;
    &:after {
      content: '';
      position: absolute;
-      top: calc(0.1em + 1px);
+      top: rem(6px);
      left: 3px;
-      width: 14px;
-      height: 6px;
+      width: rem(14px);
+      height: rem(6px);
      opacity: 0;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;

--- a/src/blocks/field-file/field-file.scss
+++ b/src/blocks/field-file/field-file.scss
@@ -5,19 +5,19 @@
 $gray-lightest:               hsl(0, 0%, 90%);
 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 $field-padding-vertical:      0.3em !default;
 $field-padding-horizontal:    0.7em !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .field-file {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__name {
    @include field-name;
@@ -30,8 +30,8 @@ $border-radius:               3px !default;

  &__input {
    position: absolute;
-    width: 1px;
-    height: 1px;
+    width: 0;
+    height: 0;
    opacity: 0;

    &:active ~ .field-file__name-text,

--- a/src/blocks/field-radio/field-radio.scss
+++ b/src/blocks/field-radio/field-radio.scss
@@ -2,14 +2,14 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 .field-radio {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__title {
    display: block;
@@ -21,7 +21,7 @@ $line-height:                 1.375em !default;
  &__input-wrap {

    & + & {
-      margin-top: ($line-height / 2);
+      margin-top: 1rem;
    }
  }

@@ -35,16 +35,17 @@ $line-height:                 1.375em !default;
  }

  &__name-text {
+    display: inline-block;

    // своя радиокнопка с картинкой

    // &:before {
    //   content: '';
    //   position: absolute;
-    //   top: 0.1em;
+    //   top: rem(5px);
    //   left: 0;
-    //   width: 14px;
-    //   height: 14px;
+    //   width: rem(14px);
+    //   height: rem(14px);
    //   background-image: svg-load('../blocks/field-radio/bg-img/radiobutton.svg');
    //   background-size: 100%;
    // }
@@ -59,10 +60,10 @@ $line-height:                 1.375em !default;
    &:before {
      content: '';
      position: absolute;
-      top: 0.1em;
+      top: rem(5px);
      left: 0;
-      width: 14px;
-      height: 14px;
+      width: rem(14px);
+      height: rem(14px);
      border: 2px solid currentColor;
      border-radius: 50%;
    }
@@ -74,10 +75,10 @@ $line-height:                 1.375em !default;
    &:after {
      content: '';
      position: absolute;
-      top: calc(0.1em + 4px);
-      left: 4px;
-      width: 6px;
-      height: 6px;
+      top: rem(9px);
+      left: rem(4px);
+      width: rem(6px);
+      height: rem(6px);
      opacity: 0;
      border-radius: 50%;
      background-color: currentColor;

--- a/src/blocks/field-range/field-range.scss
+++ b/src/blocks/field-range/field-range.scss
@@ -5,16 +5,16 @@
 $gray-lightest:               hsl(0, 0%, 90%) !default;
 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .field-range {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__name {
    @include field-name;
@@ -22,13 +22,14 @@ $border-radius:               3px !default;

  &__input-wrap {
    position: relative;
+    display: block;
  }

  &__input {
    align-self: center;
    padding: 0;
    width: 100%;
-    height: 2em;
+    height: 2rem;
    border-radius: 0.25rem;
    border: 0;
    background: none;

--- a/src/blocks/field-select/field-select.scss
+++ b/src/blocks/field-select/field-select.scss
@@ -5,16 +5,16 @@
 $gray-lightest:               hsl(0, 0%, 90%);
 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .field-select {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__name {
    @include field-name;

--- a/src/blocks/field-text/field-text.scss
+++ b/src/blocks/field-text/field-text.scss
@@ -7,19 +7,19 @@ $border-color:                hsl(0, 0%, 60%) !default;

 $text-color--muted:           hsl(0, 0%, 50%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 $field-padding-vertical:      0.3em !default;
 $field-padding-horizontal:    0.7em !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .field-text {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__name {
    @include field-name;

--- a/src/blocks/field-toggler/field-toggler.scss
+++ b/src/blocks/field-toggler/field-toggler.scss
@@ -5,14 +5,14 @@
 $gray-lightest:               hsl(0, 0%, 90%);
 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 .field-toggler {

  $block-name:                &; // #{$block-name}__element

  display: block;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  &__title {
    @include field-name;
@@ -21,29 +21,29 @@ $line-height:                 1.375em !default;
  &__input-wrap {

    & + & {
-      margin-top: ($line-height / 2);
+      margin-top: 1rem;
    }
  }

  &__name {
    position: relative;
    display: inline-block;
-    padding-left: 3.2em;
-    margin-right: 0.6em;
+    padding-left: 3.2rem;
+    margin-right: 0.6rem;
    font-weight: 400;
    line-height: $line-height;
  }

  &__name-text {
+    display: inline-block;

    &:before {
      content: '';
      position: absolute;
-      top: 0.6em;
+      top: rem(3px);
      left: 0;
-      width: px-to-em(35);
-      height: px-to-em(18);
-      transform: translateY(-50%);
+      width: rem(35px);
+      height: rem(18px);
      background-color: #fff;
      border: 1px solid $border-color;

@@ -55,18 +55,17 @@ $line-height:                 1.375em !default;
    &:after {
      content: '';
      position: absolute;
-      top: 0.6em;
+      top: rem(5px);
      left: 2px;
-      width: px-to-em(14);
-      height: px-to-em(14);
-      transform: translateY(-50%);
+      width: rem(14px);
+      height: rem(14px);
      background-color: $gray-lightest;
      border: 1px solid $border-color;
      transition: all 0.3s;
    }

    @at-root input:checked ~ &:after {
-      transform: translate(px-to-em(17), -50%);
+      transform: translate(rem(17px), 0);
    }
  }


--- a/src/blocks/fields-group/fields-group.scss
+++ b/src/blocks/fields-group/fields-group.scss
@@ -9,7 +9,7 @@
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
-  margin-bottom: ($line-height / 2);
+  margin-bottom: 1rem;

  .btn,
  select,                     // обычно, не участвует в группировке

--- a/src/blocks/form/form.pug
+++ b/src/blocks/form/form.pug
@@ -6,7 +6,20 @@ mixin form(mods)
  //- Принимает:
  //-   mods    {string} - список модификаторов
  //- Вызов:
-        +form('mod')
+        +form()
+          +fieldset('Название1')
+            +field-text({
+              helpText: 'Подсказка',
+              attrs: {
+                placeholder: 'Пример'
+              }
+            })
+            +field-text({
+              helpText: 'Подсказка',
+              attrs: {
+                placeholder: 'Пример'
+              }
+            })

  -
    // список модификаторов
@@ -29,7 +42,13 @@ mixin fieldset(legend, mods)
  //-   legend  {string} - название группы полей
  //-   mods    {string} - список модификаторов
  //- Вызов:
-        +form('mod')
+        +fieldset('Название1')
+          +field-text({
+            helpText: 'Подсказка',
+            attrs: {
+              placeholder: 'Пример'
+            }
+          })

  -
    // список модификаторов

--- a/src/blocks/form/form.scss
+++ b/src/blocks/form/form.scss
@@ -2,11 +2,11 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

-$font-family--headings:       -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
+$font-family--headings:       -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;

-$font-size--h3:               1.5em !default;
+$font-size--h3:               rem(24px) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 .form {

@@ -19,7 +19,7 @@ $line-height:                 1.375em !default;
    border: 0;

    &:not(:last-child) {
-      margin-bottom: $line-height;
+      margin-bottom: 1rem;
    }
  }

@@ -27,8 +27,8 @@ $line-height:                 1.375em !default;
    display: block;
    width: 100%;
    max-width: 100%; // Привет IE
-    margin-top: $line-height;
-    margin-bottom: ($line-height / 2);
+    margin-top: 1rem;
+    margin-bottom: 1rem;
    font-size: $font-size--h3;
    font-family: $font-family--headings;
    font-weight: 700;

--- a/src/blocks/label/label.scss
+++ b/src/blocks/label/label.scss
@@ -8,7 +8,7 @@ $color-main:                  hsl(208, 98%, 43%) !default;

 $text-color:                  hsl(0, 0%, 10%) !default;

-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 .label {


--- a/src/blocks/loader/loader.scss
+++ b/src/blocks/loader/loader.scss
@@ -14,8 +14,8 @@ $gray-lightest:               hsl(0, 0%, 90%) !default;
  &:before {
    content: '';
    display: block;
-    width: 3em;
-    height: 3em;
+    width: 3rem;
+    height: 3rem;
    border: 3px solid $gray-lightest;
    border-top: 3px solid $gray-lighter;
    border-radius: 50%;

--- a/src/blocks/main-nav/main-nav.scss
+++ b/src/blocks/main-nav/main-nav.scss
@@ -75,7 +75,7 @@ $transition-time:             0.3s !default;

  &__link {
    display: block;
-    padding: 0.5em;
+    padding: 0.5em 1em;
    text-decoration: none;
    background-color: #fff;


--- a/src/blocks/menu/menu.scss
+++ b/src/blocks/menu/menu.scss
@@ -12,7 +12,7 @@ $border-color:                hsl(0, 0%, 60%) !default;

  min-width: 10em;
  margin: 0;
-  padding: 0.3em 0;
+  padding: 0;
  list-style: none;

  &__item {
@@ -20,8 +20,8 @@ $border-color:                hsl(0, 0%, 60%) !default;
    &--separator {

      &:not(:last-child) {
-        padding-bottom: 0.3em;
-        margin-bottom: 0.3em;
+        padding-bottom: 0.3rem;
+        margin-bottom: 0.3rem;
        border-bottom: 1px solid $border-color;
      }
    }
@@ -33,11 +33,14 @@ $border-color:                hsl(0, 0%, 60%) !default;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
-    padding: 0.3em 1em;
+    padding: 0.5rem 1rem;
    color: $text-color;
    text-decoration: none;

    &:hover,
-    &:focus {}
+    &:focus {
+      text-decoration: none;
+      background-color: $gray-lightest;
+    }
  }
 }
--- a/src/blocks/modal/modal.scss
+++ b/src/blocks/modal/modal.scss
@@ -5,9 +5,9 @@
 $font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
 $font-family--headings:       $font-family !default;

-$font-size--h4:               1.25em !default;
+$font-size--h4:               rem(18px) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 $screen-lg:                   992px !default;

@@ -66,13 +66,13 @@ $z-index-modal:               100 !default;
  }

  &__header {
-    padding: 5px 40px 0 10px;
+    padding: 0 rem(40px) 0 rem(15px);
    flex-shrink: 0;
  }

  &__title {
-    margin-top: ($line-height / 2);
-    margin-bottom: ($line-height / 2);
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
    font-size: $font-size--h4;
    line-height: 1.4;
    font-weight: 700;
@@ -86,12 +86,12 @@ $z-index-modal:               100 !default;
  }

  &__body {
-    padding: 0 10px;
+    padding: 0 rem(15px);
    flex-grow: 1;
  }

  &__footer {
-    padding: 10px;
+    padding: rem(15px);
    flex-shrink: 0;
  }


--- a/src/blocks/off-canvas/off-canvas.scss
+++ b/src/blocks/off-canvas/off-canvas.scss
@@ -41,6 +41,7 @@ $off-canvas-width:            250px !default; // ширина этого бло
      &:hover,
      &:focus {
        color: #fff;
+        background-color: transparent;
      }
    }
  }

--- a/src/blocks/pagination/pagination.scss
+++ b/src/blocks/pagination/pagination.scss
@@ -2,8 +2,6 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

-$line-height:                 1.375em !default;
-
 $text-color:                  hsl(0, 0%, 10%) !default;

 $border-color:                hsl(0, 0%, 60%) !default;
@@ -14,13 +12,13 @@ $border-color:                hsl(0, 0%, 60%) !default;

  display: flex;
  flex-wrap: wrap;
-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 1rem;
+  margin-bottom: 1rem;

  &__item {
    display: block;
-    padding: 0.5em;
-    min-width: 2.5em;
+    padding: 0.5rem;
+    min-width: 2.5rem;
    border: 1px solid $border-color;
    text-decoration: none;
    text-align: center;

--- a/src/blocks/pie-chart/pie-chart.scss
+++ b/src/blocks/pie-chart/pie-chart.scss
@@ -3,7 +3,7 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

 $text-color:                  hsl(0, 0%, 10%) !default;
-$font-size:                   14px !default;
+$font-size:                   1rem !default;

 $gray-light:                  hsl(0, 0%, 60%) !default;
 $gray-lighter:                hsl(0, 0%, 80%) !default;

--- a/src/blocks/progress/progress.scss
+++ b/src/blocks/progress/progress.scss
@@ -5,9 +5,7 @@
 $gray-lightest:               hsl(0, 0%, 90%) !default;
 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
-
-$border-radius:               3px !default;
+$border-radius:               rem(3px) !default;

 $transition-time:             0.3s !default;

@@ -15,8 +13,8 @@ $transition-time:             0.3s !default;

  $block-name:                &; // #{$block-name}__element

-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  text-align: center;

--- a/src/blocks/table-responsive/table-responsive.scss
+++ b/src/blocks/table-responsive/table-responsive.scss
@@ -4,8 +4,6 @@

 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
-
 $screen-xs:                   0 !default;
 $screen-sm:                   480px !default;
 $screen-md:                   768px !default;
@@ -17,8 +15,7 @@ $screen-xxl:                  1800px !default;

  $block-name:                &; // #{$block-name}__element

-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-bottom: 1rem;
  border-collapse: collapse;
  border: 1px solid $border-color;
  width: 100%;

--- a/src/blocks/table/table.scss
+++ b/src/blocks/table/table.scss
@@ -6,9 +6,7 @@ $text-color--muted:           hsl(0, 0%, 50%) !default;

 $border-color:                hsl(0, 0%, 60%) !default;

-$font-size--small:            0.75em !default;
-
-$line-height:                 1.375em !default;
+$font-size--small:            80% !default;

 $field-padding-vertical:      0.3em !default;
 $field-padding-horizontal:    0.7em !default;
@@ -19,6 +17,7 @@ $field-padding-horizontal:    0.7em !default;

  display: block;
  width: 100%;
+  margin-bottom: 1rem;
  overflow-x: auto;
  border: 1px solid $border-color;

@@ -65,7 +64,7 @@ $field-padding-horizontal:    0.7em !default;
  caption {
    caption-side: top;
    text-align: left;
-    padding: 0.4em $field-padding-horizontal;
+    padding: 0.4rem $field-padding-horizontal;
    border-bottom: 1px solid $border-color;
    font-size: $font-size--small;
    line-height: 1em;

--- a/src/blocks/tabs/tabs.scss
+++ b/src/blocks/tabs/tabs.scss
@@ -9,7 +9,7 @@ $text-color--muted:           hsl(0, 0%, 50%) !default;

 $border-color:                hsl(0, 0%, 60%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 $field-padding-vertical:      0.3em !default;
 $field-padding-horizontal:    0.7em !default;
@@ -18,8 +18,8 @@ $field-padding-horizontal:    0.7em !default;

  $block-name:                &; // #{$block-name}__element

-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 1rem;
+  margin-bottom: 1rem;

  &__links {
    margin: 0;
@@ -59,8 +59,12 @@ $field-padding-horizontal:    0.7em !default;

    &--active {

+      @media (min-width: $screen-md) {
+        border-bottom: 1px solid transparent;
+      }
+
      #{$block-name}__link {
-        color: $text-color;
+        color: $text-color !important;
        background-color: #fff;
      }
    }
@@ -77,6 +81,10 @@ $field-padding-horizontal:    0.7em !default;
    &:focus {
      color: $text-color--muted;
    }
+
+    &:visited {
+      color: $text-color--muted;
+    }
  }

  &__content-wrapper {
@@ -95,6 +103,10 @@ $field-padding-horizontal:    0.7em !default;
      display: none;
    }

+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
    &--active {

      .js & {

--- a/src/blocks/to-top/to-top.scss
+++ b/src/blocks/to-top/to-top.scss
@@ -2,6 +2,8 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

+$transition-time:             0.3s !default;
+
 .to-top {

  $block-name:                &; // #{$block-name}__element
@@ -10,8 +12,8 @@
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
-  width: 4rem;
-  height: 4rem;
+  width: 3rem;
+  height: 3rem;
  border-radius: 50%;
  background-color: #000;
  color: transparent;

--- a/src/blocks/tooltip/tooltip.scss
+++ b/src/blocks/tooltip/tooltip.scss
@@ -4,7 +4,7 @@

 $gray:                        hsl(0, 0%, 50%) !default;

-$line-height:                 1.375em !default;
+$line-height:                 1.5 !default;

 .tooltip {

@@ -16,8 +16,8 @@ $line-height:                 1.375em !default;
  &__btn {
    display: inline-block;
    padding: 0;
-    width: $line-height;
-    height: $line-height;
+    width: ($line-height * 1em);
+    height: ($line-height * 1em);
    overflow: hidden;
    border: none;
    color: transparent;
@@ -32,9 +32,9 @@ $line-height:                 1.375em !default;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
-    min-width: 150px;
-    max-width: 250px;
-    padding: 10px 15px;
+    min-width: rem(150px);
+    max-width: rem(250px);
+    padding: 0.8rem 1rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);


--- a/src/blocks/typo/readme.md
+++ b/src/blocks/typo/readme.md
@@ -65,19 +65,19 @@
 </tr>
 <tr>
 <td><code>&lt;strong></code></td>
-<td>**действительно значимый текст**</td>
+<td><strong>действительно значимый текст</strong></td>
 </tr>
 <tr>
 <td><code>&lt;b></code></td>
-<td>**просто выделенный текст, лид**</td>
+<td><b>просто выделенный текст, лид</b></td>
 </tr>
 <tr>
 <td><code>&lt;i></code></td>
-<td>_иностранное слово или термин_</td>
+<td><i>иностранное слово или термин</i></td>
 </tr>
 <tr>
 <td><code>&lt;em></code></td>
-<td>_эмфатическое ударение_</td>
+<td><em>эмфатическое ударение</em></td>
 </tr>
 <tr>
 <td><code>&lt;s></code></td>

--- a/src/blocks/typo/typo.scss
+++ b/src/blocks/typo/typo.scss
@@ -86,7 +86,7 @@ h6 {
 h1,
 h2,
 h3 {
-  margin-top: 2rem;
+  margin-top: 3rem;
  margin-bottom: 0.5rem;
 }

@@ -96,7 +96,7 @@ h3 {
 h4,
 h5,
 h6 {
-  margin-top: 0.5rem;
+  margin-top: 1rem;
  margin-bottom: 0.5rem;
 }

@@ -156,7 +156,7 @@ address {

 ul,
 ol {
-  padding-left: 1.2em;
+  padding-left: 1.5rem;
 }

 ol ol,
@@ -179,7 +179,7 @@ dd {
  margin-left: 0;

  @media (min-width: $screen-sm) {
-    margin-left: 1.8em;
+    margin-left: 1.5rem;
  }

  & + dt {
@@ -188,8 +188,8 @@ dd {
 }

 hr {
-  margin-top: $line-height;
-  margin-bottom: $line-height;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid $border-color;
 }

--- a/src/scss/blocks-library.scss
+++ b/src/scss/blocks-library.scss
@@ -3,22 +3,24 @@

 .blocks-library {

+  &__title {
+    font-weight: 400;
+  }
+
  &__item {
    position: relative;
    padding: 1rem;
    border: 2px dashed $gray-lighter;
-    margin: 2.5em 0;
+    margin: 2.5rem 0;

    @media (min-width: $screen-md) {
-      padding: 1.5rem 2rem 1.5rem 5rem;
-      // min-height: 18rem;
-      margin: 5rem 0;
+      padding: 1.5rem 2rem 0.5rem 3rem;
    }

    &:before {
      content: '.' attr(data-id);
      position: absolute;
-      top: -1.2em;
+      top: -1.2rem;
      left: 0;
      font-weight: 700;
      text-transform: lowercase;
@@ -30,8 +32,8 @@
      color: $gray-lighter;

      @media (min-width: $screen-md) {
-        left: 2.5rem;
-        top: 20rem;
+        left: 1.4rem;
+        top: 20.5rem;
        width: 21rem;
        transform: rotate(-90deg);
        transform-origin: 0 100%;
@@ -40,62 +42,59 @@
  }

  &__item-title {
-    margin: 0.3em 0;
+    margin: 0 0 0.5rem;
  }

  &__item-title-link {
    display: inline-block;
-    margin-right: 10px;
+    margin-right: 0.8rem;

    svg {
      display: block;
+      fill: $gray;
    }
  }

-  &__sub-item {}
-
-  &__sub-item-title {}
-
  &__code-wrapper {
    position: relative;
  }

  &__code-show-trigger {
    display: block;
-    width: 3rem;
-    height: 20px;
+    width: 30px;
+    height: 30px;
    cursor: pointer;
    margin-bottom: 0.3em;

    @media (min-width: $screen-md) {
      position: absolute;
-      top: -1.8rem;
-      left: -4rem;
+      top: -1.65rem;
+      left: -2.5rem;
    }
  }

  &__code-icon {
    display: block;
-    width: 3rem;
-    height: 2px;
-    background-color: $gray-light;
+    width: 30px;
+    height: 3px;
+    background-color: $gray-lighter;

    &:before,
    &:after {
      position: absolute;
-      background-color: $gray-light;
-      width: 3rem;
-      height: 2px;
+      background-color: $gray-lighter;
+      width: 30px;
+      height: 3px;
      left: 0;
      content: '';
    }

    &:before {
-      top: 8px;
+      top: 10px;
    }

    &:after {
-      top: 16px;
+      top: 20px;
    }
  }

@@ -115,7 +114,6 @@
    }

    pre {
-      // margin: 0;
      max-height: 500px;
    }
  }

--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -34,18 +34,18 @@ $border-color:                $gray-light;

 // Базовая типографика

-$font-size--root:             16px !default;
+$font-size--root:             16px;

-$font-size:                   1rem !default; // rem(16px)
+$font-size:                   1rem; // rem(16px)

-$font-size--h1:               rem(40px) !default;
-$font-size--h2:               rem(32px) !default;
-$font-size--h3:               rem(24px) !default;
-$font-size--h4:               rem(18px) !default;
-$font-size--h5:               rem(16px) !default;
-$font-size--h6:               rem(16px) !default;
+$font-size--h1:               rem(40px);
+$font-size--h2:               rem(32px);
+$font-size--h3:               rem(24px);
+$font-size--h4:               rem(18px);
+$font-size--h5:               rem(16px);
+$font-size--h6:               rem(16px);

-$font-size--small:            80% !default;
+$font-size--small:            80%;

 $line-height:                 1.5;

@@ -76,7 +76,7 @@ $container-xxl:               $screen-xxl - 30;
 // Модульная сетка

 $grid-columns:                12;
-$grid-gutter-width:           30px;
+$grid-gutter-width:           rem(30px);



@@ -85,7 +85,7 @@ $grid-gutter-width:           30px;
 $field-padding-vertical:      0.3em;
 $field-padding-horizontal:    0.7em;

-$border-radius:               3px;
+$border-radius:               rem(3px);
 $opacity:                     0.7;
 $transition-time:             0.3s;
 $shadow:                      0 4px 2px -2px rgba(0, 0, 0, 0.3);