С тех пор, как Windows 8 выпустила свои первые фотографии нового дизайна, люди сходили с ума от стиля метро. Люди любят это, это современно, это чисто, это просто и позволяет действительно легко использовать на мобильных устройствах, особенно на планшетных устройствах.
В 2013 году будет тенденция, что вы начнете видеть больше сайтов, использующих этот стиль метро в своих проектах. Но для веб-сайтов это хорошая идея, работает ли этот стиль для дизайна различных веб-сайтов.
В этом уроке мы собираемся создать инструментальную панель в стиле metro, для этого мы будем использовать очень полезный плагин jQuery, называемый gridster .
Gridster
Gridster позволит вам создать сетку из нескольких столбцов с помощью перетаскивания. Все расположение сетки позаботится плагин, все , что вам нужно сделать , это определить , сколько строк и столбцы каждой коробка будет распространяться через. Затем определите высоту и ширину одного блока, и плагин определит, насколько большим должен быть каждый блок.
Лучшее в этом плагине jQuery — функция перетаскивания блоков сетки, которая позволяет вашим посетителям полностью настраивать макет различных блоков сетки. Если бы вы использовали это с файлами cookie Javascript, вы можете сохранить макет на компьютере пользователя, чтобы он выглядел одинаково при каждом посещении вашего сайта.
Первое, что вам нужно сделать, чтобы создать сетку в стиле метро, вам нужно бесплатно скачать Gridster по ссылке ниже.
Gridster
Используя Gridster
Чтобы использовать Gridster, он похож на любой другой плагин jQuery, все, что вам нужно сделать, это включить его на страницу, и теперь у вас будет доступ к объекту gridster.
Внутри объекта гридстера мы определим параметры для сетки, здесь мы можем настроить поля виджета, размер виджета, минимальные строки, минимальные столбцы, максимальную высоту виджета, максимальную ширину виджета.
Простейшая версия использования этих опций — просто определить поле виджета и размер одного виджета. Затем плагин будет использовать эти значения для изменения размера сетки, чтобы убедиться, что она помещается на экране.
Ниже приведен код, который можно использовать для определения сетки, в которой один виджет имеет размер 150px x 150px с полем 10px вокруг поля.
<script src="src/jquery.gridster.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [150, 150]
});
});
</script>
С помощью Javascript гридстера, прикрепленного к списку, теперь мы можем создать HTML-код для использования Javascript.
Важной частью использования Gridster является определение 4 различных атрибутов, которые сообщат плагину, где разместить виджеты и насколько они будут большими.
- data-row — Определяет начальную строку виджета.
- data-col — определяет начальный столбец виджета.
- data-sizex — определяет количество столбцов, по которым будет проходить виджет.
- data-sizey — Определяет количество строк, по которым растягивается виджет.
<div class="wrapper gridster"> <ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"></li> <li data-row="1" data-col="3" data-sizex="2" data-sizey="3"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="7" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="8" data-sizex="1" data-sizey="2"></li> <li data-row="2" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="6" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="6" data-sizex="3" data-sizey="1"></li> </ul> </div>
Приведенный выше HTML создает сетку из 12 блоков, каждый из которых расположен в разных местах и имеет разные размеры. Это создает начало сетки стилей метро, все, что нам нужно сделать, это стилизовать блоки, используя цвета метро, и добавить значки для блоков.
Добавление Metro Styling
Есть несколько цветов, которые всегда используются в стилевом стиле, используйте следующий CSS, чтобы определить цвета шрифта и цвета фона.
.font-blue, .font-blue-link a {color: #2d89ef;}
.font-blueLight, .font-blueLight-link a {color: #eff4ff;}
.font-blueDark, .font-blueDark-link a {color: #2b5797;}
.font-green, .font-green-link a {color: #00a300;}
.font-greenLight, .font-greenLight-link a {color: #99b433;}
.font-greenDark, .font-greenDark-link a {color: #1e7145;}
.font-red, .font-red-link a {color: #b91d47;}
.font-yellow, .font-yellow-link a {color: #ffc40d;}
.font-orange, .font-orange-link a {color: #e3a21a;}
.font-orangeDark, .font-orangeDark-link a {color: #da532c;}
.font-pink, .font-pink-link a {color: #9f00a7;}
.font-pinkDark, .font-pinkDark-link a {color: #7e3878;}
.font-purple, .font-purple-link a {color: #603cba;}
.font-darken, .font-darken-link a {color: #1d1d1d;}
.font-lighten, .font-lighten-link a {color: #d5e7ec;}
.font-white, .font-white-link a {color: #ffffff;}
.font-grayDark, .font-grayDark-link a {color: #525252;}
.bg-blue {background-color: #2d89ef;}
.bg-blueLight {background-color: #eff4ff;}
.bg-blueDark {background-color: #2b5797;}
.bg-green {background-color: #00a300;}
.bg-greenLight {background-color: #99b433;}
.bg-greenDark {background-color: #1e7145;}
.bg-red {background-color: #b91d47;}
.bg-yellow {background-color: #ffc40d;}
.bg-orange {background-color: #e3a21a;}
.bg-orangeDark {background-color: #da532c;}
.bg-pink {background-color: #9f00a7;}
.bg-pinkDark {background-color: #7e3878;}
.bg-purple {background-color: #603cba;}
.bg-darken {background-color: #1d1d1d;}
.bg-lighten {background-color: #d5e7ec;}
.bg-white {background-color: #ffffff;}
.bg-grayDark {background-color: #525252;}
Добавление значков в сетку
Чтобы добавить значки в виджеты сетки, мы будем использовать CSS: перед псевдоклассом добавить новый элемент на страницу и поместить фоновое изображение для каждого из значков, которые мы хотим добавить.
Это позволит расположить значок в середине виджета.
.gridster li a:before{
display: block;
height:50px;
width:100%;
position: absolute;
top:35%;
left:0;
right:0;
}
.recent:before{ content:''; background:url('img/calendar.png') no-repeat center; }
.twitter:before{ content:''; background:url('img/twitter.png') no-repeat center; }
.facebook:before{ content:''; background:url('img/facebook.png') no-repeat center; }
.about:before{ content:''; background:url('img/about.png') no-repeat center; }
.snippets:before{ content:''; background:url('img/scissors.png') no-repeat center; }
.resources:before{ content:''; background:url('img/library.png') no-repeat center; }
.googleplus:before{ content:''; background:url('img/google.png') no-repeat center; }
.contact:before{ content:''; background:url('img/forward.png') no-repeat center; }
.articles:before{ content:''; background:url('img/folder_open.png') no-repeat center; }
.tutorials:before{ content:''; background:url('img/tutorials.png') no-repeat center; }
.pinterest:before{ content:''; background:url('img/pinterest.png') no-repeat center; }
.archives:before{ content:''; background:url('img/calendar.png') no-repeat center; }
Добавление текста в нижнюю часть окна
Чтобы добавить текст внизу страницы, мы можем использовать CSS: после псевдокласса, чтобы добавить контент в виджет.
Преимущество использования псевдоклассов для добавления контента в виджет, так что нам нужно только определить класс CSS для виджета сетки, и он будет представлен как с иконкой, так и с контентом.
.gridster li a:after{
position: absolute;
bottom: 5px;
left:0;
right:0;
}
.recent:after{ content:'Recent Articles'; }
.twitter:after{ content:'Twitter'; }
.facebook:after{ content:'Facebook'; }
.about:after{ content:'About'; }
.snippets:after{ content:'Snippets'; }
.resources:after{ content:'Resources'; }
.googleplus:after{ content:'Google Plus'; }
.contact:after{ content:'Contact'; }
.articles:after{ content:'Articles'; }
.tutorials:after{ content:'Tutorials'; }
.pinterest:after{ content:'Pinterest'; }
.archives:after{ content:'Archives'; }
Это все, что вам нужно для создания сетки стиля метро, просто используя плагин gridster jQuery и некоторые стили метро.
Взгляните на демо, чтобы увидеть, что это создаст.