1. Вчимося верстати адаптивно
2. Робота з вирівнюванням
3. Основи роботи з сіткою бутстрапа

Прийоми верстки з використанням flexbox, легке вирівнювання елементів в два кліка. У замітці розповідається про адаптивну верстку, а також як без використання готового css фреймворка зробити свій адаптивний шаблон, на прикладі 2-колоночного макета з правого колонкою, шапкою і підвалом

Сучасний front-end розробник активно повинен вміти застосовувати на практиці різні інструменти, що дозволяють автоматизувати процес верстки макетів і програмування клієнтської складової проекту. Для цього вже існує безліч фреймворків, як великих, так і малих, системи збирання, пакетні менеджери, ціла купа пакетів для задач будь-якого рівня, препроцесори, шаблонизатор та інший "цукор", який створений спростити і підвищити продуктивність роботи фахівця в даній області. На жаль, початківцям фронтах буває складно розібратися в достатку цих інструментів, так як тут потрібно постійно розвиватися і знати основи верстки. І багато з цієї причини продовжують верстати «по-дідівськи», звичайний css, з купою повторюваних селектор, верстка без розуміння принципу різних сіток, дикі головні болі з різного роду центрированием і т.д. Якщо раніше, мільйон років тому, верстали на таблицях, а потім перелізли на діви, то зараз вже без застосування flexbox в поєднанні з сітками або ж готовим css-фреймворком, відчуваю, що навіть проста верстка на дівах скоро буде вважатися «моветоном». Поки це ще не так, але наскільки я спостерігаю (точніше, навіть не встигаю спостерігати) за розвитком в даній області різних методик і best practices, то швидше за все, такий варіант має місце бути. Звичайно в цій маленькій замітці, я не зможу розглянути всі must-have вміння хорошого фронту і інструменти для комфортної роботи, але деякі основні принципи, що дозволяють відштовхнутися і піти далі все ж покажу і прокоментую на прикладах.

Вчимося верстати адаптивно

Почнемо з адаптивною верстки, так як це дуже популярна тема в зв'язку з бурхливим розвитком мобільного трафіку. Для того щоб розуміти, як працюють різні сітки, а значить і адаптуюся, подивимося з боку на блокові елементи, складові розмітку сторінки і виступаючі разом з цим як контейнери для інших елементів (текст, іконки, картинки та інше, що може бути розміщено за замовчуванням або із застосуванням позиціонування). Традиційна верстка на дівах.

Як відомо, будь-який блоковий елемент display: block за замовчуванням займає всю доступну ширину екрана, тільки якщо ми не визначимо його ширину явно (або в px, або в%). Але навіть якщо йому буде задана певна таким чином ширина, то наступний після нього блоковий елемент буде йти після нього з нового рядка (цим, до речі і відрізняється block від inline, який буде слідувати один за одним). Це важливий момент, його потрібно просто зрозуміти, а для того щоб зрозуміти, це справа легко переглянути в інспектора будь-якого браузера.

Якщо ж нам треба, щоб блокові елементи були сусідами один з одним, то необхідно обтеаканіе елементів (float), причому потрібно задавати ширину блоків в%, щоб браузер автоматично обчислював ширину в пікселях. Як поширений приклад, це блок контенту, а поруч сайдбар. Після обтікання елементів, незабутній використовувати clearfix, скидання обтікання, щоб не зламати верстку надалі.

Найпершим справою ми повинні "повідомити" браузер, що хочемо використовувати адаптивне подання, відповідно до якого будь-який браузер буде відкривати сторінку в цьому режимі, робиться це ось таким оголошенням між тегами head документа:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1">

Іншими словами, ширина-пристрою в масштабі 1: 1. І якщо у вас верстка зроблена не адаптивно, то швидше за все будуть проблеми при такому відображенні в мобільному поданні (швидше за все весь контент стиснеться в "гармошку", якщо логічно уявити, що може статися :). Ось з цього часу можна вже говорити про наступний крок, який є в будь-grid системі або адаптивному фреймворку.

У будь-grid системі є брейкпоінт, точки переходу. Подивимося на Bootstrap, коли при зміні ширини екрану (мобільний, планшетний вид, і т.д.), відбувається перевірка елемента, що має поточний стовпчик клас (наприклад клас десктопа для колонки, в популярному фреймворку Bootstrap, це col-md- {x }, md - десктоп). Класи в свою чергу задають різну ширину в%, що дорівнює (100/12) · x, де x - коефіцієнт ширини, від 1 до 12.

Колоночного класи описують поведінку обтікання елементів: є клас (в той же час клас може бути для різних пристроїв) - обтікання задано, немає - ширина 100% (типово для подання контенту на мобільних пристроях). А реалізовано цю поведінку за допомогою медіа-запитів, які розуміють всі браузери. Медіа-запит - в css це поняття означає правило, при виконанні умови якого, підключаються відповідні стилі, наприклад, ширина стала менше 600px - підключаємо новий блок стилів, переобумовленої старий. Наприклад, стовпчик клас col-md- {x} підключається за замовчуванням від 992px і вище, і відключається до 992px. Але все брейкпоінт бутстраповскіе за замовчуванням можна перевизначити своїми при компіляції сітки.

Ось і вся проста механіка з дивами, яким потрібно задати ширину в%, float: left; і очистити обтікання після колонок (в бутстрап колонки обертаються у врапперов c класом row в цьому випадку), які ми вибудовуємо в ряд. Все це з легкістю можна реалізувати самому і без всякої сітки, коли є поняття, як це працює, просто в будь-який сітці прописані класи і багато коду вже написано, вашим завданням залишається прописувати класи елементів, ось і все.

Ми ж, трохи підемо далі і розглянемо ще один варіант. Використання флексбокс, заодно на практиці створимо невеликий скелет адаптивної сторінки з використанням цієї нової технології верстки. Взагалі, грубо кажучи, флекси дозволяють позбавити нас від головного болю типу центрування, горизонтального і вертикального вирівнювання в контейнері. А укупі з медіа-запитами, маючи на увазі описану механіку вище, можна вибудувати дуже якісний адаптивний шаблон з будь-яким вирівнюванням, як по вертикалі, так і по горизонталі. Граємося, взагалі, як захочемо.

режим розтягування

Тут хочеться відзначити, що ширина, задана в%, як у випадку з зоною контенту і сайдбарі (шапка і підвал за замовчуванням займають всю ширину, 100%), при резайзінге (або відкритті сторінки на малому екрані) відразу ж автоматично перераховується. Це, мабуть головне правило, задавати все в%, все інше браузер зробить сам.

HTML:

<! Doctype html> <html lang = "ru"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> < title> Простий адаптуюся </ title> </ head> <body> <div class = "wrap"> <header class = "row vertical-center"> header (logo etc) </ header> <div class = "row middle "> <div class =" content "> content </ div> <div class =" sidebar "> sidebar </ div> </ div> </ div> <footer class =" row vertical-center "> footer (copyright etc) </ footer> </ body> </ html>

У дівах у нас нехай буде просто текст поки що, потренуємося вирівнювати текст (по горизонталі / вертикалі). Ще хороша практика футер виключати із загального врапперов, задавати html і body, height: 100%, врапперов: min-height: 100%, щоб футер завжди був притиснутий до низу сторінки.

Я звик використовувати scss, наведу лістинг коду на ньому:

$ Grey: # 808080; $ H: 50px; html, body {margin: 0; height: 100%; } Body {font-family: monospace, sans-serif; text-transform: uppercase; } .Row {display: flex; } .Vertical-center {align-items: center; justify-content: center; } .Wrap {min-height: 100%; header, .content, .sidebar {border: 1px solid $ grey; } Header {height: $ h; } .Content {height: 100px; padding: 15px 15px 0 15px; border-top-width: 0; margin-right: 1%; width: 75%; } .Sidebar {height: 120px; padding: 15px 15px 0 15px; border-top-width: 0; width: 25%; }} Footer {height: $ h; border: 1px solid $ grey; }

Якщо з якихось причин, scss для кого то ще складним для розуміння, то посилання на хв. версію відкомпільованого css - тут .

display: flex; - вкл. flex-контекст; властивість flex-direction: row; - за замовчуванням, якщо не вкажемо column явно. Це те що нам дозволяє робити багато приголомшливі речі. Нe зовсім впевнений, але начебто поки що це властивість не скрізь підтримується caniuse , Але пора б вже викинути всі ці старі браузери і встановити сучасні, чи не так? :)

Ще задаємо співвідношення для ширини контент - сайдбар, 75%: 25%. Той же самий ефект вийшов би, якби використовували бутстрап. Тільки з класами col-md-9 для контенту ((100/12 · 9)% - ширина у відсотках, 75) і col-md-3 для сайдбара ((100/12 · 3)% - ширина у відсотках, 25)

Отже, давайте розберемося, що відбувається і як працює флексбокс. Найперше, це потрібно задати display: flex тому контейнеру, в якому нам потрібно робити центрування, наприклад. У розмітці у мене це шапка, підвал і контейнер, всередині якого контент і сайдбар. Саме найпростіше, що еффетівно робить флексбокс тут, так це просто бере і вирівнює текст, який в шапці і підвалі, за допомогою класу .vertical-center:

.vertical-center {align-items: center; // вирівнюємо по центру, по вертикалі justify-content: center; // вирівнюємо по центру, по горизонталі}

В результаті, текст вирівнюються в двох напрямках, в шапці і підвалі. Залишилася середня частина, тут, якби ми не задали display: flex, то за замовчуванням залишився б display: block, що в підсумку з блоками контенту і сайдбара, вийшло ось так:

Тобто розташування один під одним. І не має значення, що їм задана ширина, довелося б робити обтікання. Але навіть не в цьому зручність флексбокса. Чи не в тому щоб скоротити код на одну інструкцію, а в тому, що за допомогою ще кількох чудових властивостей, які ми можемо встановити флексбоксу, можна центрувати блоки різної ширини в двох напрямках, також як і текст (по центру, по вертикалі / горизонталі, на початку, в кінці)!

Але перед тим, як перейти до цього головного питання, для якого і створювалася ця замітка, давайте трохи покращимо наш простий макет в плані адаптивності. Зараз при ресайз, контент і сайдбар не складаються один під одного. Необхідно виправити це, так як, уявіть собі, що весь текст при малих дозволах буде некрасиво «спресований» в області контенту і сайдбара. Я не кажу вже про картинки. До речі, зображень, які будуть адаптивними обов'язково треба ставити:

img {display: block; max-width: 100%; height: auto; }

Скористаємося медіа-запитами. Поліпшуємо наш css, я його переписувати весь не буду, просто залишу // ... * там де код той же залишився:

// .. $ mobileBreak: 479px; html, body {// ...} body {// ...} .row {// ...} .middle {@media (max-width: $ mobileBreak) {display: block; }} .Vertical-center {// ...} .wrap {// ... header, .content, .sidebar {// ...} header {// ...} .content {// .. . @media (max-width: $ mobileBreak) {width: auto; margin-right: 0; }} .Sidebar {// ... @media (max-width: $ mobileBreak) {width: auto; }}} Footer {// ...}

Тепер сайдбар складеться під контент на телефонах (<480px):

Робота з вирівнюванням

Як тест, створимо в блоці контенту, кілька кульок з заливкою різними кольорами, так щоб вони були вирівняні по горизонталі і по вертикалі в області контенту, для цього додаємо html:

<Div class = "content"> <div class = "content-inner row"> <div class = "bounce red wh50"> </ div> <div class = "bounce green wh60"> </ div> <div class = "bounce blue wh35"> </ div> </ div> </ div>

Потім css:

// ... $ mobileBreak: 479px; @mixin wh ($ w, $ h) {width: $ w; height: $ h; } // ... .content {// ... padding-top: 0; .content-inner {height: 100%; justify-content: space-between; align-items: center; .bounce {-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .Red {background: # D9534F; } .Green {background: # 6AB181; } .Blue {background: # 2D8CD3; } .Wh50 {@include wh (50px, 50px); } .Wh60 {@include wh (60px, 60px); } .Wh35 {@include wh (35px, 35px); }} @Media (max-width: $ mobileBreak) {// ...}} // ...

Знову таки, там де знаки, // ..., код залишається той же самий.

результат:

Як бачимо, кульки вирівняні ідеально. При додаванні нових кульок, вирівнювання буде відбувається також без всяких проблем. Властивість align-items: center; відповідає за вирівнювання по вертикалі, а justify-content: space-between; рівномірно вирівнює по горизонталі.

align-items: flex-start; робить ось так:

За аналогією, після застосування align-items: flex-end; кульки виявляються внизу контейнера, а align-items: baseline; робить ось так:

Є ще властивість align-items: stretch; , Воно ніби як витягує кожен елемент в висоту, але у мене по швидкому не вийшло реалізувати, тому скрін НЕ покажу.

Це все відноситься до розташування по горизонтальній осі (за замовчуванням). Але якщо ми зробимо явно column:

.content-inner {flex-direction: column; }

Те кульки стануть по вертикалі! І знову таки, застосовуючи різні властивості align-items, ми будемо домагатися всього того, що і при горизонтальному побудові кульок, але тільки вже по вертикалі! Ще є властивість align-self, воно перекриває властивість align-items для одного якого-небудь кульки, або групи. Ось таким ось способом можна гнучко управляти всіма вирівнювання.

У даній короткій замітці ми розглянули основи адаптивної верстки, точніше ту механіку, що дозволяє елементам на сторінці підлаштовуватися під різні дозволи, а також подивилися основи флексбокс верстки. Сподіваюся стаття буде корисна в першу чергу тим, хто не захоче, наприклад брати весь величезний бутстрап заради однієї тільки сітки, а візьме і створить свою, за матеріалами даного уроку.

Ну і на закінчення, все таки, флексбокс - це круто, але використовувати його ще треба обережно, якщо вам потрібна підтримка старих версії браузерів.

Ось на відео, яке я вирішив записати, видно, як флексбокс допомагає у вирішенні завдань по вирівнюванню. У мене при авторизації в блозі з'являються керуючі кнопки, зокрема по редагуванню заміток. Знадобилося вирівняти по центру кнопку «Оновити» та віднести її вправо від значка-номера замітки. Всього 3 правила зробили вирівнювання:

.flex-manager-update {display: flex; align-items: center; justify-content: space-between; }

Основи роботи з сіткою бутстрапа

Отже 12-колоночная сітка. Детально про неї я розповідати не буду, скажу лише те що це чудовий інструмент, який відмінно підходить для того щоб створити адаптивну верстку! Для початку треба пам'ятати кілька правил:

• Обгорткою для блоків служить клас .container або .container-fluid, це основа, яка містить всі інші блоки. Перший фіксований центрований, другий - на всю ширину екрану
• .row служить для створення горизонтальної рядки в якій будуть розміщені стовпці, після цього класу вже не потрібно «клеарфіксіть» (скасовувати обтікання), він сам це робить за допомогою псевдоелементів;
• .col - [type] - [num] - клас який призначається стовпчиках, де type - тип пристрою:
  • Настільні комп'ютери, ≥ 1200px, ширина контейнера = 1170px, позначення - «lg», ширина стовпця .col-lg-1 ~ 97px;
  • Настільні комп'ютери, ≥ 992px, ширина контейнера = 970px, позначення - «md», ширина стовпця .col-md-1 ~ 81px;
  • Планшети, ≥ 768px, ширина контейнера = 750px, позначення - «sm», ширина стовпця .col-sm-1 ~ 62px;
  • Телефони, <768px, ширина контейнера = Далеко (авто), позначення - «xs», ширина стовпця col-xs-1 ~ auto;
• num - число від 1 до 12, що визначає ширину стовпчика, наприклад col-md-5; всередині стовпців вже розташовується ваш контент, наприклад ви можете призначити клас колонці і блоку з контентом в співвідношенні 4 до 8 відповідно;
• Якщо ви хочете щоб у вашому макеті стовпці складалися один під одного на планшетах і телефонах, але ставали горизонтальними на десктопах середніх і великих розмірах, то потрібно використовувати базовий клас .col-md- *;
• Якщо не потрібно щоб стовпці складалися на малих пристроях, то потрібно додатково додати клас, наприклад .col-sm- {x}, щоб не складалися на планшетах, або .col-xs- {x}, або відразу обидва, де x - коеф . ширини;
• Зсув стовпців задається класом .col-md-offset- {x}, який ініціалізує відступ зліва стовпчика на x ширину;

Вся верстка зводиться до того, щоб прописувати колоночного класи блокам, вибудовуючи таким чином колонки, відокремлювані блоками .row, всередині контейнерів .container або .container-fluid.