Как использовать классы блочной сетки

Question

Все работало замечательно: сетки, медиа-запросы, видимость текста и все другие хорошие вещи.

Я попытался использовать блочные сетки для своих ссылок на изображения в социальных сетях и обнаружил, что это не работает вообще. Я просмотрел файлы основы, которые я включил в свой проект, и block-grid классы нигде не определены. Мне любопытно, чего мне не хватает. Есть ли отдельный файл, который мне нужно включить в мой проект, чтобы использовать block-grid"S?

Документация по сетке фундаментных блоков

Скрипты и таблицы стилей, включенные в мой проект:

<!-- Within Head tag -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/terminal/jquery.terminal-0.9.2.css" />

<!-- At End of Body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/terminal/js/jquery.terminal-0.9.2.min.js"></script>
<script src="js/terminal/js/jquery.mousewheel-min.js"></script>

Пример того, что я пытался сделать:

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
    <li><img class="img-icon" src="./img/blogger.png" /></li>
    <li><img class="img-icon" src="./img/email.png" /></li>
    <li><img class="img-icon" src="./img/github.png" /></li>
    <li><img class="img-icon" src="./img/googleplus.png" /></li>
    <li><img class="img-icon" src="./img/linkedin.png" /></li>
    <li><img class="img-icon" src="./img/stackru.png" /></li>
    <li><img class="img-icon" src="./img/twitter.png" /></li>
</ul>

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

Также, img-icon класс ничего не перезаписывает. Удаление этого класса не делает block-grid Работа.

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

Изменить 2: foundation.css (добавлено в jsfiddle из-за размера): содержимое файла foundation.css

Answer 1

Вы связались с документами блочной сетки Foundation 5, но вы используете Foundation 6. В Foundation 6 сетка блоков была объединена с обычной сеткой.

Сетка блоков из Foundation 5 была объединена с основной сеткой. Добавьте класс в формате [size] -up- [n], чтобы изменить размер всех столбцов в строке. По умолчанию максимальное количество столбцов, которые можно использовать с сеткой блоков, равно 6.

Источник: http://foundation.zurb.com/sites/docs/grid.html

Пример:

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>

Answer 2

Для основания 6 используйте эту структуру. Помните, что по умолчанию максимальное количество столбцов равно 6.

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>