Высота

С помощью модификаторов высоты вы легко можете изменить высоту элемента. В SIMAI Framework вы можете задавать высоту относительно родительского элемента, экрана или размера шрифта html.

Высота относительно родителя

Адаптивный модификатор. Позволяет изменять высоту относительно родительского элемента. Использование: .h{контрольная точка}-{размер}

• Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Размер. Обязательный параметр. Указывает размер относительно родительского элемента. Принимает значения:
  • 0 – 0%
  • 25 – 25%
  • 50 – 50%
  • 75 – 75%
  • 100 – 100%

<div class="bg-theme-50 hr-5 d-flex">
  <div class="p-1 mb-1 bg-theme-700 w-25 h-25"><code>.h-25</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-25 h-50"><code>.h-50</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-25 h-75"><code>.h-75</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-25 h-100"><code>.h-100</code></div>
</div>

Высота относительно окна

Адаптивный модификатор. Позволяет изменять высоту относительно окна. Использование: .hv{контрольная точка}-{размер}

• Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Размер. Обязательный параметр. Указывает размер относительно родительского элемента. Принимает значения:
  • 0 – 0vh
  • 25 – 25vh
  • 50 – 50vh
  • 75 – 75vh
  • 100 – 100vh

<div class="hv-25"></div>
<div class="hv-50"></div>
<div class="hv-75"></div>
<div class="hv-100"></div>

Пример использования в адаптивном режиме:

<div class="hv-100 hv-lg-75 hv-xl-50"></div>

Абсолютная высота

Адаптивны модификатор. С помощью модификатора .hr вы можете устанавливать размер объекта относительно размера шрифта html. Использование: .hr{контрольная точка}-{размер}

• Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Размер. Обязательный параметр. Указывает размер относительно размера шрифта страницы (html). Принимает значения:
  • 1 – 1 rem
  • 2 – 2 rem
  • 3 – 4 rem
  • 4 – 8 rem
  • 5 – 16 rem
  • 6 – 32 rem

<div class="bg-theme-50 d-flex">
  <div class="p-1 mb-1 bg-theme-700 w-20 hr-1"><code>.hr-1</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-20 hr-2"><code>.hr-2</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-20 hr-3"><code>.hr-3</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-20 hr-4"><code>.hr-4</code></div>
  <div class="p-1 mb-1 bg-theme-700 w-20 hr-5"><code>.hr-5</code></div>
</div>

Пример использования в адаптивном режиме:

<div class="hr-4 hr-lg-5"></div>