Матеріалізація - CSS Framework
Google Дизайн матеріалу має на меті добре працювати в Інтернеті, а також у мобільних програмах. Це набирає популярність у розробників, і якщо ви хочете прийняти його теж, є багато способів реалізувати Material Design на вашому сайті. Можна скористатися полімерним або кутовим, або можна використовувати Materialize.
Матеріалізація - це a CSS-фреймворк, заснований на принципах Material Design з підтримкою Sass для кращого розвитку. Вона несе стандартний стиль для легкого використання і має детальну документацію.
Ви можете знайти багато корисних компонентів у діалоговому вікні, модальному режимі, виборі дати, кнопках з матеріалами, паралаксі, картках тощо. Він також має безліч варіантів навігації, з яких можна вибрати, наприклад, спадний список, слайд у меню та вкладках. Матеріалізація також використовує a Система 12-grid із трьома запитами на медіафайли за умовчанням: максимальна ширина 600px - це мобільний пристрій, планшетний пристрій 992px і більше 992px вважається пристроєм на робочому столі.
Починаємо
Існує два способи розпочати роботу з матеріалом Materialize: use стандартний CSS або Сасс. Обидва джерела можна завантажити тут. Ви також можете отримати їх за допомогою наступної команди:
інсталюють установку bower
Після того, як ви отримаєте джерела, переконайтеся, що правильно пов'язуєте їх у файлі проекту або компілюєте джерело, якщо ви використовуєте версію Sass.
Особливості
У цьому розділі я поясню деякі функції, які пропонує Materialise.
1. Sass Mixins
Ця структура переносить Sass Mixins, який автоматично додає всі префікси браузера, коли ви пишете певні властивості CSS. Це відмінна можливість для забезпечення сумісність для всіх браузерів, з якомога меншою суєтою і кодом.
Перегляньте такі властивості анімації:
-webkit-анімація: 0.5s; -moz-анімація: 0.5s; -о-анімація: 0,5 с; -ms-animation: 0.5s; анімація: 0,5 с;
Ці рядки коду можна переписати за допомогою однієї лінії Sass mixin так:
@include animation (.5s);
Є приблизно 19 основних сумішей доступні. Щоб переглянути повний список, перейдіть до категорії Sass у розділі MIXINS на вкладці.
2. Текст потоку
Хоча інші фронтендні рамки використовують фіксований текст, Materialize реалізує дійсно чутливий текст. Розмір тексту і висота рядка також масштабуються відповідно для забезпечення зручності читання. Коли йдеться про менші екрани, то висота лінії збільшується.
Щоб скористатися текстом Flow, можна просто додати потік-текст класу на потрібний текст. Наприклад:
Це Текст потоку.
Ознайомтеся з демонстраційною версією тут, у розділі Текст потоку.
3. Ефект пульсації з хвилями
Матеріал Дизайн також поставляється з інтерактивним зворотного зв'язку, один помітний приклад є ефект пульсації. У Materialize цей ефект називається Хвилі. В основному, коли користувач натискає або торкається кнопки, карти або будь-якого іншого елемента, ефект з'являється. Хвилі можуть бути легко створені шляхом додавання хвилі-ефект класу на ваші елементи.
Цей фрагмент надає вам ефект хвиль.
Надіслати
Пульсації за замовчуванням сірі. Але в ситуації, коли у вас є темний колір фону, ви можете змінити колір. Щоб додати інший колір, просто додайте хвилі (колір) до елемента. Замініть "(колір)" на назву кольору.
Надіслати
Ви можете вибрати один з 7 кольорів: світлий, червоний, жовтий, оранжевий, фіолетовий, зелений і чирок. Ви завжди можете створити або налаштувати власні кольори, якщо ці кольори не відповідають вашим потребам.
4. Тінь
Щоб забезпечити взаємозв'язок між елементами, конструкція матеріалу рекомендує використовувати висоту на поверхнях. Матеріалізація забезпечує цей принцип з його z-глибина (номер) клас. Ви можете визначити глибину тіні, змінивши (номер) від 1 до 5:
Глибина тіней 3
Всі глибини тіней демонструються на малюнку нижче.
5. Кнопки та піктограми
У матеріалі Design є три основні типи кнопок: піднята кнопка, fab (кнопка плаваючої дії) і плоскі кнопки.
(1) Піднята кнопка
Кнопка "Піднята" є типовою кнопкою. Щоб створити цю кнопку, просто додайте a btn клас для ваших елементів. Якщо ви хочете надати йому ефект хвилі, коли натиснули або натиснули, виконайте наведені нижче дії.
Кнопка
Крім того, можна також надати кнопці піктограму ліворуч або праворуч від тексту. Для піктограми потрібно додати користувальницький з іменем і положенням класу іконок. Наприклад:
Завантажити
У наведеному вище фрагменті ми використовуємо mdi-file-file-download класу для піктограми завантаження. Є приблизно 740 різних ікон можна використовувати. Щоб побачити їх, перейдіть на сторінку Sass на вкладці Icons.
(2) Плаваюча кнопка
Плаваючу кнопку можна створити шляхом додавання btn-плаваючий класу і потрібну піктограму. Наприклад:
У матеріалі Design плоска кнопка часто використовується в діалоговому вікні. Щоб створити його, просто додайте btn-flat таким чином:
Відхилення
Крім того, кнопки можна вимкнути за допомогою вимкнено клас і зробив більшого використання btn-великий клас.
6. Сітка
Матеріалізація використовує стандарт 12-колонна реагує сітка системи. Відповідальність поділяється на три частини: малий для мобільного, середній (м) для таблеток і великий (л) для робочого столу.
Щоб створити стовпці, використовуйте s, m або l, щоб вказати розмір, а потім номер сітки. Наприклад, якщо ви хочете створити половинку розміру для мобільного пристрою, то вам слід включити s6 класу в макет. s6 виступає за малий-6 що означає 6 стовпців на невеликому пристрої.
Ви також повинні включити a col класу в створеному вами макеті і покласти його в елемент, який має рядок клас. Це означає, що макет можна правильно розмістити в стовпцях. Ось приклад:
У мене 12-колонки або повна ширина4-колонки (одна третина) тут4-колонки (одна третина) тут4-колонки (одна третина) тут
Ось результати:
За замовчуванням, col s12 є фіксованим розміром і оптимізований для всього розміру екрана, в основному такий же, як col s12 m12 l12. Але якщо потрібно вказати розмір стовпців для різних пристроїв. Все, що вам потрібно, - це перелічити додаткові розміри, наприклад:
Моя ширина завжди містить 12 стовпцівУ мене 12 стовпців на мобільному, 6 на планшеті і 9 на робочому столі
Це виглядає так:
Це лише кілька особливостей матеріалу Materialize. Щоб дізнатися більше про інші функції, перейдіть на сторінку документації.
