Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite
Webdesign

Осваиваем Material Design Lite (MDL): Сетки

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Navigation

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Недавно мы с вами познакомились с новым фреймворком Google, предназначенным для фронтенд разработки - Material Design Lite (MDL). Мы увидели, что MDL идет на с набором полезных UI элементов для создания сайтов, с учетом спецификации  и принципов Material Design.

В этой серии уроков, мы рассмотрим отдельные компоненты MDL более детально, и начнем мы с системы Сеток, которая является основой для любого фронтенд фреймворка. Что же, давайте начнем!

Начало

Прежде чем мы начнем использовать Сетку, или любые компоненты из MDL, нам сначало нужно подключить компоненты библиотеки – таблицу стилей и JavaScript файл. Это можно сделать оп разному, но наиболее простой способ, это поставить ссылку на CDN Google. Эти файлы включают в себя:

  • Стили к шрифту иконок в Material Design
  • Roboto – стандартный шрифт для Material Design
  • Основной набор стилей
  • файл JavaScript

Цветовые Схемы

После того как мы добавили ссылки, мы можем начинать работать с интерфейсом, используя цвета, собранные в главной таблице стилей. Основная таблица стилей называется согласно спецификации имен  material.{primary}-{accent}.min.css. Наш основной цвет – это бирюзовый (teal – чирок, цвет по названию птички), а красный цвет – для выделения. Эти цвета используются в таких элементах, как элементы навигации и кнопки, но они не будут влиять на Сетку, до тех пор пока мы не добавим классы .mdl-color--primary и .mdl-color--accent.

Вы можете изменить комбинацию цветов, на любую, которая вам нравится, обратившись к спецификации по цвету для Material Design, например: material.purple-pink.min.css,material.blue_grey-pink.min.css и material.blue-orange.min.css.

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

Material Design color wheel
Скопируйте ссылку на стили

Построение Сетки

Сетка в MDL, наряду с Меню и Футером являются частью Макета. Сетка в MDL,  строится с использованием Flexbox, данный подход делает макет более универсальным, чем традиционный в котором используется float. Сетка содержит столбцы; двенадцать столбцов для «десктопа», 8 столбцов для планшета (800px) и меньше, и четыре столбца для смартфонов (меньше 500px).

Начинаем работу с сеткой, используя простой div. Затем добавляем класс mdl-grid, и дополнительно можно добавить еще собственный класс, если нам потребуется изменять стандартные стили:

Вы можете думать о mdl-grid как  эквиваленте классов row и container из Bootstrap. Но в отличие от их предопределенности, в MDL значение width полностью зависит от нас. Таким образом в таблице стилей, вам необходимо задать значение max-width, то которое вы считаете нужным:

Колонки

Чтобы сделать колонки, добавьте внутри mdl-grid еще один или несколько div элементов (или другие элементы на ваше усмотрение) добавив им класс  mdl-cell.

Теперь, мы сделали сетку. У нас есть три колонки. Каждая колонка выровнена и ее ширина равна 33.33333333333%. MDL полагает, что мы добавляем три колонки на строку.

Чтобы изменить стандартный размер столбцов, на нужно добавить класс  mdl-cell--{number}-col с числом в диапазон от 1 до 12. Добавьте класс к каждому div:

Совет: Данному классу соответствует модификатор в пространстве имен BEM. а более подробными объяснениями отсылаем вас к нашей предыдущей статье Введение в методологию БЭМ, в которой Josh Medeski рассказывает про плюсы и минусы данного подхода.

Теперь первый столбец больше в размерах.

MDL пытается разместить колонки в рамках вьюпорта, соответствующим образом, изменяя их размер. Когда будет уменьшаться размер экрана на планшете и мобильном (вы можете посмотреть, нажав на иконки), вы увидите, что первая колонка так и остается большей. Две другие смещаются вниз, и они по размеру равны половине первой колонки.

Разрешение экранов на планшетах и смартфонах

Часто, нам нужно контролировать размер столбцов сетки, в зависимости от размеров вьюпорта. Как, уже говорилось выше, MDL использует сетку в восемь столбцов для экранов планшетов, и 4 столбца для экранов смартфонов.  Соответственно, максимальное число столбцов должно быть 8 и 4 для планшетов и смартфонов.

Рассмотрим предыдущий пример: в настольной версии первая колонка должна быть больше остальных. На планшетах самой большой будет вторая колонка. А на мобильных устройствах первые две колонки будут находиться рядом, а третья будет под ними с шириной родительского контейнера.

Служебные классы

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

  • mdl-cell--hide-desktop; скрывают колонку на экране компьютера с размером (> 840px)
  • mdl-cell--hide-tablet; скрывают колонку на экране планшета с размером (> 480px)
  • mdl-cell--hide-phone; скрывают колонку на экране смартфона с размером (< 480px)

Другой набор для выравнивания столбцов:

  • mdl-cell—stretch; растягивает колонку по размерам родительского элемента, в нашем случае это mdl-grid.
  • mdl-cell—top; прижимает колонку к верхней границе родительского элемента.
  • mdl-cell—bottom; прижимает колонку к нижней границе родительского элемента.

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

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

Заключение

Сетка MDL очень хорошо продумана. С учетом того, что она опирается на Flexbox, а не на обтекания, ее легче настраивать: устанавливать выравнивания, назначать порядок колонок и изменять их размер, все это можно спокойно делать и не волноваться, что что-то поедет или затронет соседние элементы.

Это не обязательно, но я советую вам использовать функцию CSS calc() так же, как и методику БЭМ – структура, которая используется в MDL для именования классов. Такой подход поможет вам быстро настраивать сетку с помощью готовых структур MDL.

В следующем уроке, мы рассмотрим другие компоненты MDL. Оставайтесь на связи!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.