- CSS
- HTML
- Верстка
- Sass
- Bootstrap
Розбираю два типографических частини двох бібліотек: Foundation 5 і Bootstrap 3.
Потрібно привести в порядок h1-h6.
Що потрібно:- адаптивність
- При зміні розміру шрифту базового, міняйли щодо інші заголовки.
- Також змінювалися і висота рядка і відступи.
- Причому все було коректно відображалося, без помилок, не було відчуття безграмотності в відступи (що найскладніше, як вони математично прораховуються).
Bootstrap 3 - відсік, тому що все в пікселях.
Foundation 5 - задаю html
Решта rem: font-size, line-height, margin-top, margin-bottom.
Також в stylus (або SASS) буду задавати базові розміри h1-h6:
Потрібно привести в порядок line-height, margin-top, margin-bottom.
Намагаючись поєднати обидві практики, не розумію.
У Bootstrap струппіровани: у h1, h2, h3 заголовків одні отсутупи. h2, h3, h4 - інші.
У Foundation - Однакові для всіх h1-h6. margin-top: 0.2rem; margin-bottom: 0.5rem; - що здається неправильним, тому що розмір шрифтів різний. Але досягається за рахунок великого line-height. Оскільки якщо h6 стане багато рядковим буде явна проблема відображення.
Як вірно і best-practice зробити таку типографическую верстку?
Щоб задаючи (змінюючи в реалтайм) html font-size мати адекватне і правильно відображення.
Залишаючи при цьому позможность через змінні міняти розміри окремих h (1-6) щоб коректувалися відступи і висота рядка.
Природно IE8 підтримувати не треба і немає бажання.