Chapter 8. Building a Content-Rich Website Components

In this chapter we'll continue with our Mastering Sass Swag website. This chapter will focus on setting up our initial file adding useful mixins and functions which we wrote in previous chapters and creating our main components. We'll improve our Gulp file slightly, as well as include jQuery. jQuery will allow us to manipulate the DOM easier than plain JavaScript. I'll mainly use it to add and remove CSS classes from certain elements.

We'll add some functions and mixins which we've created in previous chapters and make some improvements on them for our specific needs in this project.

We'll add normalize.css to fix some common browser issues and then we'll add some base styles of our own to setup styles which we'll be commonly using. We'll also add a class for "screen reader only" text. This improve accessibility for users who require the use screen readers, seeing as our design will have a lot of icons, which are not screen reader friendly...

Setting up our project

First we need to copy all the work we did in our previous chapter into this one. That will be our starting point. You should have the following files and folder structure:

mastering-sass-swag 
|-- gulpfile.js 
|-- index.html 
|-- package.json 
|-- assets 
    |-- css 
        |-- style.css 
        |-- style.css.map 
    |-- scss 
        |-- style.scss 
|-- dist 
    |-- assets 
        |-- css 
            |-- style.min.css 

You may need to run:

npm install

Run this from the command line to re-install the project's dependencies for Gulp.

Gulp

The Gulp tasks we have at the moment are gulp sass:compile, which compiles our Sass, gulp sass:watch, which compiles our Sass and watches for changes, and finally gulp serve, which boots up a server, opens a tab in the browser and loads our project into it (if there is not already a tab open on localhost:3000), and then watches for changes to our SCSS files and html files and compiles our Sass and refreshes the browser.

This is the task that we'll use the most. So let's make it our default task. Open the gulpfile.js and add the following task:

/** 
 * Default Task 
 * 
 * Runs `gulp serve` 
 */ 
gulp.task('default', ['serve']); 

Now we only need to use the command:

gulp

Run it from the command line and our serve task will be run.

Adding jQuery

We'll require some small amount of JavaScript for some UI improvements for our design over the next few chapters. To ease some of this work we'll use jQuery. The easiest way is to simply link to it from a Content Delivery...

Helpers

We'll place all of our functions and mixins in a folder called helpers. We'll place our mixins in a folder called mixins and functions in a folder called, you guessed it, functions. We'll then create a file in the root of the helpers directory called all.scss which will include all of our functions and mixins in the correct order. This will help avoid cluttering up our style.scss file with functions and mixins.

Your folder structure should be like so:

scss 
|-- helpers 
    |-- _all.scss 
    |-- mixins 
    |-- functions 

Function – get

We'll be working with maps quite a bit. So we'll add our get function from Chapter 5,  Advanced Sass, which allows us to do away with the verbose map-get syntax in favor of a much simpler, cleaner syntax. Create a file called get.scss in the scss/helpers/functions directory. Inside that place the following code:

// Function for retrieving deeply nested map values 
@function get($map, $arglist...) 
{ 
    $m: $map...

Summary

In this chapter we set out to create a practical starting point for the next phase. We have created modular components rather than a strict, grid layout. With this in place, we can be more flexible when it comes to laying things out on the page and making choices regarding typography, color, and the overall look.

We focused on creating a base using some simple, but useful, mixins, normalize.css, and some of our own more opinionated rules. We created the main components of the page, which are the top navigation area, header, main nav and footer, as well as a few independent components which we could perhaps use on other projects.

Even though our focus was on components, we did need to create some styles for layout and even theming, such as icons. We also added jQuery to assist us in creating some animations for a smoother UI.

In the next chapter we'll focus on layout. We'll look at Susy grids to create our own grid for our exact purposes, and we'll add breakpoint to improve our bp mixin...