materialize css что это

Materialize

A modern responsive front-end framework based on Material Design

Speeds up development

We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.

User Experience Focused

By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.

We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.

Showcase

Checkout what people are creating with Materialize. Get inspired by these beautiful sites and you can even submit your own website to be showcased here.

Themes

Take a look at our official themes for Materialize.

Help Materialize Grow

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Join the Discussion

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

Источник

Getting Started

Learn how to easily start using Materialize in your website.

Download

Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.

Materialize

This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.

This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.

You can find all the versions of the CDN at cdnjs.

You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.

Bower

You can also get the latest release using bower. This release contains source files as well as the compiled CSS and JavaScript files. (bower is deprecated.)

Thanks for Downloading!

We hope you find Materialize useful in your next project. We would appreciate if you helped us spread the word about Materialize on our Social Media. Also if you want to support the development, you can donate to us.

Setup

Project Structure

After downloading, extract the files into the directory where your website is located. Your directory will look something like this.

You’ll notice that there are two sets of the files. The min means that the file is «compressed» to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

HTML Setup

Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage.

Templates

We have created some starter templates so you can easily start designing your website with minimal setup up time. Browse through our collection and download your best fit.

Starter Template

This is the simplest starter page with a Header, Call-to-Action, and Icon Features.

Parallax Template

This is the simplest starter page with a Header, Call-to-Action, and Icon Features.

Third-party Options

There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date.

Ruby Gem

See here for documentation on this gem.

Meteor Package

Ember Package

Sass Setup

This section is only relevant if you chose to download the Sass version of Materialize.

Compiling Sass

Help Materialize Grow

Join the Discussion

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

Источник

CSS фреймворк Materialize (Установка)

Экономия времени на разработку

Экономия времени при разработки несложного многостраничника или лендинга, за счет готовых компонентов и стилей, просто колоссальная. Посудите сами, вам больше не нужно самому писать JavaScript код, чтобы крутилась карусель, открывались табы и всплывали модальные окна. Просто надо добавить соответствующие классы к нужным элементам. Потраченное время на изучение данного фреймворка, с лихвой окупится на первом же проекте. Вам нужно знать основы HTML и CSS. Вся суть работы с фреймворком, состоит в постановке нужных классов и атрибутов в нужные вам элементы.

Что такое material design

На сайте material.io вы можете найти все основные правила материального дизайна вместе с наглядными примерами.

На этой странице можно посмотреть примеры сайтов, сделанных на данном фреймворке. Выглядит очень симпатично и делается все очень быстро.

Установка фреймворка

На вкладке Get Started вы увидите несколько вариантов установки:

Вариант #1). Скачать архив с CSS и JS файлами, указать пути к этим файлам на HTML странице. Кроме того необходимо добавить ссылки на шрифтовые иконки и библиотеку JQuery.

Источник

Материализация — Краткое руководство

Materialize — это библиотека компонентов пользовательского интерфейса, созданная с использованием CSS, JavaScript и HTML. Материализация многократно используемых компонентов пользовательского интерфейса помогает создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, придерживаясь современных принципов веб-дизайна, таких как переносимость браузера, независимость от устройства и постепенная деградация.

Некоторые из его характерных особенностей заключаются в следующем —

Встроенное адаптивное проектирование.

Стандартный CSS с минимальной площадью.

Новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, адаптированные в соответствии с концепциями Material Design.

Расширенные и специализированные функции, такие как карточки, вкладки, панели навигации, тосты и т. Д.

Бесплатно для использования и требует JQuery JavaScript библиотеки для правильной работы.

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

Встроенное адаптивное проектирование.

Стандартный CSS с минимальной площадью.

Расширенные и специализированные функции, такие как карточки, вкладки, панели навигации, тосты и т. Д.

Бесплатно для использования и требует JQuery JavaScript библиотеки для правильной работы.

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

Адаптивный дизайн

Materialize имеет встроенное адаптивное проектирование, поэтому веб-сайт, созданный с использованием Materialize, будет перепроектирован в соответствии с размером устройства. Классы материализации создаются таким образом, что веб-сайт может соответствовать любому размеру экрана.

Веб-сайты, созданные с использованием Materialise, полностью совместимы с ПК, планшетами и мобильными устройствами.

растяжимый

Материализация по дизайну очень минимальная и плоская. Он разработан с учетом того факта, что гораздо проще добавлять новые правила CSS, чем перезаписывать существующие правила CSS. Поддерживает тени и жирные цвета. Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.

И самое главное, это абсолютно бесплатно в использовании.

Материализация — настройка среды

В этой главе мы обсудим различные аспекты создания благоприятной среды для Материализации.

Попробуйте вариант онлайн

Мы настроили онлайн-среду Materialise Programming, чтобы вы могли скомпилировать и выполнить все доступные примеры в Интернете. Это дает вам уверенность в том, что вы читаете, и позволяет вам проверять программы с различными вариантами. Не стесняйтесь изменять любой пример и выполнять его онлайн.

Попробуйте следующий пример, используя наш онлайн-компилятор, доступный на CodingGround.

Для большинства примеров, приведенных в этом руководстве, вы найдете опцию Try it в разделах кода нашего сайта в верхнем правом углу, которые приведут вас к онлайн-компилятору. Так что просто используйте его и наслаждайтесь обучением.

Попробуйте следующий пример, используя наш онлайн-компилятор, доступный на CodingGround.

Как использовать материализоваться?

Есть два способа использования Materialise —

Локальная установка. Вы можете загрузить файлы materialize.min.css и materialize.min.js на свой локальный компьютер и включить их в свой HTML-код.

Версия на основе CDN. Вы можете включать файлы materialize.min.css и materialize.min.js в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

Перейдите по адресу http://materializecss.com/getting-started.html, чтобы загрузить последнюю доступную версию.

Затем поместите загруженный файл materialize.min.js в каталог своего веб-сайта, например, / js и materialize.min.css в / css.

Перейдите по адресу http://materializecss.com/getting-started.html, чтобы загрузить последнюю доступную версию.

Затем поместите загруженный файл materialize.min.js в каталог своего веб-сайта, например, / js и materialize.min.css в / css.

пример

Включите файлы CSS и JS в ваш HTML-файл следующим образом.

Это даст следующий результат.

CDN основанная версия

Вы можете включить файлы materialize.min.js и materialize.min.css в свой HTML-код непосредственно из сети доставки контента (CDN). cdnjs.cloudflare.com предоставляет контент для последней версии.

В этом руководстве мы используем CDN-версию библиотеки cdnjs.cloudflare.com.

пример

Перепишите приведенный выше пример, используя materialize.min.css и materialize.min.js из CDN cdnjs.cloudflare.com.

Это даст следующий результат —

Материализация — Цвета

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

использование

Ниже приведен список классов яркости / темноты, которые можно использовать для изменения применяемого цвета.

пример

В следующем примере показано, как использовать вышеуказанные классы для рендеринга фона или для изменения цвета текста. В случае фона добавьте классы как таковые, а в случае текста добавьте суффикс «-text» к классу цвета и префикс «text-» к классу молнии.

materialize_colors.htm

Результат

Материализация — Сетки

Materialise обеспечивает сетку с 12 колонками, чувствительными к жидкости.

Он использует классы стиля строк и столбцов для определения строк и столбцов соответственно.

Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

Определяет столбец с подклассами.

У col есть несколько подклассов, предназначенных для разных типов экранов.

Колонны для небольших экранных устройств

Ниже приведен список стилей на уровне столбцов для устройств с небольшим экраном, обычно смартфонов.

Sr.No.	Имя класса и описание
1

Определяет 1 из 12 столбцов с шириной 08,33%.

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.

Определяет 1 из 12 столбцов с шириной 08,33%.

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.

Колонки для средних экранов

Ниже приведен список стилей на уровне столбцов для устройств среднего экрана, обычно для планшетов.

Sr.No.	Имя класса и описание
1

Определяет 1 из 12 столбцов шириной 08,33%

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

Определяет 1 из 12 столбцов шириной 08,33%

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

Колонны для устройств с большим экраном

Ниже приведен список стилей на уровне столбцов для устройств с большим экраном, обычно для ноутбуков.

Sr.No.	Имя класса и описание
1

Определяет 1 из 12 столбцов с шириной 08,33%.

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

Определяет 1 из 12 столбцов с шириной 08,33%.

Определяет 2 из 12 столбцов с шириной 16,66%.

Определяет 3 из 12 столбцов с шириной 25,00%.

Определяет 4 из 12 столбцов с шириной 33,33%.

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

использование

Каждый подкласс определяет количество столбцов сетки, которые будут использоваться, в зависимости от типа устройства. Рассмотрим следующий фрагмент HTML.

Столбцы по умолчанию, которые будут использоваться на устройстве, равны 12, если подкласс не указан в атрибуте класса HTML-элемента.

пример

materialize_grids.htm

Результат

Материализация — Помощники

Materialise имеет несколько служебных классов, полезных для повседневных нужд проектирования.

Утилиты форматирования — например, усеченные, hoverable

пример

Результат

Материализация — СМИ

У Materialise есть несколько классов, чтобы сделать изображения и видео реагирующими на разные размеры.

responseive-img — создает изображение для изменения размера в зависимости от размера экрана.

video-container — для адаптивного контейнера со встроенными видео.

отзывчивое видео — делает видео HTML5 отзывчивым.

responseive-img — создает изображение для изменения размера в зависимости от размера экрана.

video-container — для адаптивного контейнера со встроенными видео.

отзывчивое видео — делает видео HTML5 отзывчивым.

пример

materialize_media.htm

Результат

Материализация — Тени

У Materialize есть несколько специальных классов для отображения контейнеров в виде бумажных карточек с тенью.

Sr.No.	Имя класса и описание
1

Удаляет тень элементов, имеющих z-глубину по умолчанию.

Стилизует контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет z-глубину 1.

Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет z-глубину 2.

Стилизует контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет z-глубину 3.

Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет z-глубину 4.

Стилизует контейнер для любого HTML-контента с тенью на 5 пикселей. Добавляет z-глубину 5.

Удаляет тень элементов, имеющих z-глубину по умолчанию.

Стилизует контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет z-глубину 1.

Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет z-глубину 2.

Стилизует контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет z-глубину 3.

Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет z-глубину 4.

Стилизует контейнер для любого HTML-контента с тенью на 5 пикселей. Добавляет z-глубину 5.

пример

materialize_shadows.htm

Результат

Материализация — Столы

Materialize можно использовать для отображения разных типов таблиц, используя различные стили над таблицами.

Sr.No.	Имя класса и описание
1

Представляет базовую таблицу без каких-либо границ.

Отображает раздетую таблицу.

Рисует таблицу с рамкой между рядами.

Рисует подсвеченную таблицу.

Рисует таблицу со всем текстовым центром, выровненным по таблице.

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

Представляет базовую таблицу без каких-либо границ.

Отображает раздетую таблицу.

Рисует таблицу с рамкой между рядами.

Рисует подсвеченную таблицу.

Рисует таблицу со всем текстовым центром, выровненным по таблице.

пример

materialize_tables.htm

Результат

Материализация — Типография

Materialise использует Roboto 2.0 в качестве стандартного шрифта. Его можно переопределить, используя следующий стиль CSS.

Ниже приведены примеры заголовков, цитат и свободного текста, но отзывчивый текст.

пример

materialize_typography.htm

Результат

Материализация — Значки

Компонент материализации значка представляет собой экранное уведомление, которое может быть числом или значком. Обычно используется, чтобы подчеркнуть количество предметов.

Sr.No.	Имя класса и описание
1

Определяет элемент как компонент значка MDL. Требуется для элемента span.

Добавляет «новый» класс к компоненту значка, дает ему фон.

Определяет элемент как компонент значка MDL. Требуется для элемента span.

Добавляет «новый» класс к компоненту значка, дает ему фон.

Ниже приведены примеры использования значков по-разному.

пример

materialize_badges.htm

Результат

Материализация — кнопки

Materialize предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений к кнопкам. В следующей таблице указаны доступные классы и их эффекты.

Sr.No.	Имя класса и описание
1

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

Создает круглую кнопку.

Устанавливает эффект плоского дисплея для кнопки, по умолчанию.

Создает большие кнопки.

Создает отключенную кнопку.

Представляет привязку или кнопку в качестве основной кнопки.

Устанавливает эффект щелчка пульсации, может использоваться в сочетании с любыми другими классами.

Создает круглую кнопку.

Устанавливает эффект плоского дисплея для кнопки, по умолчанию.

Создает большие кнопки.

Создает отключенную кнопку.

Представляет привязку или кнопку в качестве основной кнопки.

Устанавливает эффект щелчка пульсации, может использоваться в сочетании с любыми другими классами.

Источник

Верстать быстро и красиво: 15 популярных CSS фреймворков

furry.cat

Создание красивых стилей убивает уйму времени. CSS фреймворки выполняют ту же задачу на лету. Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность.

Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы:

Можно начать работу над проектом, не тратя время на копирование шаблонного кода или написание с чистого листа. CSS фреймворк – фундамент системы стилей.

Зачем нужен фреймворк?

Чем сложнее приложение, тем больше оснований воспользоваться готовым инструментом. Фреймворк необходим в следующих случаях:

Выбираем CSS фреймворк

Bootstrap

Популярнейшая библиотека компонентов. В 2018 году вышел Bootstrap 4. В нём ещё больше удобных утилит и модификаторов. Четвертая версия написана на SASS, так что можно использовать в разработке все преимущества препроцессоров.

Bootstrap – самый популярный CSS фреймворк

Главные фичи Bootstrap:

Foundation

Foundation – вероятно, второй по распространенности CSS фреймворк. Утонченный и гибкий инструмент подойдёт для очень больших проектов. Им пользуются Facebook, eBay, Mozilla, Adobe, HP, Cisco и Disney.

Фреймворк также построен на препроцессоре SASS и имеет отличную JavaScript-составляющую. Кривая обучения по сравнению с Bootstrap более крутая, но есть и преимущества.

Foundation – идеальное решение для крупных проектов

Главные фичи Foundation:

Этот легковесный (3.8 Кб) CSS-фреймворк создан Yahoo в 2014 году. За легкость приходится платить универсальностью. Pure не предлагает богатую библиотеку компонентов – он сконцентрирован на лейаутах и меню. И конечно, ни капли JavaScript.

Pure.css – легкое решение для отзывчивых макетов

Главные фичи Pure.css:

Bulma

Серьезный игрок на CSS рынке – Bulma. Гармоничная смесь качеств: маленький, отзывчивый, удобный и интуитивно понятный фреймворк. Написан на SASS, сетка на флексах, mobile-first подход, чистый CSS – JavaScript не прилагается.

Bulma – гармоничный CSS фреймворк

Главные фичи Bulma:

Semantic UI

Фреймворк, как следует из названия, трепетно относится к семантике интерфейсов. В Semantic UI 3000 настраиваемых переменных и 50 компонентов для создания сайтов.

Semantic UI – фреймворк для создания интерфейсов, понятных каждому

Главные фичи Semantic UI:

UI Kit

Еще один добротный CSS фреймворк с классическим набором полезностей и удобств. Небольшой размер, встроенные интерфейсные компоненты, поддержка препроцессоров, отзывчивая сетка и возможность кастомизации – всё это UI Kit.

UI Kit – чистый код и минимализм

Главные фичи UI Kit:

Materialize CSS

Детище Google появилось на свет в 2014 и до сих пор занимает лидирующие места в гонке фреймворков. Materialize CSS предлагает набор готовых к использованию компонентов в стиле Material Design.

Materialize CSS – современный фронтенд-фреймворк, основанный на Material Design

Главные фичи Materialize CSS:

Milligram

Один из самых миниатюрных CSS фреймворков. В сжатом виде Milligram весит всего 2Кб. Но мал, да удал – в вашем распоряжении полный набор инструментов верстальщика.

Milligram – миниатюрный CSS фреймворк.

Главные фичи Milligram:

Skeleton

Всего 400 строк кода – а на выходе мы имеем полноценный CSS фреймворк. Skeleton – это не только лейауты, как можно было бы подумать. Здесь весь стандартный набор: типографика, таблицы, формы, кнопки и т. д. Можно брать и создавать полноценный веб-сайт.

Skeleton – идеальный CSS фреймворк для небольших приложений

Главные фичи Skeleton:

Tailwind CSS

Низкоуровневый CSS фреймворк, открыты все возможности кастомизации. Tailwind CSS подходит для нестандартных дизайн-решений. Если вы имеете представление о концепции атомарного CSS, это именно то, что вам нужно. Фреймворк написан на PostCSS и конфигурируется на JS.

Tailwind CSS – низкоуровневый фреймворк с множеством утилитарных классов

Главные фичи Tailwind CSS:

Spectre

Spectre – классический компонентный CSS-фреймворк с элегантным дефолтным оформлением.

Spectre – элегантный CSS-фреймворк

Главные фичи Spectre:

Base – компактный и легкий, но довольно мощный фреймворк, который может стать надежным фундаментом для ваших проектов.

Base – надежный CSS-фундамент для вашего сайта

Picnic CSS

Небольшая библиотека статических и интерактивных компонентов. Picnic включает в себя сетку, формы, табы, всплывающие подсказки, модальные элементы и т. п.

Picnic – легкий CSS фреймворк с симпатичным дизайном

Главные фичи Picnic CSS:

Mustard UI

Ищете CSS фреймворк для новичков? Вы его нашли. Опенсорсный легкий Mustard создан специально для начинающих разработчиков.

Mustard UI – CSS фреймворк для начинающих верстальщиков

Главные фичи Mustard UI:

Dead Simple Grid

Однозначный чемпион в номинации Самый крохотный CSS фреймворк. Dead Simple Grid – это, по большому счету, и не фреймворк вовсе. Весит всего 250 байт(!) и состоит лишь из двух классов. Все, что умеет Dead Simple Grid, – строить сетки, но иногда только это вам и требуется.

Dead Simple Grid – убийственно простой инструмент для построения сеток

Главные фичи Dead Simple Grid:

Бонус

В качестве награды за прочтение еще 3 интересных CSS библиотеки, которые могут вам пригодиться:

Как сделать выбор?

CSS фреймворки предлагают много готового кода, уже проверенного в различных браузерах и на разных разрешениях, чем здорово экономят время. При выборе нужно задаваться не вопросом «какой из этих инструментов лучше?», а «какой из них лучше подходит для моего проекта?».

Основные значащие факторы:

Разобравшись в своих потребностях, вы без труда подберёте CSS фреймворк. Возможно, даже из нашего списка.

Источник

Читайте также: classic slim что это

Sr.No.	Имя класса и описание
1