Originally published at: http://www.sitepoint.com/semantic-markup-foundation-5-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:
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:
And here are the possible values of this parameter:
Columns
The grid-column
mixin generates your columns. The following table shows its parameters:
Block Grid
In case you want to take advantage of the block grid, Foundation provides the block-grid
mixin. Here are its parameters:
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:
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:
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.
Continue reading this article on SitePoint