Zurb Foundation: изменение отступов между столбцами

Также имейте в виду, что вы по-прежнему можете использовать фоновые изображения в CSS, и вам не нужно беспокоиться о файле Zurb CSS по умолчанию.

Просто создайте файл CSS и сохраните его в папке с файлами CSS, назовите его app.css и сохраните. Теперь, если вы создадите какие-либо собственные правила, вы можете сохранить их здесь.

Так, например, вы можете создать правило «основной ящик» с числовым значением и сохранить его в свой файл css. Затем вы можете применить к нему фоновое изображение. Таким образом, HTML будет выглядеть так:

<div class="row">

<div class="main-box large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="main-box2 large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="main-box3 large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="main-box4 large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

Затем просто добавьте правило CSS с фоновым изображением в app.css, например:

.main-box,.main-box2,.main-box3,.main-box4 {background-image: url(path to your image file here);}

Или, если вам нужно иметь отдельные фоновые изображения, разделите ваши правила, например:

.main-box{background-image:url();}
.main-box2{}
.main-box3{}
.main-box4{}

и так далее...

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

Еще одно замечание.... если вы введете одно из правил CSS по умолчанию из файлов CSS Zurbs в app.css; тогда он будет переопределен. Таким образом, вы можете изменить даже значения CSS по умолчанию, не вмешиваясь в исходный файл.

Самый простой способ удалить отступы между столбцами — использовать класс collapse в строке. Если вы хотите больше контроля, читайте дальше...

Есть несколько дополнительных опций, если вы используете Sass/Compass, гем zurb-foundation или индивидуальную загрузку. Например, если вы хотите, чтобы расстояние между столбцами менялось во всем приложении, вы можете просто установить переменную $column-gutter. Для группы элементов с фиксированным интервалом, подобным этому, вы также можете рассмотреть блочную сетку.

Если вы хотите применить настроенный желоб только к определенным строкам, вы можете определить новый класс, скажем, .feature-tiles для строк и настроить столбцы. Например:

@import 'foundation';

.feature-tiles {
  $row-width: em-calc(800);
  @include grid-row;

  .columns, .column {
    $column-gutter: 0;
    @include grid-column;
  }
}

В этом примере задается класс, который вы можете использовать для строки (вместо row), задается общая ширина строки и удаляется отступ между столбцами, что соответствует аккуратному расположению плитки. Вы должны использовать large-3 columns для каждой плитки, как и раньше, чтобы получить четыре плитки в ряду. Часть em-calc — это просто помощник, который вычисляет размер в ems из предоставленного значения в пикселях на основе базового размера шрифта страницы. Это помогает поддерживать относительный размер на разных устройствах.

Страница документации для сетки объясняет больше: http://foundation.zurb.com/docs/components/grid.html

В приведенном выше примере я бы предположил, что изображения содержат больше контента, чем фон, поэтому теги img, вероятно, уместны. Вот авторитетная статья, в которой более подробно объясняются варианты: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/