Від автора: в 2014 Google опублікували специфікацію Material Design, візуального мови, мета якої-звести разом усталені принципи дизайну, безшовний користувальницький досвід на різних платформах і пристроях, а також технологічні і наукові інновації.

У липні 2015 світ побачив Material Design Lite, front-end бібліотеку, спроектовану для того, щоб полегшити перехід на material design. У цій статті я зупинюся на таких фундаментальних принципах і компонентах матеріального дизайну і на те, як їх можна задіяти з допомогою бібліотеки Material Design Lite (MDL):

Демо проект

Демо проект для цієї статті називається Kaptain Kitty. Це HTML шаблон, мета якого проілюструвати концепцію матеріального дизайну і його компоненти, про які я розповім в цій статті. Якщо, по мірі прочитання статті ви хочете розібратися в Material Design Lite, вам потрібно підібрати хороший редактор і сучасний браузер. Подивитися демо і його вихідні коди можна на CodePen:

Як підключити Material Design Lite в ваш проект

Якщо ви хочете підключити MDL в свій проект, вам необхідно:

Google рекомендує використовувати CSS і JS файли, розташовані на CDN. Даний метод ми використовували в демо. Перш за все, в шапці head HTML документа необхідно підключити CSS файл MDL, іконки Material Design і стилі проекту, в яких можна буде вносити власні зміни:

Далі, перед закриваючим тегом body необхідно додати посилання на JS файл MDL:

Типографіка в Material Design Lite

Для англійської мови і схожих на нього (латинські, грецькі та латинські літери) у матеріальному дизайні були вибрані шрифти Roboto і Noto.

Noto також підтримує «щільні» скрипти типу китайського, японського та корейського, а також «високі» скрипти типу мов південно-східної Азії та близького сходу, тобто арабська, гінді і т. д. Щоб підключити шрифт Roboto в свій проект, додайте тег link у верхівку head HTML документа:

Для латинських, грецьких та кириличних символів специфікація матеріального дизайну рекомендує типографський масштаб 12, 14, 16, 20 і 34. Застосувати друкарські принципи MDL можна, додавши набір спеціальних класів у розмітку. Приміром, .mdl-друкарня—display-2 h1 і .mdl-друкарня—display-1 для

зробить шрифт розміром 45px і 34px відповідно:

Title

Sub-title

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

Як вибрати колір для вашого проекту в MDL

Погляньте на файл MDL бібліотеки material.indigo-pink.min.css. Назва файлу відсилає нас до колірній палітрі Material Design в стилях. У колірній палітрі за замовчуванням використовується колір indigo в якості основного, а рожевий як акцентний. Але ви ні в якому разі не обмежуються цими квітами. Нижче представлені рекомендації матеріального дизайну про те, як розробити власну колірну палітру і як використовувати її в MDL.

Принципи підбору кольору в Material Design

Матеріальний дизайн любить поєднувати яскраві і приглушені кольори, тіні і підсвічування: «Колір повинен бути несподіваним і яскравим
Специфікація Google Material Design»

Тим не менш, це не означає, що можна використовувати довільні кольори на веб-сторінці. Все зовсім навпаки.
Матеріальний дизайн пропонує широкий вибір красивих гармонійних колірних палітр. Для полегшення підбору кольорів, кожен колір у палітрі має кілька рівнів і значень в шістнадцятковій системі. У рекомендаціях до матеріального дизайну налічується 500 основних кольорів. Інші кольори краще використовувати для акценту.

При розробці власної палітри матеріальний дизайн рекомендує використовувати три відтінки основної панелі і один акцентний колір вторинної палітри. Приклад:

Використовуйте акцентний колір тільки на посиланнях, основних кнопках і ще парочку компонентів типу перемикачів і слайдерів. Не використовуйте акцентний колір для тексту:

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

Після того, як ви зрозуміли принципи застосування кольорів у матеріальному дизайні, саме час підібрати круту колірну палітру для свого MDL проекту. Нижче я розповім, як це зробити.

Як налаштувати колірну палітру за умовчанням в Material Design Lite

Перейти з рідної колірної палітри індиго-рожевий на свою можна одним із способів. Якщо ви використовували Google CDN, як в демо вище, вам необхідно:

Наприклад, ви вибрали бірюзовий як основний, а жовтий як акцентний кольору в палітрі. Нижче показано, як буде виглядати URL до MDL стилям на CDN:

От і все! Якщо ж ви зберігаєте скомпільовані і минифицированные MDL файли на своєму сервері, тоді вам допоможе сайт MDL. Там ви знайдете Customize and Preview tool, за допомогою якого можна вибрати основний і акцентний кольору на інтерактивному колесі палітри. Потім можна завантажити CSS файл з вибраною темою і вставити його безпосередньо в проект:

В HTML демо до цієї статті використовується палітра за замовчуванням indigo-pink, але ви можете експериментувати з різними квітами одним з двох способів.

MDL компонент шар

MDL пропонує безліч широко використовуваних веб-компонентів, серед яких шари, кнопки, картки, перемикачі і т. д. Почніть створювати структура вашого HTML шаблону з допомогою шарів Material Design Lite. MDL шар поширюється на весь контейнер з класами .mdl-layout .mdl-js-layout. Почніть з коду нижче, вставте його відразу після відкриваючого тега body:

Для створення шарів у MDL використовується CSS flexbox. Тег з класом .mdl-layout flex є контейнером з властивістю flex-direction property: column. Шар складається з наступних підкомпонентів:

Як використовувати вкладки для навігації

Створити меню можна одним з наступних способів:

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

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

Щоб швидко створити хедер з вкладками вам знадобиться: Додати ще два класу до контейнера, який ми створили раніше .mdl-layout—fixed-header і .mdl-layout—fixed-tabs.

Зверніть увагу на те, як MDL використовує CSS класи з простору імен BEM.

Далі, змініть код хедера наступного:

І залишилося додати відповідні панелі з контентом:

У панелі з id=”fixed-tab-1″ заданий клас .is-active, то вона буде відображатись за замовчуванням.

Як розмістити додатковий контент в бічній панелі

У демо також використовується секція drawer. Drawer це бічна панель, яку можна ховати чи показувати по кліку на кнопку. Також можна зробити так, щоб панель була відкрита і фіксована, щоб її вміст завжди було видно.

Бічна панель відмінно підходить для віджетів, кнопок «поділитися» і додаткових посилань меню на веб-сторінки, щоб не захаращувати основний дизайн. У поєднанні з кодом, який ми додали вище, напишіть наступний шматок коду відразу після тега header, щоб додати компонент бічній панелі на шар:

Перегляньте ці шматочки коду в дії або погляньте на готове демо з вкладками і бічною панеллю.

Сітка в Material Design Lite

MDL використовує 12-ти колонкову сітку для настільних комп’ютерів, 8-ми колонкову сітку для планшетів (до 800px) і 4-х колонкову для екранів мобільних пристроїв (до 500px). Зробити контейнер сіткою можна, додавши клас .mdl-grid:

За замовчуванням контейнер для колонок сітки займає всю ширину екрану. Якщо вас це не влаштовує, обмежте ширину через стилі. Приміром, в демо до цієї статті реалізовані обидва варіанти, як повноекранна сітка, так і центроване блок:

Такого результату можна добитися, якщо обернути кожну секцію в різні .mdl-grid елементи, а окремій секції додати користувальницький клас CSS max-width: 960px.

.intro-section {
max-width: 960px;
}

Також якщо ви хочете позбутися від зовнішніх відступів margin між колонок сітки, в MDL є чудовий клас, який необхідно додати до контейнера колонок — .mdl-grid—no-spacing:

Ви отримаєте щось типу:

Далі необхідно створити колонки всередині елемента .mdl-grid. Зробити це можна, додавши DIV з класом .mdl-cell. Нижче код, в якому створені три колонки:

Подивіться демо на CodePen. Якщо є необхідність, в MDL є класи, що дозволяють ховати колонки на окремих розміри екранів:

Щоб побачити дану функцію в дії, подивіться на розділ Welcome в демо на екранах різних розмірів. І ви помітите, що на маленьких екранах декоративні рожеві точки зникають:

MDL компонент картки

Шаблон карткового UI набирає популярність протягом досить тривалого часу, можна виразити особливу подяку сайту Pinterest.

Як матеріальний дизайн описує компонент картку: «Картка це шар, який є точкою входу при запиті додаткової інформації. Картка може містити фото, текст і посилання на один суб’єкт. Material design spec»

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

Контент картки обертається в контейнер .mdl-card. З допомогою класу .mdl-shadow—{number}dp можна контролювати величину відкидаємо тіні: приймаються значення 3, 4, 6, 8, або 16. Чим більше значення, тим більше отбрасываемая тінь. Далі необхідно додати контейнери до наступних секціях картки:

І нарешті, необхідно доповнити вашу структуру відповідним контентом, переконавшись, що тегу заголовка присвоєно клас .mdl-card__title-text. Нижче представлено демо:

Також можна перетворити комірки сітки картки з допомогою класу .mdl-card, який необхідно додати до елементу з класом .mdl-cell:

Даний метод можна побачити в додатковому демо. Відмінний спосіб створення адаптивного плиткового макета:

Висновок

Стаття була цілком присвячена бібліотеці Material Design Lite і того, як застосувати її на практиці в реальному HTML шаблону.

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

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

Поекспериментувати з MDL і створити свій власний проект ви можете, почавши з HTML шаблону з цієї статті і шаблонів з сайту MDL.