Создайте статичный сайт с помощью Material Design Lite

Начальная настройка HTML
Компонент MDL Layout
Компонент сетки
Настройка макета
Компонент карты
Отдельные страницы
ПЛАВНИК

Материал Дизайн Лайт это фронтенд шаблон сайта это позволяет вам легко добавлять внешний вид и дизайн материалов в ваши проекты. MDL был разработан для статических сайтов, так как мы хотели, чтобы он был независимым от фреймворка и набора инструментов. Однако это не означает, что вы не можете настроить его для своего макет сайта потребности - MDL это только отправная точка. В этом уроке мы создадим простой веб-сайт портфолио с блогом, разделом «О нас» и контактной формой.

Начальная настройка HTML

Сначала создайте пустую страницу HTML и в теге <head> документа добавьте теги <link> в гарнитуру Roboto, файл MDL CSS и шрифт значка MD, начиная с таблицы стилей гарнитуры.

Затем добавьте документ MDL CSS, который содержит все стили, которые мы будем использовать.

Цветовые схемы Material Design основаны на основном цвете и цветовых акцентах. Они указаны в имени файла CSS следующим образом: материал. {Основной} - {акцент} .min.css. Наша CDN содержит несколько комбинаций, основанных на общих оттенках Material Design. Здесь мы использовали серый и розовый:

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

Последний файл для ссылки на это файл JavaScript. Это должно быть добавлено внизу нашей HTML-страницы, перед закрывающим тегом </ body>.

Наконец, нам нужно включить тег <meta> viewport в <head> нашей страницы, чтобы мобильные устройства отображались правильно.

Компонент MDL Layout

Это базовая структура страницы, хотя поведение

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

Базовая структура страницы имеет элемент <div> с классами CSS mdl-layout и mdl-js-layout. Эти классы содержат все данные на странице. Внутри основного контейнера добавьте тег <header> для навигации с помощью класса mdl-layout__header. Наконец, внутри <header> напишите <div> с строкой mdl-layout__header-row, которая будет содержать содержимое заголовка.

Затем добавьте содержимое в mdl-layout__header-row. Начните с создания div с классом mdl-layout__title и добавьте заголовок веб-сайта. Затем добавьте тег nav с классом mdl-navigation и добавьте тег href для каждой из ваших ссылок. Каждой ссылке нужен класс MDL-навигации.

<span class = "mdl-layout__title"> Веб-сайт простого портфолио </ span> <nav class = "mdl-navigation"> <a class="mdl-navigation__link" href="#"> Портфолио </a> <класс = "mdl-navigation__link" href = "#"> Блог </a> <a class="mdl-navigation__link" href="#"> О </a> <a class = "mdl-navigation__link" href = "# "> Связаться </a> </ nav>

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

<! - Заголовок -> <div class = "mdl-layout-spacer"> </ div> <! - Навигация ->

Наконец, давайте добавим блок макета. Это будет удерживать содержимое слайда, которое появляется на меньших экранах и может быть открыто с помощью значка меню на любом размере экрана. Для этого вы в значительной степени копируете то, что мы имеем в навигации, за исключением того, что теперь проставка должна находиться за пределами тега <header>.

<header class = "mdl-layout__header"> <! - содержимое заголовка и навигация -> </ header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout__title"> Простой макет </ span > <nav class = "mdl-navigation"> <a class="mdl-navigation__link" href="#"> Портфолио </a> <a class="mdl-navigation__link" href="#"> Блог </ a > <a class="mdl-navigation__link" href="#"> О </a> <a class="mdl-navigation__link" href="#"> Связаться </a> </ nav> </ div>

Если у вас уже есть контент на странице, вы заметите, что на экранах мобильных устройств кнопка ящика плавает поверх контента. Это позволяет разработчикам определять, сколько полей / отступов появляется над содержимым. Чтобы сдвинуть содержимое вниз, вы должны сообщить MDL, что заголовок необходимо исправить, добавив класс mdl-layout - fixed-header в начальный контейнер <div>.

Чтобы завершить страницу, вам нужно добавить тег <main>, который будет содержать весь основной контент. Базовая структура должна выглядеть так:

<div class = "mdl-layout mdl-js-layout mdl-layout - fixed-header"> <header class = "mdl-layout__header"> <! - содержимое заголовка и навигация -> </ header> <div class = "mdl-layout__drawer"> <! - tray -> </ div> <main class = "mdl-layout__content"> <p> Hello world! </ p> </ main> </ div>

Компонент сетки

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

Сетка MDL была разработана, чтобы уменьшить обычную нагрузку на кодирование, необходимую для размещения контента на экранах нескольких размеров. Сетка определена и заключена в элемент контейнера с классом CSS mdl-grid. Он имеет 12 столбцов для настольных компьютеров, восемь для планшетов и четыре для мобильных устройств, каждый размер имеет предопределенные поля и желоба.

Чтобы использовать сетку, добавьте <div> в свой контейнер содержимого с присоединенным классом mdl-grid.

<main class = "mdl-layout__content"> <div class = "mdl-grid"> <p> Привет, мир! </ p> </ div> </ main>

Ячейки / столбцы будут определены внутри сетки. Здесь нужно добавить два CSS-класса: общий класс ячейки mdl-cell и mdl-cell - класс COLUMNS-col, где COLUMNS определяет ширину ячейки.

<div class = "mdl-cell mdl-cell - 12-col"> <p> Hello world! </ p> </ div> <div class = "mdl-cell mdl-cell - 4-col"> Ячейка 1 </ div> <div class = "mdl-cell mdl-cell - 4-col"> Ячейка 2 </ div> <div class = "mdl-cell mdl-cell - 4-col"> Ячейка 3 </ DIV>

В этом примере первая строка «Hello world!» полноразмерный (12 столбцов), а второй ряд имеет четыре ячейки (три столбца). Этот второй ряд будет оставаться сеткой столбцов три на три, пока не достигнет менее 480 пикселей.

Вы можете настроить таргетинг на устройства с определенными классами, добавив класс mdl-cell - COLUMNS-col-DEVICE. Если вы хотите, чтобы макет вашего планшета был похож на макет рабочего стола, вы должны добавить эти классы, чтобы последние две ячейки отображались в виде двух столбцов с полноразмерным перед ним:

Есть два типа нижнего колонтитула: мега и мини. В этом примере мы будем использовать мини-нижний колонтитул, который имеет структуру содержимого, состоящую из левого и правого разделов, с классами CSS для каждого (mdl-mini-footer__left-section и mdl-mini-footer__right-section соответственно). Внутри у нас есть <div> для нашего логотипа / заголовка и <div> для нашего списка ссылок, который отображается в виде строки.

Где мы добавим нижний колонтитул в разметку, зависит от желаемого эффекта. Если мы хотим зафиксировать нижний колонтитул, нам нужно добавить его после тега <main>. Если мы хотим, чтобы он прокручивался и появлялся после нашего контента, мы добавляем его внутри тега <main>.

<footer class = "mdl-mini-footer"> <div class = "mdl-mini-footer__left-section"> <div class = "mdl-logo"> Веб-сайт портфолио </ div> </ div> <div class = "mdl-mini-footer__right-section"> <ul class = "mdl-mini-footer__link-list"> <li> <a href="#"> Справка </a> </ li> <li> <a href = "#"> Конфиденциальность и условия </a> </ li> </ ul> </ div> </ footer>

Настройка макета

Сетка содержит все клетки. Каждую ширину ячейки можно настроить, хотя значения по умолчанию работают хорошо

Вы можете настроить макет, скрыв mdl-layout__drawer на рабочем столе. Для этого добавьте класс mdl-layout - small-screen-only в контейнер выдвижных ящиков. После этого удалите mdl-layout-spacer из <header>. Чтобы центрировать заголовок и навигацию, поместите nav в его собственную строку mdl-layout__header-row, а затем напишите некоторый пользовательский CSS.

.mdl-layout__header-row {padding: 0; justify-content: центр; }

Чтобы скрыть навигацию при прокрутке вниз по странице, теперь вы можете применить метод водопада к <header>, добавив класс mdl-layout__header - waterfall к <header>. Таким образом, пользователи могут сосредоточиться исключительно на контенте (помните, это будет работать только при наличии достаточного количества контента для прокрутки).

Окончательная структура должна выглядеть так:

<header class = "mdl-layout__header mdl-layout__header - waterfall"> <div class = "mdl-layout__header-row"> <span class = "mdl-layout__title"> Простая схема портфолио </ span> <div class = " mdl-layout-spacer "> </ div> </ div> <div class =" mdl-layout__header-row "> <nav class =" mdl-navigation "> <a class =" mdl-navigation__link "href =" # "> Портфолио </a> <a class="mdl-navigation__link" href="#"> Блог </a> <a class="mdl-navigation__link" href="#"> О </a> <классе = "mdl-navigation__link" href = "#"> Контакт </a> </ nav> </ div> </ header>

Компонент карты

Пример макета приложения с открытым навигационным блоком, а также схема поперечного сечения высоты его компонентов вдоль оси z

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

Сетка по умолчанию для MDL - три карты подряд для настольного компьютера, две для планшета и одна полноформатная для мобильного телефона. Если это та сетка, которую вы ищете, вам не нужно добавлять какие-либо пронумерованные классы mdl-cell - COLUMNS-col. Мы даже можем добавить эти классы ячеек столбцов непосредственно на карточки без отдельного контейнера <div>.

Чтобы добавить тень для карты, используйте mdl-shadow - 2dp class. Число дп в классе варьируется от 2 до 24, и оно контролирует глубину тени.

<div class = "mdl-cell mdl-card mdl-shadow - 4dp"> <div class = "mdl-card__title"> <h2 class = "mdl-card__title-text"> Заголовок примера </ h2> </ div > <div class = "mdl-card__media"> <img src = "../ images / photo.jpg" border = "0" alt = ""> </ div> <div class = "mdl-card__supporting-text" > Текст </ div> <div class = "mdl-card__actions mdl-card - border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Читать дальше </a> </ div> </ div>

Чтобы добавить максимальную ширину в сетку, вам нужно включить еще несколько пользовательских CSS. Карты являются адаптивными по умолчанию, поэтому вы можете добавить класс в родительскую сетку, и они будут настраиваться автоматически.

.portfolio-max-width {max-width: 900px; наценка: авто; }

Отдельные страницы

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

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

<div class = "mdl-cell mdl-cell - 12-элементная mdl-карта mdl-shadow - 4dp"> <! - заголовок, фотография и подпись -> <div class = "mdl-grid портфолио-копия "> <h3 class =" mdl-cell mdl-cell - 12-столбец mdl-типографии - заголовок "> Введение </ h3> <div class =" mdl-cell mdl-cell - 6-столбец mdl-card__supporting -text no-padding "> <p> Text </ p> </ div> <div class =" mdl-cell mdl-cell - 6-col "> <img src =" PHOTO "border =" 0 "alt = ""> </ div> </ div> </ div>

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

<div id = "tt1" class = "icon material-icons"> share </ div> <div class = "mdl-tooltip" for = "tt1"> Поделитесь своим контентом <br> через социальные сети </ div>

Последняя страница является контактной формой. Давайте посмотрим на компонент текстового поля, который по сути является расширенной версией <input type = "text"> и <input type = "textarea">. Есть несколько переходов, которые вы можете применить к текстовому полю (например, расширение ввода при нажатии кнопки). Вы также можете добавить атрибут и значение шаблона в <input> и соответствующее сообщение об ошибке в <span>.

<div class = "mdl-textfield mdl-js-textfield mdl-textfield - плавающая метка"> <input class = "mdl-textfield__input" pattern = "[AZ, az,] *" type = "text" id = "Name"> <label class = "mdl-textfield__label" for = "Name"> Name ... </ label> <span class = "mdl-textfield__error"> Только буквы и пробелы </ span> </ div>

Последний компонент - кнопка для формы. Есть много вариантов этого компонента, в том числе поднятые, значок и плоские кнопки. Здесь у нас есть простая поднятая кнопка отправки, которая показывает волновой эффект при нажатии. Различные классы указывают на эффекты, прикрепленные к кнопке.

<button class = "mdl-button mdl-js-button mdl-button - поднятый mdl-js-эффект ряби mdl-button - цветной" type = "submit"> Submit </ button>

ПЛАВНИК

Теперь, когда ваш макет готов, вы можете начать добавлять к нему определенные элементы дизайна. Кроме того, вы можете сначала набросать новый макет и попытаться воссоздать его, используя сетку. На сайте MDL есть множество шаблонов, на которые вы можете ссылаться. Есть много служебных классов на getmdl.io веб-сайт для каждого компонента, поэтому сначала проверьте там, прежде чем начать писать свой собственный CSS. Теперь приступайте к проектированию

Автор создал эксклюзивную заставку для этого урока:

Эта статья первоначально появилась в выпуске 277 сетевого журнала; подпишитесь здесь ,

Статьи по Теме:

Com/css?
Com/icon?