На цьому уроці ми розглянемо різні способи, що дозволяють створити інтерфейс сайту в стилі "Modern UI" (Metro).
Поняття інтерфейсу "Modern UI"
Modern UI - це інтерфейс компанії Microsoft, який складається з панелей з прямими кутами, що містять великий текст і виконаними в яскравій кольоровій гамі. В даному інтерфейсі також важливу роль відіграє анімація (плавні переходи, ефекти при натисканні і переміщенні і ін.). Інтерфейс "Modern UI" спочатку був розроблений для Windows Phone, а потім вже з'явився в операційних системах Windows 8, веб-сайті компанії Microsoft і в інших додатках. Зараз багато веб-розробники використовують стиль "Moder UI" для створення інтерфейсів сайтів або планують його використовувати.
Створити інтерфейс веб-сайту в стилі "Modern UI" можна вручну (за допомогою користувальницької збірки) або скористатися готовими рішеннями.
Призначена для користувача збірка Bootstrap для реалізації інтерфейсу схожого на Modern UI
Щоб зробити стандартний інтерфейс Bootstrap більш схожим на "Moder UI" (Metro), нам необхідно прибрати закруглені кути у компонентів Bootstrap. Даний процес детально показаний на нижчих зображеннях.
Крок 1. Зміна радіуса (@ border-radius-small. @ Border-radius-small. @ Border-radius-large) для більшості компонентів Bootstrap.
Крок 2. Зміна радіуса (@ pager-border-radius) для компонента "Pager" (Пейджер).
Крок 3. Зміна радіуса (@ badges-border-radius) для компонента "Badges" (Значки).
Після настройки користувальницької збірки, необхідно натиснути на кнопку "Compile and Download" і підключити призначену для користувача збірку Bootstrap до вашого веб-проекту.
Завантажити готову збірку Bootstrap без округлених кутів можна за посиланням розташованої нижче.
Але компонент Bootstrap "Label" (Мітки) залишився з закругленими кутами через те, що призначена для користувача збірка не передбачає такої можливості. Щоб це обійти необхідно створити свій файл CSS і підключити його після Bootstrap CSS. У цьому файлі необхідно створити клас label з властивістю border-radius: 0px; .
Готові рішення на основі платформи Bootstrap, що реалізують інтерфейс в стилі "Modern UI"
1. Metro UI CSS 2.0.
Дана збірка призначена для створення сайтів з інтерфейсом схожим на Windows 8 від Сергія Піменова з України. Metro UI CSS 2.0 містить велику кількість додаткових компонентів, які роблять інтерфейс дійсно схожим на "Modern UI".
2. Bootmetro.
Даний проект призначений для створення веб-сторінки подібної стартовому меню Windows 8. На жаль Bootmetro знаходиться на стадії альфа версії, що обмежує його використання на робочому сайті.
3. Metro-bootstrap.
Ця збірка, що складається з CSS файлів і шрифтів, призначена для надання веб-розробникам і дизайнерам компонентів, що реалізують деякі елементи інтерфейсу "Moder UI".
4. Metro UI Template.
Шаблон для реалізації інтерфейсу "Moder UI". На жаль, проект припинив своє розвиток і для скачування надана тільки стара версія цього шаблону.
5. Cosmo. Cosmo - це тема для Bootstrap, яка робить його компоненти візуально схожими на компоненти інтерфейсу "Modern UI".
6. Платні шаблони (теми):