Приветствую всех читателей!

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

Прежде всего хочу сказать что такое фреймворк - это набор готовых решений которые можно использовать при разработке своего сайта.

Начну с того что входит в этот фреймворк. Первое чем понравился лично мне этот фрейм ворк это адаптивность которая позволяет сайтам изменяться в зависимости от устройства на котором этот сайт будет просматриваться. В этом плане фреймворк Materialize схож со знаменитым Bootstrap'ом. Второе, что мне тоже понравилось, это его стили оформления, а они в частности заимствованны у Google. В составе фреймворка есть много компонентов, таких как календарь, слайдер, табы (закладки), хинты/тултипы (всплывающие позсказки), стилизация комбобокса, карточки и много мелких, но не менее классных плющек.

Теперь обо всем по порядку, начну с того с чем лично уже работал и что мне в этом понравилось и что нет:

СЛАЙДЕР

Слайдер тут крутой, он не требует особых усилий в настройке и работает из "коробки". Особо понравился в нем эфект листания изображений с мобильника. Работает он без косяков и легок в весе, а большее программисту и не надо :-) Единственный косяк это на мобике часть картинки съедается, но думаю в финальной версии разработчики это исправят (я уже им написал :-) )

HTML код:

<div class="slider">
  <ul class="slides">
    <li>
      <img src="http://lorempixel.com/580/250/nature/1"> <!-- случайная картинка -->
      <div class="caption center-align">
        <h3>Здесь наш большой заголовок!</h3>
        <h5 class="light">Тут наш маленький слоган.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/2"> <!-- случайная картинка -->
      <div class="caption left-align">
        <h3>Заголовок с левой стороны!</h3>
        <h5 class="light">Тут наш маленький слоган.</h5>
      </div>
    </li>
  </ul>
</div>

JQuery код:

$(document).ready(function(){
  $(".slider").slider();
});

ТАБЫ

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

HTML код:

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Тест 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Тест 2</a></li>
      <li class="tab col s3"><a href="#test3">Тест 3</a></li>
      <li class="tab col s3"><a href="#test4">Тест 4</a></li>
	</ul>
  </div>
  <div id="test1" class="col s12">Тест 1</div>
  <div id="test2" class="col s12">Тест 2</div>
  <div id="test3" class="col s12">Тест 3</div>
  <div id="test4" class="col s12">Тест 4</div>
</div>

JQuery код:

$(document).ready(function(){
  $("ul.tabs").tabs();
});

КАЛЕНДАРЬ

Это не жуть как нужный элемент но весьма круто смотрится когда при вводе даты в форму (особенно на мобиле) у вас выскакивает небольшой календарик и вы или пользователь, который зашел на ваш сайт может выбрать в пару кликов нужную дату, причем дата у вас будет уже в нужном формате буть то 11-01-2015 или 11 января 2015. Т.е. пользователь не напишет как ему вздумается, а будет все строго по правилам и при этом не принужденно и удобно.

HTML код:

<div class="row datepicker-body">
  <input type="date" class="datepicker">
</div>

JQuery код календаря руссифицированный и неделя начинается с "понедельника":

$(document).ready(function(){
  $(".datepicker").pickadate({
    selectMonths: true,
    selectYears: 15,
    monthsFull: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
    monthsShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
    weekdaysFull: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
    weekdaysShort: ["Вск", "Пнд", "Втр", "Срд", "Чтв", "Птн", "Сбт"],
    weekdaysLetter: [ "Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ],
    today: "Сегодня",
    clear: "Очистить",
    close: "Закрыть",
    showMonthsShort: false,
    firstDay: 1
  });
});

СТИЛИЗАЦИЯ КОМБОБОКСА

Если бы не мобилки этот компонент и вовсе не нужен был бы. Но мобилки есть! А все дело собственно в том, что на мобилах весьма своеобразный способ работы с выпадающими списками ввода, вот у яблочных мобил вылазиет внизу на пол экрана значения которые можно выбрать и все бы нормально только это портит общую картину и если не стоит запрет на масштабирование, экран обязательно сконцентрируется на этом поле. Что не есть профессионально.

HTML код:

<div class="row">
  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Выберите опцию</option>
      <option value="1">Опция 1</option>
      <option value="2">Опция 2</option>
      <option value="3">Опция 3</option>
    </select>
  </div>
</div>

JQuery код:

$(document).ready(function(){
  $(".input-field>select").material_select();
});

ТУЛТИПЫ

Тултипы в Materialize очень крутое дополнение, т.к. порой чтобы реализовать свою всплывающую подсказку нужно лепить на сайт JQuery UI либо весь либо вырезать его из большого, иногда не используемого, феймворка, а тут он уже свой и не требует больших знаний в программировании чтобы его включить. Я вообще не любитель подключать к сайту кучу всяких библиотек, т.к. это нагружает страницу, а время загрузки сайта всегда является важных фактором.

HTML код:

<div class="row">
  <a class="btn tooltipped col s2 l2" data-position="bottom" data-delay="50" data-tooltip="Я тултип">Внизу</a>
  <a class="btn tooltipped col s2 offset-s1 l2 offset-l1" data-position="top" data-delay="50" data-tooltip="Я тултип">Вверху</a>
  <a class="btn tooltipped col s2 offset-s1 l2 offset-l1" data-position="left" data-delay="50" data-tooltip="Я тултип">Слева</a>
  <a class="btn tooltipped col s2 offset-s1 l2 offset-l1" data-position="right" data-delay="50" data-tooltip="Я тултип">Справа</a>
</div>

JQuery код:

$(document).ready(function(){
  $(".tooltipped").tooltip({delay: 50});
});

КАРТОЧКИ

Вы, я думаю, видели в Google Plus как оформлены новости. Вот и Materialize позаимствовал у Google эту фишку. Карточки очень удобны когда вы представляете какой то товар или туже новость с использованием картинки и небольшого описания, причем область использования карточек может быть абсолютно любой будь то статьи в блоге или же горящие путевки на курорт. Тут все зависит от вашей задачи. При этом главный плюс карточек это то что они могут выстраиваться в ряд при просмотре с мобилы. Ну тут вам точно надо бы сходить в гугл плюс (если еще не видели) чтобы оценить это удобство.

Заголовок карточки

Любая ссылка

Заголовок карточки

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

HTML код:

<div class="row">
  <div class="col s6">
    <div class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="/assets/images/everything/blog/materialize/office.jpg">
      </div>
      <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Заголовок карточки <i class="mdi-navigation-more-vert right"></i></span>
        <p><a href="#">Любая ссылка</a></p>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Заголовок карточки <i class="mdi-navigation-close right"></i></span>
        <p>Вот еще немного информации об этом товаре, который открывается только один раз щелкнув.</p>
      </div>
    </div>
  </div>
</div>

СЕТКА

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

Сетка как я уже писал выше тут не отличается от бутстрапа, но если в дубстрапе нет таких полезностей как слайдер нафиг нам бутстрап такой))) разбивка страницы в этом фреймворке так же делится на 12 столбцов и в зависимости от вашей задачи позволяет не хуже чем у бутстрапа настроить адаптивность разрабатываемого сайта. Прикинув сколько вам нужно вывести определенных элементов на странице в один горизонтальный ряд вы просто прописываете у них класс пум-пум-N где N количество "прикинутых" вами элементов разделенное на 12. Допустим в одном горизонтальном ряду вы хотите выводить по 4 элемента, тем самым 4 делим на 12 и получаем 3, после чего в классах элементов пишем пум-пум-3 и получаем нужный вам вариант.

Тут же стоит учесть что сайт адаптивный и в этом случае нам нужно использовать и другие пум-пум-лэ-N чтобы все красиво отображалось на разных устройствах (с разными разрешениями экранов).

Таблица размеров экранов

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

Класс .s* (где * число определяющее ширину контейнера) активируется тогда, когда разрешение экрана <= 600px. Это в основном портретный вариант мобилы, т.е. когда мобила у вас в нормальном вертикальном положении.

Класс .m* используется, когда разрабатываемый сайт просматривается с экрана разрешение которого больше 600px но меньше или равно 992px. Это к примеру планшетники и не большие ноутбуки.

И последний класс .l* используется когда разрешение экрана устройства больше 992px. Это компы с современными экранами.

Несколько примеров использования сетки

Стандартная сетка имеет 12 колонок. Независимо от размера браузера, каждая из этих колонок всегда будет иметь одинаковую ширину.

HTML код:

<div class="row">
  <div class="col s1 grid-example"><span class="flow-text">1</span></div>
  <div class="col s1 grid-example"><span class="flow-text">2</span></div>
  <div class="col s1 grid-example"><span class="flow-text">3</span></div>
  <div class="col s1 grid-example"><span class="flow-text">4</span></div>
  <div class="col s1 grid-example"><span class="flow-text">5</span></div>
  <div class="col s1 grid-example"><span class="flow-text">6</span></div>
  <div class="col s1 grid-example"><span class="flow-text">7</span></div>
  <div class="col s1 grid-example"><span class="flow-text">8</span></div>
  <div class="col s1 grid-example"><span class="flow-text">9</span></div>
  <div class="col s1 grid-example"><span class="flow-text">10</span></div>
  <div class="col s1 grid-example"><span class="flow-text">11</span></div>
  <div class="col s1 grid-example"><span class="flow-text">12</span></div>
</div>

Еще примеры адаптивной сетки

HTML код:

<div class="row">
  <div class="col s12"><span class="flow-text">s12</span></div>
  <div class="col s12 m4 l2"><span class="flow-text">s12 m4 l2</span></div>
  <div class="col s12 m4 l8"><span class="flow-text">s12 m4 l8</span></div>
  <div class="col s12 m4 l2"><span class="flow-text">s12 m4 l2</span></div>
  <div class="col s12 m6 l3"><span class="flow-text">s12 m6 l3</span></div>
  <div class="col s12 m6 l3"><span class="flow-text">s12 m6 l3</span></div>
  <div class="col s12 m6 l3"><span class="flow-text">s12 m6 l3</span></div>
  <div class="col s12 m6 l3"><span class="flow-text">s12 m6 l3</span></div>
</div>

В целом о сетке все, что нужно знать я рассказал, осталось только привести не большой пример ее применения. Но ко всему о сетке добавлю: я лично не учу на изусь цифры с расширениями экранов для устройств, т.к. они хоть и точны но весьма условны, достаточно при работе с фреймворком просто ориентироваться в этих классах, чтобы понимать как это тестировать. Лично я всегда проверяю на несколько раз как сделанная мной верстка смотрится на мобиле, а так же простым изменением размера окна браузера слежу за поведением элементом которые используют адаптивную сетку. Так же хочу сказать, что в Google Chrome есть отличный инструмент в родном devTools для просмотра разрабатываемых сайтов с различных "устройств", хотя конечно это все только условно, и больше чем просмотр с реального iPhone, ни какой devTools не скажет, но это отличный инструмент если у вас нет под рукой мобилы, причем в devTools есть даже эмуляция Touch Screen. Вобщем посмотрите Вам понравится этот инструмент, как альтернатива планшетнику или смартфону.

Данный урок подготовлен для вас командой сайта www.e-mw.ru.

Поделиться с друзьями: