Материализирайте - CSS рамка на материалния дизайн

на Google Дизайн на материалите има за цел да работи добре в мрежата, както и в мобилни приложения. Той набира популярност при разработчиците и ако искате да го възприемете, има и много начини за реализиране на Material Design на вашия сайт. Можете да използвате Polymer или Angular, или да използвате Materialize.

Материализираме е CSS рамка, базирана на принципите на Материалния дизайн с поддръжка на Sass за по-добро развитие. Той носи подразбиращ се стил за лесно използване и разполага с подробна документация.

Можете да намерите много полезни компоненти в: диалог, модал, избор на дата, бутони за материали, паралакс, карти и други. Освен това има много опции за навигация, от които можете да избирате, като падащо меню, плъзгане в меню и раздели. Материализира се също и с a 12-решетъчна система с 3 заявки за размер на медиите по подразбиране: максимална ширина 600px е мобилно устройство, 992px таблетно устройство и повече от 992px се счита за десктоп устройство.

Приготвяме се да започнем

Има два начина да започнете с Materialize: use стандартен CSS или дръзки приказки. И двата източника могат да бъдат изтеглени тук. Можете също така да ги получите с помощта на следната команда:

 материалите се инсталират 

След като получите източниците, уверете се, че ги свързвате правилно във файла на проекта или компилирайте източника, ако използвате версията на Sass.

Характеристика

В този раздел ще обясня някои функции, които предлага Материали.

1. Sass Mixins

Тази рамка носи Sass Mixins, която автоматично добавя всички префикси на браузъра, когато пишете някои CSS свойства. Това е страхотна възможност да се гарантира съвместимост във всички браузъри, с колкото се може по-малко шум и код.

Разгледайте следните свойства на анимацията:

 -webkit-анимация: 0.5s; -moz-анимация: 0.5s; -о-анимация: 0.5s; -ms-анимация: 0.5s; анимация: 0.5s; 

Тези редове от код могат да бъдат пренаписани с един ред от Sass mixin така:

 @include animation (.5s); 

Има около 19 основни миксина на разположение. За да видите пълния списък, преминете към категорията Sass в MIXINS раздел.

2. Текст на потока

Докато други фронтенд рамки използват фиксиран текст, Materialize изпълнява истински отзивчив текст. Размерът на текста и височината на линията също се мащабират, за да се поддържа четливостта. Когато става дума за по-малки екрани, височината на линията се увеличава.

За да използвате Flow Text, можете просто да добавите потока на текста клас на желания текст. Например:

 
Това е текст на потока.
 

Проверете демото тук в секцията Текст на потока.

3. Ефект на вълни с вълни

Материал Дизайн също идва с интерактивна обратна връзка, един забележителен пример е пулсации ефект. В Materialize този ефект се нарича вълни. По принцип, когато потребителите кликнат или докоснат / докоснат бутон, карта или друг елемент, ефектът се появява. Вълните могат лесно да бъдат създадени чрез добавяне вълни ефект клас върху елементите ви.

Този фрагмент ви дава ефекта на вълните.

 Изпращане 

По подразбиране вълните са сиви. Но в ситуация, в която имате фон от тъмен цвят, може да искате да промените цвета. За да добавите друг цвят, просто добавете waves- (цвят) към елемента. Заменете "(цвят)" с име на цвят.

 Изпращане 

Можете да избирате от 7 цвята: светло, червено, жълто, оранжево, пурпурно, зелено и синьо. Винаги можете да създавате или персонализирате свои собствени цветове, ако тези цветове не отговарят на вашите нужди.

4. Сянка

За постигане на връзки между елементите, Design Design препоръчва използването на надморска височина на повърхностите. Материалите изпълняват този принцип с неговия Z-depth- (брой) клас. Можете да определите дълбочината на сянката, като промените (номер) от 1 на 5:

 
 
Дълбочина на сянката 3
  
 

Всички дълбочини на сянката се демонстрират с изображението по-долу.

5. Бутони и икони

В Материалния дизайн има три основни типа бутони: повдигнат бутон, Fab (плаващ бутон за действие) и плосък бутон.

(1) Бутон с повдигнати бутони

Бутонът за повдигане е бутон по подразбиране. За да създадете този бутон, просто добавете a BTN клас към вашите елементи. Ако искате да му дадете ефекта на вълната, когато е щракнал или натиснат, продължете с това:

 бутон 

Като алтернатива можете да дадете на бутона икона отляво или отдясно на текста. За иконата ще трябва да добавите персонализиран с име на класа икона и позиция. Например:

 Изтегли 

В горния фрагмент използваме MDI-файлове на файлове за сваляне клас за иконата за изтегляне. Има около 740 различни икони можеш да използваш. За да ги видите, отидете на страницата Sass в раздела Икони.

(2) Плаващ бутон

Плаващ бутон може да бъде създаден чрез добавяне BTN плаващи клас и желаната икона. Например:

В материалния дизайн плоският бутон често се използва в диалоговия прозорец. За да я създадете, просто добавете BTN равнина към елемента ви така:

 упадък 

Освен това бутоните могат да бъдат деактивирани с хора с увреждания клас и направи по-голямо използване BTN-голям клас.

6. Решетка

Материалите използват стандарт Реагираща 12-колонна мрежа система. Отговорността е разделена на три части: малки (и) за мобилни, средни (м) за таблетки и голям (л) за десктоп.

За да създадете колони, използвайте s, m или l, за да укажете размера, последван от номера на мрежата. Например, когато искате да създадете половин размер за мобилно устройство, трябва да включите S6 клас в оформлението ви. S6 означава малки 6 което означава 6 колона на малко устройство.

Трябва също да включите a седловина клас в оформлението, което създавате и го поставяте в елемент, който има ред клас. Това е така, че оформлението може да бъде поставено правилно в колони. Ето един пример:

 
 
Имам 12 колони или пълна ширина тук
 
Тук са 4 колони (една трета)
 
Тук са 4 колони (една трета)
 
Тук са 4 колони (една трета)
 
 

Ето резултатите:

По подразбиране, col 12 е с фиксиран размер и оптимизиран за цял размер на екрана, по същество същият като col 12 m12 l12. Но ако искате да определите размера на колоните за различни устройства. Всичко, което трябва да направите, е да изброите допълнителните размери така:

 
 
Моята ширина винаги има 12 колони навсякъде
 
Имам 12 колони на мобилни, 6 на таблет и 9 на работния плот
 
 

Ето как изглежда това:

Това са само някои от характеристиките на Materialize. За да научите повече за другите им функции, отворете страницата с документацията.