Практичне введення в material design lite від google
демо проект
Як підключити Material Design Lite в ваш проект
Якщо ви хочете підключити MDL в свій проект, вам необхідно:
Завантажити та створити вихідний код з MDL на GitHub.
Якщо ви використовуєте Bower в якості менеджера, для установки MDL в папку bower_components можна набрати наступну команду: bower install material-design-lite -save
Якщо ж ви використовуєте npm, для установки MDL в папку node_modules необхідно вбити наступну команду: npm install material-design-lite -save
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-typography-display-2 для h1 і .mdl-typography-display-1 для
зробить шрифт розміром 45px та 34px відповідно:
Як вибрати колір для вашого проекту в 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 в атрибуті href посилання link в шапці header вашого HTML документа.
Замінити indigo та pink на свої первинний і акцентних кольору відповідно.
Наприклад, ви вибрали бірюзовий як основний, а жовтий як акцентних кольору в палітрі. Нижче показано, як буде виглядати 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.
Також якщо ви хочете позбутися від зовнішніх відступів margin між колонок сітки, в MDL є чудовий клас, який необхідно додати до контейнера колонок - .mdl-grid-no-spacing:
Ви отримаєте щось типу:
Далі необхідно створити колонки всередині елемента .mdl-grid. Зробити це можна, додавши DIV з класом .mdl-cell. Нижче код, в якому створені три колонки:
Подивіться демо на CodePen. Якщо є необхідність, в MDL є класи, що дозволяють ховати колонки на окремих розмірах екранів:
mdl-cell-hide-desktop ховає колонки на екранах настільних комп'ютерів (більше 840px)
mdl-cell-hide-tablet ховає колонки на екранах планшетів (більше 480px)
mdl-cell-hide-phone ховає колонки на екранах мобільних пристроїв (less than and up to 480px)
Щоб побачити цю функцію в дії, подивіться на розділ Welcome в демо на екранах різних розмірів. І ви помітите, що на маленьких екранах декоративні рожеві точки зникають:
MDL компонент картки
Шаблон карткового UI набирає популярність протягом досить тривалого часу, особливу подяку можна виразити сайту Pinterest.
Як матеріальний дизайн описує компонент картку: «Картка це шар, який є точкою входу при запиті додаткової інформації. Картка може містити фото, текст і посилання на один суб'єкт. Material design spec »
Ви можете додавати різні типи контенту в одну картку, але стежте, щоб все було пов'язано однією тематикою. Також намагайтеся не розміщувати занадто багато інформації, посилань і кнопок в одній картці. Краще направляйте користувача на окрему сторінку, де він вже зможе знайти більше подробиць по конкретній темі. Нижче показано як додати просту картку на сторінку за допомогою MDL компонента картка:
Контент картки обертається в контейнер .mdl-card. За допомогою класу .mdl-shadow-dp можна контролювати величину відкидаємо тіні: приймаються значення 3, 4, 6, 8, або 16. Чим більше значення, тим більше відкидається тінь. Далі необхідно додати контейнери до наступних секціях картки:
До заголовку за допомогою .mdl-card__title
До медіа файлів за допомогою .mdl-card__media
До текстового контенту за допомогою .mdl-card__supporting-text
До дій за допомогою .mdl-card__actions, якщо в картці є кнопки або схожі елементи.
І нарешті, необхідно доповнити вашу структуру відповідним контентом, переконавшись, що тегу заголовка присвоєно клас .mdl-card__title-text. Нижче представлено демо:
Також можна перетворити комірки сітки в картки за допомогою класу .mdl-card, який необхідно додати до елементу з класом .mdl-cell:
Даний метод можна побачити в додатковому демо. Відмінний спосіб створення адаптивного плиткового макета:
висновок
MDL не універсальна фреймворк, як Bootstrap. У ньому не охоплюються всі компоненти і стилі, які можуть бути задіяні в вашому додатку. Тому, очікується, що основну частину коду доведеться писати самостійно.
Проте, бібліотека розвивається, і, може бути, в майбутніх релізах ще здивує нас новими функціями. У мережі також повно ресурсів по material design для дизайнерів і розробників, більшість з яких безкоштовні.
Поекспериментувати з MDL і створити свій власний проект ви можете, почавши з HTML шаблону з цієї статті і шаблонів з сайту MDL.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі