Изучение 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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Файлы JS

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

Добавив вышеуказанные файлы, мы можем приступить к созданию интерфейсов с цветовой палитрой, которая прописана в основных стилях. Файл основных стилей называется 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. Опционально можно добавить еще собственный класс, если нам потребуется изменять стандартные стили:

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

Колонки

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

В обойме 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() так же, как и методику BEM – структура, которая используется в MDL для именования классов. Такой подход поможет быстро настраивать сетку с помощью готовых структур MDL.

Автор: Thoriq Firdaus

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Метки: , ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree