Twenty Seventeen Sass

These Sass modules make customizing the style.css a lot easier for the new business focused Twenty Seventeen default theme for WordPress 4.7 released a couple weeks ago.

The individual Sass modules in this repository represent each of the WordPress Twenty Seventeen style.css stylesheet numbered and annotated sections. The responsive media queries have also been split out into modules for each of the 5 breakpoints. As was done with the Twenty Sixteen Sass modules, all of the fonts and colors have been converted into Sass variables for quick and easy customization.

Source Code

There is also a gulpfile.js included with a task for compiling the .scss files into a new style.css. This task uses cssnano and the workflow described in this post, Sass Workflow Using cssnano and Autoprefixer.

  1. Install the files into the /wp-content/themes/twentyseventeen folder.
  2. To recompile the Twenty Seventeen stylesheet style.css from the scss files, first run npm install to get the dependencies.
    # installs dependencies
    npm install
    
  3. Then run the gulp task that will compile them
    # compile into styleheet
    gulp css
    

Resources

Design Patterns

Design patterns are reusable solutions to commonly occurring problems in software design.
Addy Osmani

Constructor Pattern

All methods and properties of the object are added in the constructor.

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;

    this.trackInfo = function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    };
}

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Constructor Pattern with Prototype

function Track(artist, title, year) {
    this.artist = artist;
    this.title = title;
    this.year = year;
}

Track.prototype.trackInfo = function() {
    return this.title + ", by " + this.artist + ", Year released: " + this.year;
};

var theFixer = new Track("Pearl Jam", "The Fixer", 2009);
var lazaretto =  new Track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Prototype Pattern

var trackPrototype = {
    init: function(artist, title, year) {
        this.artist = artist;
        this.title = title;
        this.year = year;
    },
    trackInfo: function() {
        return this.title + ", by " + this.artist + ", Year released: " + this.year;
    }
};

function track(artist, title, year) {
    
    function F() {}
    F.prototype = trackPrototype;
    
    var f = new F();
    
    f.init(artist, title, year);
    return f;
}
 
var theFixer = track("Pearl Jam", "The Fixer", 2009);
var lazaretto = track("Jack White", "Lazaretto", 2014);

console.log(theFixer.trackInfo()); // The Fixer, by Pearl Jam, Year released: 2009

Object Literal Module Pattern

var playlist = {
    
    tracksCollection: [],
    
    lastTrack: function() {
        return tracksCollection[tracksCollection.length -1];
    },
    
    addTrack: function(track) {
        tracksCollection.push(track);
    },
    
    init: function(tracks) {
        tracks.forEach( function(track) {
           this.addTrack(track); 
        });
    }
}

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

IIFE Module Pattern

var playlist = (function() {

    var tracksCollection = [];

    return {

        lastTrack: function() {
            return tracksCollection[tracksCollection.length -1];
        },

        addTrack: function(track) {
            tracksCollection.push(track);
        },

        init: function(tracks) {
            tracks.forEach( function(track) {
            this.addTrack(track);
            });
        }
    }

})();

playlist.init([new Track("Pearl Jam", "The Fixer", 2009)]);
playlist.lastTrack().trackInfo(); // The Fixer, by Pearl Jam, Year released: 2009
playlist.addTrack(new Track("Jack White", "Lazaretto", 2014));
playlist.lastTrack().trackInfo(); // Lazaretto, by Jack White, Year released: 2014

Resource

Learning JavaScript Design Patterns
A book by Addy Osmani

Responsive Sidebar

This code sample shows how to create a responsive sidebar that fills the entire height of the page. Other CSS features include a fixed background image and universal box sizing with inheritance.

demo

Bourboneat WordPress Theme

I have created a new WordPress starter theme for building custom themes designed for WordPress version 4.1 and later. The theme uses the Bourbon Sass library and it’s Neat semantic grid components for a lightweight and modular responsive design. The header and footer designs were taken from the Bourbon Refills collection. Also included are IcoMoon font icons which can be easily updated using the IcoMoon app. Gulp’s build system is used to compile and minify Sass and Javascript modules into optimized CSS and Javascript. Clone, fork or download this responsive starter theme at GitHub and modify it as you wish into the theme you want.

https://github.com/jimfrenette/bourboneat

Features

New functions and feature enhancements in WordPress version 4.1 include:

Menus

The theme contains four wp_nav_menu’s, the main menu supports nested drop downs. Below are desktop previews of these responsive menus which collapse as needed on mobile screen sizes.

Main Menu (header.php)
Main Menu preview (header.php)

The footer contains three of the four registered wp_nav menus. Social links and terms menus are shown below. Also shown here above the footer is the pagination nav courtesy of WordPress – Twenty Fifteen. This is a new feature available in WordPress 4.1 and later.

Social and Terms Menu (footer.php)
Social and Terms Menu preview (footer.php)

Populating the social links menu is easy. All that is needed is a menu that contains custom links to social networks. The href attribute of the link is selected to determine which icon is rendered. Here is a snippet of the Sass that shows how this works:

// snippet from _nav-social.scss

a[href*="codepen.io"]:before {
    @include icon-codepen;
}
a[href*="dribbble.com"]:before {
    @include icon-dribbble;
}
a[href*="dropbox.com"]:before {
    @include icon-dropbox;
}
a[href*="facebook.com"]:before {
    @include icon-facebook;
}
a[href*="plus.google.com"]:before {
    @include icon-google-plus;
}
a[href*="github.com"]:before {
    @include icon-github;
}
a[href*="instagram.com"]:before {
    @include icon-instagram;
}
a[href*="linkedin.com"]:before {
    @include icon-linkedin;
}

This figure shows the footer menu setup:

Footer menu edit screen
Footer menu edit screen

This figure shows the terms footer menu setup:

Terms footer menu edit screen
Terms footer menu edit screen

This figure shows the manage menu locations setup:

Terms footer menu edit screen
Manage menu locations screen
UPDATE – October 7, 2015

The bourboneat theme recently passed the WordPress.org code review and approval process and is now included in the WordPress.org Theme Directory at WordPress – bourboneat – Free WordPress Themes.