Вивчення Material Design Lite: Сітка

20

Від автора: нещодавно ми вже пройшлися по новому front-end фреймворку від Google Material Design Lite (MDL). Ми усвідомили, що для створення веб-сайтів в MDL є досить багато компонентів налаштування інтерфейсу користувача (UI), що використовують основні принципи шаблону Material Design.

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

Приступимо до справи

Перед тим як використовувати Сітку, необхідно підключити необхідні MDL бібліотеки – стилі і JS файли. Існує безліч різних способів зробити це, але найпростіший – пряме підключення файлів через посилання з сервера Google. І нам будуть потрібні:

Стилі до иконочному шрифту Material Design

Roboto – стандартний шрифт Material Design

Основні стилі

Файли JS

Колірна палітра

Додавши вищезгадані файли, ми можемо приступити до створення інтерфейсів з колірною палітрою, яка прописана в основних стилях. Файл основних стилів називається material.{primary}-{accent}.min.css. Наш основний колір-бірюзовий, в той час як червоний це акцентний колір. Дані кольори використовуються в меню і кнопки. Вони не впливають на сітку, якщо, звичайно, не додати спеціальні класи .mdl-color—primary і .mdl-color—accent.

Ви можете змінювати комбінації кольорів, як вам завгодно, для цього зверніться до колірної специфікації Material Design. Приміром, material.purple-pink.min.css,material.blue_grey-pink.min.css і material.blue-orange.min.css.

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

Вивчення Material Design Lite: Сітка

Створення сітки

У MDL сітка нарівні з меню і футером є частиною компонента макет. Будується сітка за допомогою Flexbox, даний фреймворк робить сітку більш гнучкої на відміну від стандартного, який досі використовує обтікання. Grid складається з колонок; 12 для настільної версії, 8 для планшета (800px і нижче) і 4 колонки для смартфонів (нижче 500px).

Спочатку створимо порожній DIV і додамо йому клас mdl-grid. Опціонально можна додати ще власний клас, якщо нам буде потрібно змінювати стандартні стилі:

Якщо ви раніше працювали з Bootstrap, то клас mdl-grid це те ж саме, що row або container. Однак у нашому випадку ширина не задається заздалегідь, а може налаштовуватися нами. Тому в наших стилях необхідно задати властивість max-width для сітки:

.content-grid {
max-width: 960px;
}

Колонки

Для створення колонок необхідно всередину контейнера з класом mdl-grid додати від одного до декількох DIV ів (скільки вам потрібно) з класом mdl-cell.

На даному етапі у нас вже є готова сітка. Ми додали три колонки, кожна з яких має ширину 33.3333333333%. MDL припускає, що в рядку знаходиться три колонки.

Щоб змінити стандартний розмір колонок, необхідно додати клас mdl-cell—{number}-col, де замість number вказати число від 1 до 12. Клас додається для кожного DIV а. Порада: Даного класу відповідає модифікатор в просторі імен BEM. За більш докладними поясненнями відсилаємо вас до нашої попередньої статті Знайомство з методикою BEM, в якій Josh Medeski розповідає про плюси і мінуси даного підходу.

Перша колонка стала більше.

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

Дозвіл екранів на планшетах і смартфонах

Часто нам доводиться враховувати розмір колонок під різні розміри екранів. Як говорилося раніше, для планшетів MDL робить 8 колонок, а для смартфонів чотири. Колонки повинні займати весь доступний простір, в планшетах це 8, а в смартфонах чотири колонки.

У прикладі вище: в настільній версії перша колонка повинна бути більше за інших. На планшетах найбільшою буде друга колонка. А на мобільних пристроях перші дві колонки будуть знаходитися поруч, а третя буде під ними з шириною батьківського контейнера.

Службові класи

В обоймі MDL для сітки також заряджені службові класи або класи модифікатори. Серед них є ті, які ховають колонки на певних екранах:

mdl-cell—hide-desktop; ховає колонку на настільних дозволи екранів (> 840px)

mdl-cell—hide-tablet; ховає колонку на планшетних дозволи екранів (> 480px)

mdl-cell—hide-phone; ховає колонку на мобільних дозволи екранів (< 480px)

Інші класи відповідають за вирівнювання колонок:

mdl-cell—stretch; розтягує колонку за розмірами батьківського елемента, в нашому випадку це mdl-grid.

mdl-cell—top; притискає колонку до верхньої межі батьківського елемента.

mdl-cell—bottom; притискає колонку до нижньої межі його батьківського елементу.

Дані класи не обов’язково використовувати, просто знайте, що вони існують, може бути, коли-небудь вони стануть вам у пригоді. Приміром, додайте деякі з них для DIV ів колонок.

У цьому прикладі на настільних комп’ютерах третя колонка притиснута до нижньої межі батьківського блоку, на планшетах ховається друга колонка, а на мобільних пристроях ховається третя. Поекспериментуйте:

Висновок

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

Це не обов’язково, але я раджу вам використовувати функцію CSS calc() так само, як і методику BEM – структура, яка використовується в MDL для іменування класів. Такий підхід допоможе швидко налаштовувати сітку з допомогою готових структур MDL.