Статьи

Создание домашней страницы в стиле Metro с помощью плагина Isotope JavaScript

Январь 7, 2019

Windows 8 от Microsoft, возможно, не является историей успеха с точки зрения пользовательского опыта, но она, безусловно, представила миру новую концепцию дизайна: Metro.

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

Как вы определяете язык дизайна «Метро»?

Metro — это кодовое название новейшего руководства по стилю Microsoft, или «язык дизайна». Хотя его простой, минималистичный подход был введен в некоторых программах Microsoft (таких как Windows Phone 7 и Windows 8), веб-дизайнеры и графические дизайнеры быстро приняли и включили в свои проекты.

Не будет спорным утверждать, что, наряду с концепциями дизайна Google, Metro помогла всемирной паутине создать тенденцию плоского дизайна .

Хотя Википедия определяет Metro как «язык дизайна на основе типографики» , мы можем утверждать, что это нечто большее. На мой взгляд, есть три важных характерных черты стиля Metro:

  • Простота: благодаря простым квадратным и прямоугольным коробкам и правильному использованию пустого пространства, основной характеристикой Metro является простота. Большинство графических и веб-дизайнеров уже имели тенденцию к простому дизайну, и ультра-минимализм Metro быстро завоевал популярность.
  • Типография: типография стала огромным элементом в веб-дизайне, особенно после 2010 года (кстати, я держу швейцарских дизайнеров в стороне — эти парни знали об этом все время!) Смелый шаг Microsoft по выдвижению типографии против скеоморфизма Apple был с радостью принят сообщества дизайнеров, делающие Metro успешным.
  • Яркость. Насколько мне известно, одним из величайших достижений Metro является использование матовых цветов. Сеть мучалась серебряными / хромированными градиентами, эффектами стекла и преувеличенно яркими цветами; и когда появился Metro, сообщества веб-дизайнеров быстро сохранили его спокойные, «плоские» цвета.

Помимо этих функций, Microsoft определяет Metro по пяти принципам :

  1. Гордость за мастерство
  2. Быстрый и жидкий
  3. Аутентично цифровой
  4. Делай больше с меньшими затратами
  5. Выиграй как один

Небольшая заметка о названии «Metro»: из-за проблем с авторским правом Microsoft пришлось изменить название этого языка дизайна на «Microsoft Design Language» или «Modern Design», и приложения называются «Modern Apps» вместо «Metro». Программы»; Однако имя застряло среди дизайнеров. В этой статье будет продолжено определение языка дизайна с его кодовым названием «Метро», но имейте в виду, что язык дизайна официально называется Modern Design .

Представляем изотоп: плагин JavaScript для магических макетов

Чтобы создать макет домашней страницы в стиле Metro в блоге WordPress, мы собираемся использовать фантастический плагин JavaScript под названием Isotope . Параметры макета плагина помогут нам создать красивую, отзывчивую домашнюю страницу Metro. (Плагин также работает как плагин jQuery, но мы собираемся использовать ванильный JavaScript .)

В этом уроке мы будем использовать бета-версию Isotope — точнее, 2.0.0-beta.8. Он отличается от первой версии, но в стабильных выпусках второй версии он должен вести себя так же.

PHP и HTML

Если бы мы делали учебник по HTML, я вставил бы следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<div class=»container js-isotope» data-isotope-options=»{ «itemSelector»: «.item», «layoutMod»: «fitRows» }»>
<div class=»item item-blue»><a class=»post-title» href=»#link#»>A Post About Isotope, Maybe?</a></div>
<div class=»item item-double item-purple»><a class=»post-title» href=»#link#»>WordPress is the Best!</a></div>
<div class=»item item-teal»><a class=»post-title» href=»#link#»>What Do You Think About Me?</a></div>
<div class=»item item-red»><a class=»post-title» href=»#link#»>About the Sochi Olympics Event</a></div>
<div class=»item item-green»><a class=»post-title» href=»#link#»>Help!</a></div>
<div class=»item item-double item-orange»><a class=»post-title» href=»#link#»>I Can’t Come Up with Many Post Titles!</a></div>
<div class=»item item-teal»><a class=»post-title» href=»#link#»>HTML5 Rocks, I Tell Ya!</a></div>
<div class=»item item-darkpurple»><a class=»post-title» href=»#link#»>Anybody Remember Caesar 3?</a></div>
<div class=»item item-skyblue»><a class=»post-title» href=»#link#»>I Love Table.</a></div>
<div class=»item item-blue»><a class=»post-title» href=»#link#»>I Love Lamp.</a></div>
<div class=»item item-double item-orange»><a class=»post-title» href=»#link#»>I Don’t Always Make Demos on CodePen…</a></div>
<div class=»item item-double item-red»><a class=»post-title» href=»#link#»>…But When I Do, They’re Just Beautiful!</a></div>
</div>

Но нам нужен код WordPress! Вот как мы это делаем в WordPress:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<?php
if( have_posts() ) : while( have_posts() ) :
  the_post();
  $item_class = «item»;
  $double_meta = get_post_meta( get_the_ID(), ‘metro-double’, true );
  if( ‘yes’ == $double_meta ) {
    $item_class .= ‘ item-double’;
  } $item_colors = array( ‘teal’, ‘blue’, ‘purple’, ‘darkpurple’, ‘red’, ‘orange’, ‘green’, ‘skyblue’ );
  $item_class .= ‘ item-‘ .
  <div class=»container js-isotope» data-isotope-options=»{ «itemSelector»: «.item», «layoutMode»: «fitRows» }»>
  <div class=»<?php echo $item_class; ?>»></div>
</div>
<?php endwhile;
<div class=»container»>
  <div class=»item item-double item-green»>
  <?php _e(‘Sorry, no posts matched your criteria.’);
</div>
<?php endif;

Несколько замечаний по коду:

  • Обратите внимание на класс js-isotope и атрибут data-isotope-options в нашем контейнере DIV. Это помогает нам запустить плагин Isotope без какого-либо кода JavaScript.
  • Если вы хотите, чтобы одна из ваших публикаций выделялась, вы можете удвоить ее ширину, добавив мета-запись с ключом metro-double и значением yes .
  • Вы можете добавить больше цветов в массив (и код CSS). Я использовал цвета, которые нашел здесь .

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body {background:#EEE;font-family:Segoe UI,Arial,sans-serif;}
 
.container {width:50em;margin:1em auto;padding:.1999em;}
 
.item {width:12em;height:12em;background-color:white;float:left;margin:.2em;background-size:cover;padding:1em;}
.item-double {width:24.4em;}
 
.item-teal {background-color:#008299;}
.item-blue {background-color:#2672EC;}
.item-purple {background-color:#8C0095;}
.item-darkpurple {background-color:#5133AB;}
.item-red {background-color:#AC193D;}
.item-orange {background-color:#D24726;}
.item-green {background-color:#008A00;}
.item-skyblue {background-color:#094AB2;}
 
.item-teal:hover {background-color:#00A0B1;}
.item-blue:hover {background-color:#2E8DEF;}
.item-purple:hover {background-color:#A700AE;}
.item-darkpurple:hover {background-color:#643EBF;}
.item-red:hover {background-color:#BF1E4B;}
.item-orange:hover {background-color:#DC572E;}
.item-green:hover {background-color:#00A600;}
.item-skyblue:hover {background-color:#0A5BC4;}
 
.item a, .item .not-found {color:#FFF;font-size:2em;line-height:1.3;text-decoration:none;display:inline-block;width:100%;height:100%;}
 
@media only screen and (max-width:50em) {
.container {width:100%;margin:0;}
}
Помните: это руководство содержит базовый код CSS для создания макета в стиле Metro, но они могут не подойти для вашего дизайна. Если вы чувствуете, что что-то не так, вам следует немного поиграть с кодом, чтобы он работал для вашей собственной темы.

JavaScript

Знаешь что? Нам не нужен код JavaScript! Поскольку мы добавили имя класса .js-isotope в наш контейнер DIV и предоставили опции Isotope с атрибутом data-isotope-options , нам больше ничего не нужно делать. Isotope просто находит класс .js-isotope , получает параметры и запускает сам себя.

Аккуратно, верно?

Результат

Результат, приведенный ниже, на самом деле является выводом HTML, но то же самое будет применяться, когда вы поместите код WordPress выше в свою тему:

Заключительные слова

Metro-подобный интерфейс не трудно имитировать в веб-дизайне, и, как вы можете видеть, он выглядит красиво. (Вы можете сделать даже лучше, улучшив мой код!)

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

Что вы думаете о языке современного дизайна? Что вы думаете об изотопе? Что вы думаете об этом уроке? Поделитесь своими комментариями ниже!

39
Share: