Semantic Markup with Foundation 5 and Sass
In one of my previous articles, I compared the grid systems of both Foundation 5 and Bootstrap 3.
This time however, I’ll go beyond the basics of Foundation’s grid structure. That being said, I’ll show you how to create more semantic grids by taking advantage of its pre-built Sass mixins. To demonstrate it, I’ll reconstruct the demo page of the aforementioned article. But first, let me introduce the project that will be used for this article.
Project Structure
Using Foundation’s Command Line Interface, I set up a Compass project. Its structure can be shown below:
Keep an eye on the following folders:
Folder Name | Description |
---|---|
foundation | Contains all Foundation’s assets (css, scss partials, js). |
scss | Contains the files you can use to customize Foundation. |
stylesheets | Contains the output CSS file. |
The app.scss
file determines the components that our project will include. By default, all of them are imported. However, in our case we select to import four of them. That happens because we’re only interested in using mixins that are located in three partial files (_block-grid.scss
, _grid.scss
, _buttons.scss
). Moreover, we want to maintain Foundation’s typographic styles and hence we also import the _type.scss
partial.
In addition to the predefined components, the app.scss
file can contain as well custom styles. Here’s the structure of our file:
Below is the path to the custom partial:
Furthermore, we have to limit the output CSS (reduce its size). In fact, we want the app.css
file to include only Foundation’s typographic styles and our custom ones. For this reason, we set the following variable values to false
:
include-html-grid-classes
include-html-block-grid-classes
include-html-button-classes
We can change their values in the _settings.scss
partial file:
Last but not least, all the files of this project can be found here.
Let’s continue by covering three of Foundation’s core mixins. Please, keep in mind that examples of those mixins are available in a second project. Here’s how it looks like:
Rows
The grid-row
mixin allows you to define the rows of your grid. Below is its parameter:
Parameter | Description | Default Value |
---|---|---|
behavior | Adjusts the width of the row and/or the nested row. | false |
And here are the possible values of this parameter:
Values | Description |
---|---|
false | Use this option when you want to wrap your columns inside a row. This will give it a max-width property value. Moreover, it’ll set its margin-left and margin-right property values to auto . |
collapse | Use this option when you want to wrap your columns inside a row. This will give it a max-width property value. Moreover, it’ll set all its margins to 0 . |
nest | Use this option when you want to create a nested row. This will give it a negative margin-left and a negative margin-right property values. |
nest-collapse | Use this option when you want to create a nested row. This will set all its margins to 0 . |
Columns
The grid-column
mixin generates your columns. The following table shows its parameters:
Parameter | Description | Default Value |
---|---|---|
columns | The number of desired columns. | false |
last-column | Is this the last column? | false |
center | Center these columns? | false |
offset | The number of columns to offset. | false |
push | The number of columns to push. | false |
pull | The number of columns to pull. | false |
collapse | Remove the column padding? | false |
float | Float this column? | true |
position | The positioning type. | false |
Block Grid
In case you want to take advantage of the block grid, Foundation provides the block-grid
mixin. Here are its parameters:
Value | Description | Default Value |
---|---|---|
per-row | The number of items to display per row. | false |
spacing | The number of ems to use as padding on each block item. | 0.625rem |
include-spacing | Adds padding to the list item. | true |
base-style | Applies a base style to block grid. | true |
Putting It All Together
At this point, hopefully, we’re ready to create our demo page.
In the following screenshot, you can have a look at the desired layout for one of our sections:
Based on the viewport width, we make the following assumptions:
Window width | Description |
---|---|
≤640px | Each article covers the full width of their parent container. |
Between 641px and 1024px | Set the value of the columns parameter to 6 . That means, each article covers 50% of their container’s width. |
≥1025px | Set the value of the columns parameter to 3 . That means, each article covers 25% of their container’s width. |
Here’s the relevant 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>
Our Sass code:
.services {
@include grid-row;
article {
@include grid-column(12);
@media #{$medium-up} {
@include grid-column(6);
}
@media #{$large-up} {
@include grid-column(3);
}
}
}
And the resulting 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;
}
}
Note: To keep things simple, I’ve only included some of the rules from the compiled CSS. If you want to see the complete CSS that Foundation outputs, take a look at the app.css
file.
In the same way, let’s continue with our second example. Below are the styles we want to apply to the footer
element:
Again, we structure it by taking into account some assumptions:
Window width | Description |
---|---|
≤640px | Each div element covers the full width of their parent container. |
≥641px | Set the value of the columns parameter to 4 . That means, each div element covers around 33.33% of their container’s width. |
Furthermore, we take advantage of the block-grid
mixin to include the nested row in the last div
element.
The HTML code can be shown below:
<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>
Here’s our Sass code:
footer {
section {
@include grid-row;
div {
@include grid-column(12);
@media #{$medium-up} {
@include grid-column(4);
}
}
ul {
@include block-grid(2);
}
}
}
And the compiled 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;
}
}
Note: Again, for simplicity, I’ve only included some of the rules from the compiled CSS. To see the complete CSS that Foundation outputs, look at the app.css
file.
Conclusion
In this article, I presented to you three Foundation’s mixins you can use to deliver cleaner and more semantic HTML code. As a next step, I encourage you to dive into its Sass files and examine all of the mixins (46 with the current version). Thankfully, the documentation is really pretty good, so I hope you’ll not have any problem understanding them! In this way, you’ll have the opportunity to combine the power features of this framework alongside with your own customizations.