Now that we have a working responsive prototype, let's give this one page a little styling love.
Let's open the settings.scss
file in the scss
folder. On line 57, let's remove //
and change it to the following:
$primary-color: #048661;
Once you refresh your browser, you will see that buttons go green, as shown in the following screenshot:
Now, let's remove //
and change line 36 to the following:
$row-width: rem-calc(1280);
Make sure that your browser window is wider than the width of the site, and you will see that our site gets wider. Like we covered in Chapter 7, Sass and Foundation, you can see how changing a couple of values in the Foundation settings file can make some pretty big changes to your project.
Now, let's remove the gray background on the panels. On line 805, let's change it to:
$panel-bg: #fff;
You will see that the panel's gray background is gone. Now, let's open the _theme.scss
file and add the following:
.top-bar { background: $primary-color; .top...