Materialise - CSS дизайн материалов

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

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

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

Начиная

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

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

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

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

В этом разделе я объясню некоторые функции, которые предлагает Materialise.

1. Sass Mixins

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

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

 -webkit-анимация: 0,5 с; -моз-анимация: 0,5 с; -о-анимация: 0,5 с; -ms-анимация: 0,5 с; анимация: 0,5 с; 

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

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

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

2. Поток текста

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

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

 
Это поток текста.
 

Проверьте демо здесь в разделе Flow Text.

3. Волновой эффект с волнами

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

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

 Отправить 

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

 Отправить 

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

4. Тень

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

 
 
Глубина тени 3
  
 

Все глубины тени демонстрируются с изображением ниже.

5. Кнопки и значки

В Material Design есть три основных типа кнопок: поднятая кнопка, Fab (плавающая кнопка действия) а также плоская кнопка.

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

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

 кнопка 

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

 Скачать 

В приведенном выше фрагменте мы используем МДИ-файл-файла загрузки класс для значка загрузки. Есть около 740 разных иконок ты можешь использовать. Чтобы увидеть их, перейдите на страницу Sass на вкладке «Значки»..

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

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

В Material Design плоская кнопка часто используется в диалоговом окне. Чтобы создать его, просто добавьте БТН-плоский к вашей стихии вот так:

 снижение 

Кроме того, кнопки могут быть отключены с помощью отключен класс и сделал больше, используя БТН-большой учебный класс.

6. Сетка

Материализация использует стандарт 12-колоночная адаптивная сетка система. Отзывчивость делится на три части: маленький (s) для мобильного, средний (м) для планшета и большой (л) для рабочего стола.

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

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

 
 
У меня здесь 12 колонок или полная ширина
 
4 колонки (одна треть) здесь
 
4 колонки (одна треть) здесь
 
4 колонки (одна треть) здесь
 
 

Вот результаты:

По умолчанию, Col S12 фиксированный размер и оптимизирован для всех размеров экрана, в основном так же, как Col S12 M12 L12. Но если вы хотите указать размер столбцов для разных устройств. Все, что вам нужно сделать, это перечислить дополнительные размеры, например, так:

 
 
Моя ширина всегда имеет 12 столбцов везде
 
У меня 12 колонок на мобильном телефоне, 6 на планшете и 9 на рабочем столе
 
 

Вот как это выглядит:

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