Chapter 10. Building a Content-Rich Website – Theme

In this chapter, we'll wrap up our design. We'll focus mainly on typography, color, and some other aesthetic elements; however, we'll also need to revisit our layout as we go along. Increasing or decreasing font sizes and adding new elements could potentially show us areas of our layout that need to be improved or modified to accommodate our theme. This is usually limited to adding or removing padding and margin here or there.

For our typography we'll decide upon at least two fonts which complement each other and represent the overall brand correctly. Typography is one of the most important aspects of a design's aesthetic. The right font will lay the foundation for the rest of the design.

We'll choose a font for the body text and also a font for accentuation, such as the logo, dropcaps, and other stand out typographical elements. We'll also use a loop to import our fonts from Google fonts to make it very easy for us to add or remove fonts...

Typography

The first part of our theme we'll look at is typography. We'll choose a minimum of two fonts and set our font families with sensible fallback fonts. We may also need to make some layout tweaks while we do this. This is because we'll be increasing and decreasing our font sizes in places and this can affect the layout and uncover areas that need to be laid out differently.

We need to create a file called _typography.scss in the scss/theme directory. We'll add our main fonts and font family defaults here. We'll also use a list and an @each loop to import all the necessary fonts from Google Fonts:

$fonts: ( 
    'Bilbo+Swash+Caps', 
    'Roboto' 
) !default; 
 
$main-font: 'Verdana' !default; 
$secondary-font: 'Roboto' !default; 
$tertiary-font: 'Bilbo Swash Caps' !default; 
 
$body-font-family: ($main-font, Geneva, sans-serif) !default; 
$heading-font-family: ($secondary-font, Helvetica, Arial, sans-serif) !default; 
$accent-font...

Dropcaps

I quite like dropcaps. I feel they can make a boring chunk of text instantly more interesting and visually appealing. Therefore, I'm going to add a mixin which we can use in various places in our design to add dropcaps. Prime candidates for dropcaps are the services sections and the text widget in the footer.

There are a number of methods for creating a dropcap. You can use an image, however, this means the first letter is invisible to screen readers, and therefore the text makes no sense. So that option is out of the question. You can wrap the first element in a span with a class of dropcap and simply add the dropcap styling to that class. However, this involves more markup and I usually try my best to avoid this.

For these reasons, my preferred approach is to use the :first-letter pseudo-class. We could use :first-child:first-letter, however, this would not work if we are trying to target a paragraph tag in an element where the paragraph is not the first child. Take this markup...

Tagcloud

The next section of the page I want to look at is the tag cloud in the footer. We've already added an unordered list containing list items with classes for each size such as xs, sm, md, and so on. Now let's create a mixin which we can apply to the unordered list which will automatically add all of our font sizes accordingly.

Create a file in scss/helpers/mixins called _tag-cloud.scss. Inside, we'll create our mixin:

@mixin tag-cloud($base: 1em) { 
    .xs { 
        font-size: ($base * 0.5); 
    } 
 
    .sm { 
        font-size: ($base * 0.75); 
    } 
 
    .md { 
        font-size: $base; 
    } 
 
    .lg { 
        font-size: ($base * 1.25); 
    } 
 
    .xl { 
        font-size: ($base * 1.5); 
    } 
} 

As you can see, we've set a base font size of 1em. The md class will be the default size. The sm class will be one quarter of our $base value, and the xs class will be...

Color scheme

The next part of our theme is creating a color scheme. We'll use two to three main colors which we'll place in variables. We'll then create a $theme map which we will use throughout our colors Sass file. This will allow us to easily switch themes by simply modifying our $theme map in future.

Let's first add a file called _color.scss in the scss/theme directory. Inside that we'll start to add our variables:

$red: hsl(0, 57%, 60%) !default; 
$dark-grey: hsl(0, 3%, 22%) !default; 
 
$theme: ( 
    color: ( 
        primary: $red, 
        secondary: $dark-grey 
    ) 
) !default; 

You should also place them at the beginning of the scss/style.scss file as we've been doing with all of our variables so far:

// scss/style.scss 
$red: hsl(0, 57%, 60%); 
$dark-grey: hsl(0, 3%, 22%); 
 
$theme: ( 
    color: ( 
        primary: $red, 
        secondary: $dark-grey 
    ) 
); 

Now let's add some...

Search

Next, we'll style the Search field in the header. I want to ensure that the border on the input and the button match. We'll set it to the secondary color by default. The background color of the search button will also be this color with the icon being white. Then when the input or the button is hovered on or active we set the border color to be the primary theme color. The button background color will also change to the primary color. The icon will remain white:

// Search 
.search-bar { 
    &-input, &-button { 
        border: 1px solid get($theme, color, secondary); 
 
        &:active, &:focus, &:hover { 
            border: 1px solid get($theme, color, primary); 
        } 
    } 
 
    &-button { 
        background-color: get($theme, color, secondary); 
        color: white; 
 
        &:active, &:focus, &:hover { 
            background-color: get($theme, color, primary...

Image banner

The image banner doesn't need much alteration. Mainly, we'll want to make all the text white because the overlay over the background image is dark. However, this isn't actually part of our theme, rather this should be a feature of our component itself. By that I mean if we change the color of our overlay to be a lighter color, the text in the caption should turn dark and vice versa.

For this we're going to use the built-in lightness function in Sass to check if the lightness is above or below 50% and make the text white if the overlay is dark or black if the overlay is light. To do this we'll create a function called abs-contrast-color.

First, create a file in scss/helpers/functions and call it _abs-contrast-color.scss. Inside that file we'll write our function:

@function abs-contrast-color($color) { 
    @if (type-of($color) == color) { 
        @if (lightness($color) <= 50%) { 
            @return white; 
        } @else { 
            @return black...

Featured products

Before we move on to the testimonials I want to add our primary color to the buttons and product titles in the Featured Products section. After all, we want the products to stand out.

Once again, a color can be passed into our media mixins to set the title and button colors. Therefore, we should apply our color using those mixins. That way we prevent unnecessary duplication in our final CSS output.

Open scss/components/_product-centered.scss and make one simple modification:

.product-centered { 
    @include media-centered($img: fullwidth, $color: get($theme, color, primary)); 
 
    padding-left: 0; 
    padding-right: 0; 
 
    &-title { 
        margin-top: 0 
    } 
}  

Our Featured Products section should now be much more eye-catching:

Testimonials

The testimonials component is very similar to our image banner component. That means we can use the exact same function to ensure our text color is always the absolute contrast of the overlay color.

Open the scss/component/_testimonials.scss file and add the following:

.testimonial { 
    max-width: 20em; 
    margin: 0 auto; 
 
    @include media-centered($img: rounded, $color: abs-contrast-color(
    get($testimonials, overlay-color)));

    blockquote, cite {

        color: abs-contrast-color(get($testimonials, overlay-color));

    } 
 
    &s { 
        ... 
    } 
} 

As you can probably guess, the text will all be white now seeing as the overlay is dark:

Services

The services section seems a bit boring, to be honest. Even with the dropcaps. I think we need some icons to make everything a bit more visually appealing. This will require us to add some elements for our icons. We'll also make the .services-title an h2 element instead of h3 so it matches Featured Products.

Open index.html and add the following:

<!-- BEGIN .services --> 
<section class="services"> 
    <h2 class="services-title">Swag Services</h2> 
    <div class="container"> 
        <article class="service"> 
            <div class="ion-clock"></div> 
            <h3 class="service-title">Fast Delivery</h3> 
            <p> 
                ... 
            </p> 
        </article> 
        <article class="service"> 
            <div class="ion-earth"></div> 
            <h3 class="service-title">Worldwide Shipping...

Footer

One of the final steps for our homepage is to color the footer. We'll use the secondary color as the background and the primary color for all the links, as well as the dropcap. Open scss/theme/_color.scss and add the following to the end of the file:

.footer { 
    background-color: get($theme, color, secondary); 
    color: white; 
 
    a, 
    a:hover, 
    .subfooter a, 
    .subfooter a:hover { 
        @include hover-link; 
        color: get($theme, color, primary); 
    } 
 
    .subfooter-widget-section-text > p:first-of-type::first-letter { 
        color: get($theme, color, primary); 
    } 
 
    .footer-inner:last-child { 
        border-top: 1px solid hsla(0, 0%, 100%, 0.1); 
    } 
}

Lastly, we'll increase the size of the social icons in the _typography.scss file in our scss/theme folder. While we're here we'll also tidy up all of our .subfooter-section-widget rules...

Section titles

There's only two things left to do and we're finished! Both are to do with our section titles. First, we want to center them to match the content better, and lastly, we'll add an underline using the ::after pseudo element for that extra touch. After all, as the old saying goes God is in the detail.

So the first thing we will need to do is add a common class to our section titles so we can style them all together. We'll call this class section-title. Open index.html and modify the .featured-product-title and the .services-title like so:

<h2 class="featured-product-title section-title">Featured Products</h2> 
 
... 
 
<h2 class="services-title section-title">Swag Services</h2> 

We're actually going to create a mixin to handle both our alignment and generating our underline. Create a file called _underline.scss in the scss/helpers/mixins folder. Inside that add our mixin:

@mixin underline($align: left, $color: black, $height: 3px...

Summary

Over the course of this book I've tried to share more than just code snippets and techniques to write better Sass. I've also tried to share some of the ideas and practices that I believe will help you better organize your projects and therefore, write better, more reusable, future-proof Sass. That in turn, will give you the freedom to design better sites and apps without constantly running into the same issues.

Most, if not all of these practices are based on, or derived from, numerous other practices, techniques, and frameworks such as OOCSS, BEM, SMACSS, Atomic Design, Bootstrap, Foundation, and countless articles and videos across the Internet. All I can hope for is that within this book you found a few tips and techniques which will help you on your future projects.

At this point you may be wondering to yourself where to next?, What should I learn now? Well, I would certainly recommend you start using the indented Sass syntax if you don't already. Once you've embraced the indented...