Семантическая разметка с Фондом 5 и Sass

Давайте продолжим, рассмотрев три основных миксина Фонда. Пожалуйста, имейте в виду, что примеры этих миксов доступны во втором проекте . Вот как это выглядит:

Ряды

Миксин grid-row позволяет вам определять строки вашей сетки. Ниже его параметр:

И вот возможные значения этого параметра:

Колонны

Mixin grid-column генерирует ваши столбцы. Следующая таблица показывает его параметры:

Блок Сетка

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

Собираем все вместе

На данный момент, мы надеемся, мы готовы создать нашу демонстрационную страницу.

На следующем снимке экрана вы можете взглянуть на желаемый макет для одного из наших разделов:

Основываясь на ширине области просмотра, мы делаем следующие предположения:

Вот соответствующий HTML:

 <section class="services"> <h2>What we can do for you</h2> <article> <div> <i class="fa fa-bar-chart fa-4x"></i> <h4>Statistics</h4> <p> <!-- content --> </p> <a href="#">Learn more</a> </div> </article> <article> <!-- content --> </article> <article> <!-- content --> </article> <article> <!-- content --> </article> </section> 

Наш код Sass:

 .services { @include grid-row; article { @include grid-column(12); @media #{$medium-up} { @include grid-column(6); } @media #{$large-up} { @include grid-column(3); } } } 

И полученный CSS:

 .services { width: 100%; margin-left: auto; margin-right: auto; max-width: 62.5rem; } .services article { padding-left: 0.9375rem; padding-right: 0.9375rem; width: 100%; float: left; } @media only screen and (min-width: 40.063em) { .services article { width: 50%; float: left; } } @media only screen and (min-width: 64.063em) { .services article { width: 25%; float: left; } } 

Примечание. Для простоты я включил только некоторые правила из скомпилированного CSS. Если вы хотите увидеть полный CSS, который выводит Foundation, взгляните на файл app.css .

Таким же образом, давайте продолжим наш второй пример. Ниже приведены стили, которые мы хотим применить к элементу footer :

Опять же, мы структурируем это с учетом некоторых предположений:

Кроме того, мы используем преимущество mixin block-grid для включения вложенной строки в последний элемент div .

HTML-код может быть показан ниже:

 <footer> <section> <div> <h4>About Us</h4> <!-- content --> </div> <div> <h4>Our Mission</h4> <!-- content --> </div> <div> <h4>Find Us</h4> <ul> <!-- content --> </ul> </div> <section> </footer> 

Вот наш код Sass:

 footer { section { @include grid-row; div { @include grid-column(12); @media #{$medium-up} { @include grid-column(4); } } ul { @include block-grid(2); } } } 

И скомпилированный CSS:

 footer section { width: 100%; margin-left: auto; margin-right: auto; max-width: 62.5rem; } footer section div { padding-left: 0.9375rem; padding-right: 0.9375rem; width: 100%; float: left; } footer ul > li { float: left; width: 50%; padding: 0 0.625rem 1.25rem; list-style: none; } @media only screen and (min-width: 40.063em) { footer section div { width: 33.33333%; float: left; } } 

Примечание: опять же, для простоты, я включил только некоторые правила из скомпилированного CSS. Чтобы увидеть полный CSS, который выводит Foundation, посмотрите файл app.css .

Вывод

В этой статье я представил вам три основных компонента Foundation, которые вы можете использовать для создания более чистого и более семантического HTML-кода. В качестве следующего шага, я призываю вас погрузиться в его файлы Sass и изучить все миксины (46 с текущей версией). К счастью, документация действительно очень хорошая, поэтому я надеюсь, что у вас не возникнет проблем с их пониманием! Таким образом, у вас будет возможность комбинировать мощные функции этой платформы вместе с вашими собственными настройками.