Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Material Design Lite від Google — нова бібліотека для веб-розробників

Material Design Lite від Google — нова бібліотека для веб-розробників Концепція Material Design (матеріальний дизайн) вже добре знайома користувачам мобільних пристроїв на операційній системі Android. А 6 липня 2015 року Google представив бібліотеку Material Design Lite, яка допоможе ще й розробляти сайти в аналогічному стилі.

Представлена бібліотека є сучасною інтерпретацією Polymer Paper Elements, проте до фреймворку Polymer вона не прив'язана: проект автономний і сумісний з більшістю наявних фреймворків для роботи над веб-додатками і сайтами. Базується бібліотека Material Design Lite на CSS, JavaScript і HTML.

У Material Design Lite (MDL) веб-розробники можуть знайти готові шаблони для своїх проектів, окремі компоненти (меню, кнопки, слайдери, картки). Для початку роботи з MDL досить підключити файли CSS і JavaScript бібліотеки до кожної сторінки розроблюваного проекту. Зробити це можна різними способами, наприклад, за допомогою мета-тегів <link> та <script> у тегу <head> сторінок:

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Далі можна переходити безпосередньо до використання можливостей MDL на сайті або у веб-додатку. Наприклад, щоб використувати один із компонентів бібліотеки на HTML-сторінці, необхідно додати в бажаному місці стандартний тег, що відповідає бажаному компоненту, скажімо, <button> <div> <ul>. Далі залишається вказати в стилі обраного компонента один із наявних у бібліотеці CSS-класів.

У Google очікують, що нова бібліотека допоможе фахівцям правильно розставляти елементи на сторінках, використовувати потрібні анімації тощо. Material Design Lite працює практично в будь-якому сучасному браузері, щоправда, на сайті бібліотеки (getmdl.io) наголошується, що офіційно не підтримується браузер IE8.

Теги:
material design lite, бібліотека material design lite, бібліотека mdl, material design lite від google