Изучение Material Design Lite: Сетка

Изучение Material Design Lite: Сетка

От автора: недавно мы уже прошлись по новому front-end фреймворку от Google Material Design Lite (MDL). Мы уяснили, что для создания веб-сайтов в MDL присутствует достаточно много компонентов настройки пользовательского интерфейса (UI), использующих основные принципы шаблона Material Design.

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

Приступим к делу

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

Стили к иконочному шрифту Material Design

Roboto – стандартный шрифт Material Design

Основные стили

Файлы JS

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Цветовая палитра

Добавив вышеуказанные файлы, мы можем приступить к созданию интерфейсов с цветовой палитрой, которая прописана в основных стилях. Файл основных стилей называется material.{primary}-{accent}.min.css. Основной наш цвет это бирюзовый, в то время как красный это акцентный цвет. Данные цвета используются в меню и кнопках. Они не влияют на сетку, если, конечно, не добавить специальные классы .mdl-color—primary и .mdl-color—accent.

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

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

Создание сетки

В MDL сетка наравне с меню и футером является частью компонента макет. Строится сетка при помощи Flexbox, данный фреймворк делает сетку более гибкой в отличие от стандартного, который до сих пор использует обтекания. Grid состоит из колонок; 12 для настольной версии, 8 для планшета (800px и ниже) и 4 колонки для смартфонов (ниже 500px).

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

<div class="content-grid mdl-grid">
<!-- сетка -->
</div>

Если вы раньше работали с Bootstrap, то класс mdl-grid это то же самое, что row или container. Однако в нашем случае ширина не задается заранее, а может настраиваться нами. Поэтому в наших стилях необходимо задать свойство max-width для сетки:

.content-grid {
  max-width: 960px;
}

Колонки

Для создания колонок необходимо внутрь контейнера с классом mdl-grid добавить от одного до нескольких DIV’ов (сколько вам нужно) с классом mdl-cell.

<div class="content-grid mdl-grid">
  <div class="mdl-cell">
    <!-- контент -->
  </div>	
  <div class="mdl-cell">
    <!—и тут контент -->
  </div>
  <div class="mdl-cell">
    <!—и вот тут -->
  </div>
</div>

На данном этапе у нас уже есть готовая сетка. Мы добавили три колонки, каждая из которых имеет ширину в 33.3333333333%. MDL предполагает, что в строке находится три колонки.

Чтобы изменить стандартный размер колонок, необходимо добавить класс mdl-cell—{number}-col, где вместо number указать число от 1 до 12. Класс добавляется для каждого DIV’а. Совет: Данному классу соответствует модификатор в пространстве имен BEM. За более подробными объяснениями отсылаем вас к нашей предыдущей статье Знакомство с методикой BEM, в которой Josh Medeski рассказывает про плюсы и минусы данного подхода.

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">
    <!-- контент -->
  </div>	
  <div class="mdl-cell mdl-cell--6-col">
    <!—и тут контент -->
  </div>
  <div class="mdl-cell mdl-cell--6-col">
    <!—и вот тут -->
  </div>
</div>

Первая колонка стала больше.

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

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

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

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--2-col-phone">
    <!-- контент -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
    <!—и тут контент -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--4-col-phone">
    <!—и вот тут -->
  </div>
</div>

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

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

В обойме 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’ов колонок.

<div class="content-grid mdl-grid">
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--top">
    <!-- контент -->
  </div>	
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-cell--hide-tablet">
    <!—и тут контент -->
  </div>
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--bottom mdl-cell--hide-phone">
    <!—и вот тут -->
  </div>
</div>

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

Заключение

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

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

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree