Материализация – Материальный Дизайн CSS Framework

Google Material Design нацелен на работу в Интернете, а также в мобильных приложениях. Он завоевывает популярность среди разработчиков, и если вы хотите принять его, есть много способов реализовать Material Design на вашем сайте. Вы можете использовать Polymer или угловатыйили вы можете использовать материализовать,

Materialize – это CSS-фреймворк, основанный на принципах Material Design с поддержкой Sass для лучшей разработки. Он имеет стиль по умолчанию для удобного использования и имеет подробную документацию.

Вы можете найти множество полезных компонентов: диалог, модальный режим, средство выбора даты, кнопки материала, параллакс, карточки и многое другое. Он также имеет много вариантов навигации, которые вы можете выбрать, такие как раскрывающийся список, слайд в меню и вкладки. Materialize также использует 12-сеточную систему с 3 медиазапросами по умолчанию для размера экрана: максимальная ширина 600 пикселей – это мобильное устройство, планшетное устройство 992 пикселей и более 992 пикселей – это настольное устройство.

Рекомендуемое чтение: что есть в Foundation 4 Responsive Framework

Начиная

Есть два способа начать работу с Materialise: использовать стандартный CSS или Sass. Оба источника могут быть загружены Вот, Вы также можете получить их с помощью беседки с помощью следующей команды:

Бауэр установить материализоваться

После того, как вы получите исходные тексты, убедитесь, что правильно связали их с файлом проекта или скомпилировали исходный код, если вы используете версию Sass.

Читайте также: Как легко устанавливать, обновлять и удалять веб-библиотеки с помощью Bower

особенности

В этом разделе я объясню некоторые функции, которые предлагает Materialise.
1. Sass Mixins
Этот фреймворк содержит Sass Mixins, который автоматически добавляет все префиксы браузера, когда вы пишете определенные свойства CSS. Это отличная возможность – обеспечить совместимость во всех браузерах с минимальным количеством суеты и кода, насколько это возможно.

Посмотрите на следующие свойства анимации:

-Вебкит-анимация: 0,5 с;
-моз-анимация: 0,5 с;
-о-анимация: 0,5 с;
-ms-анимация: 0,5 с;
анимация: 0,5 с;

Эти строки кода могут быть переписаны одной строкой Sass mixin, например:

анимация @include (.5s);

Есть около 19 основных миксинов. Чтобы увидеть полный список, перейдите к пререкаться категория на вкладке MIXINS.
2. Поток текста
В то время как другие среды интерфейса используют фиксированный текст, Materialize реализует действительно отзывчивый текст. Размер текста и высота строки также масштабируются для обеспечения удобочитаемости. Когда дело касается экранов меньшего размера, высота линии увеличивается.

Чтобы использовать поток текста, вы можете просто добавить класс потока текста на нужный текст. Например:

Это текстовый поток.

Оформить заказ Вот в разделе Flow Text.
3. Волновой эффект с волнами
Material Design также поставляется с интерактивной обратной связью, одним из ярких примеров является волновой эффект. В Материализации этот эффект называется Волнами. В основном, когда пользователи нажимают или касаются / нажимают кнопку, карточку или любой другой элемент, появляется эффект. Волны могут быть легко созданы, добавив класс эффектов волн к вашим элементам.

Этот фрагмент дает вам эффект волн.

Разместить

Рябь по умолчанию серая. Но в ситуации, когда у вас темный цвет фона, вы можете изменить цвет. Чтобы добавить другой цвет, просто добавьте волны- (цвет) к элементу. Замените “(цвет)” на имя цвета.

Разместить

Вы можете выбрать один из 7 цветов: светлый, красный, желтый, оранжевый, фиолетовый, зеленый и бирюзовый. Вы всегда можете создать или настроить свои собственные цвета, если эти цвета не соответствуют вашим потребностям.
4. Тень
Чтобы обеспечить связь между элементами, Material Design рекомендует использовать возвышение на поверхностях. Materialise предоставляет по этому принципу класс z-глубина- (число). Вы можете определить глубину тени, изменив (число) с 1 на 5:

Все глубины тени демонстрируются с изображением ниже.
5. Кнопки и значки
В Material Design есть три основных типа кнопок: поднятая кнопка, fab (кнопка с плавающим действием) и плоская кнопка.

(1) Поднятая кнопка

Поднятая кнопка является кнопкой по умолчанию. Чтобы создать эту кнопку, просто добавьте класс btn к своим элементам. Если вы хотите придать ему волновой эффект при нажатии или нажатии, сделайте следующее:

кнопка

Кроме того, вы также можете дать кнопке значок слева или справа от текста. Для иконки вам нужно будет добавить кастом тег с именем класса имя и положение. Например:

Скачать

В приведенном выше фрагменте мы используем класс mdi-file-file-download для иконки загрузки. Вы можете использовать около 740 различных иконок. Чтобы увидеть их голову к пререкаться страница на вкладке «Значки».

(2) Плавающая кнопка

Плавающую кнопку можно создать, добавив btn-плавающий класс и желаемый значок. Например:

В Material Design плоская кнопка часто используется в диалоговом окне. Чтобы создать его, просто добавьте btn-flat в ваш элемент следующим образом:

снижение

Кроме того, кнопки можно отключить с помощью отключенного класса и увеличить их с помощью класса btn-large.
6. Сетка
Materialise использует стандартную 12-колоночную адаптивную сеточную систему. Отзывчивость делится на три части: маленькая (s) для мобильного телефона, средняя (m) для планшета и большая (l) для настольного компьютера.

Чтобы создать столбцы, используйте s, m или l, чтобы указать размер, а затем номер сетки. Например, если вы хотите создать макет половинного размера для мобильного устройства, вам следует включить класс s6 в свой макет. s6 обозначает small-6, что означает 6 столбцов на маленьком устройстве.

Вы также должны включить класс col в создаваемый макет и поместить его в элемент, имеющий класс строки. Это так, чтобы макет можно было правильно разместить в столбцах. Вот пример:

Вот результаты:
По умолчанию col s12 имеет фиксированный размер и оптимизирован для всех размеров экрана, в основном аналогично col s12 m12 l12. Но если вы хотите указать размер столбцов для разных устройств. Все, что вам нужно сделать, это перечислить дополнительные размеры, например, так:

Вот как это выглядит:
Это всего лишь несколько особенностей Материализации. Чтобы узнать больше об их других функциях, перейдите на документация стр.