От автора: недавно мы уже прошлись по новому front-end фреймворку от Google Material Design Lite (MDL). Мы уяснили, что для создания веб-сайтов в MDL присутствует достаточно много компонентов настройки пользовательского интерфейса (UI), использующих основные принципы шаблона Material Design.
В данной серии уроков мы протестируем эти компоненты MDL более подробно, а начнем мы с Сетки, так как она составляет основу любого front-end фреймворка.
Приступим к делу
Перед тем как использовать Сетку, необходимо подключить требуемые MDL библиотеки – стили и файлы JS. Существует множество различных способов сделать это, но самый простой – прямое подключение файлов через ссылки с серверов Google. И нам потребуются:
Стили к иконочному шрифту Material Design
Roboto – стандартный шрифт Material Design
Основные стили
Файлы JS
|
1 2 3 4 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link href='//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. Опционально можно добавить еще собственный класс, если нам потребуется изменять стандартные стили:
|
1 2 3 |
<div class="content-grid mdl-grid"> <!-- сетка --> </div> |
Если вы раньше работали с Bootstrap, то класс mdl-grid это то же самое, что row или container. Однако в нашем случае ширина не задается заранее, а может настраиваться нами. Поэтому в наших стилях необходимо задать свойство max-width для сетки:
|
1 2 3 |
.content-grid { max-width: 960px; } |
Колонки
Для создания колонок необходимо внутрь контейнера с классом mdl-grid добавить от одного до нескольких DIV’ов (сколько вам нужно) с классом mdl-cell.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 рассказывает про плюсы и минусы данного подхода.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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, а в смартфонах четыре колонки.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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’ов колонок.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
