AZ Sage Extras

This library is used in conjunction with Sage 8.x theme from Roots. It gives the developers extra tools and pre-built functionalities when developing using Sage theme.

• Source: https://github.com/xeiter/az-sage-extras
• Twitter: @xeiter

Requirements

Prerequisite	How to check	How to install
PHP >= 5.4.x	php -v	php.net
Node.js 0.12.x	node -v	nodejs.org
gulp >= 3.8.10	gulp -v	npm install -g gulp
Bower >= 1.3.12	bower -v	npm install -g bower
Sage >= 8.x	style.css

For more installation notes, refer to the Install gulp and Bower section in this document.

Features

• Debugging infrustrure to display degugging inline with execution flow or in console log
• Hierarchical selection of the post's featured image

Plugins

To use the AZ Sage Extras library the following plugins are recommended:

AZ Elements

AZ Elements provides a framework to organise code inside a theme that follows a simple MVC structure. You can define elements of your theme by adding controllers, models and views.

Download this plugin from Githib

WP SCSS

Compiles .scss files generated by Cutomizer into .css and enqueues them together with all the theme's .css files.

Download this plugin from Githib

Piklist

Register custom post types, taxonomies and meta data through code

Download this plugin

Snippets

The /snippets directory contains ready to use snippets for various functionalities of the theme. The the code snippets by pasting them into the code base of your theme based on Root's theme Sage.

Custom SCSS files files

You can add custom SASS files to your theme that do not reside in the Sage's default directory.

For example, for .scss files that are used in the components defined with AZ Elements plugin, add the following lines to <theme>/assets/styles/main.scss file:

//* Elements custom .scss */
@import "../../az-elements/tile/scss/dat";
@import "../../az-elements/hero/scss/main";

Installation

• Clone the content of the repository into <theme>/as-sage-extras directory
• Add the following code at the theme of assets() function in lib/setup.php

<?php

// Enqueue extras
\Roots\Sage\Setup\assets_extras();

?>

• Add the following code at the bottom of <theme>/functions.php file

<?php 

// Bootstrap az-sage-extras
if ( file_exists( __DIR__ . '/az-sage-extras/az-sage-extras-bootstrap.php' ) ) {
    require_once __DIR__ . '/az-sage-extras/az-sage-extras-bootstrap.php';
}

?>

• Change order of blocks for Sass and Less in gulpfile.js so it looks like the following

.pipe(function() {
  return gulpif('*.scss', sass({
    outputStyle: 'nested', // libsass doesn't support expanded yet
    precision: 10,
    includePaths: ['.'],
    errLogToConsole: !enabled.failStyleTask
  }));
})
.pipe(function() {
    return gulpif('*.less', less());
})

• Add the following line to <theme>/assets/styles/main.scss

• You may use the pre-defined elements stored in elements directory

The Piklist configuration for the Elements are stored in piklist directory and in order to be picked up by the theme need to be copied to the piklist directory of the theme

Theme Palette

AZ Sage Extras adds a section to Customizer that allows to define theme colour palette. Defined colours will have specialised CSS rules generated that can be used in custom Sass and CSS files.

For example, if two colours are defined:

1. Red - #FF0000
2. Blue - #0000FF

The following variables will be available:

$colour-red: #ec174f; $colour-blue: #0078c1;

And the following rules will be generated:

.colour-red { color: $colour-red; } .colour-blue { color: $colour-blue; }

.background-colour-red { background-color: $colour-red; } .background-colour-blue { background-color: $colour-blue; }

.theme-colour-red .themed-text { color: $colour-red; } .theme-colour-red .themed-background { background-color: $colour-red; } .theme-colour-red .themed-svg { color: $colour-red; } .theme-colour-blue .themed-text { color: $colour-blue; } .theme-colour-blue .themed-background { background-color: $colour-blue; } .theme-colour-blue .themed-svg { color: $colour-blue; }

Page Colour Themes

Building on top of the Theme Palette the following classes are available to enable "colour themes" for the pages:

1. tag class - .theme-colour-
2. classes that can be used for any tag: .themed-text, .themed-background, .themed-svg

Each page has a meta field available "Page colour theme" that sources the list of Theme Palette colours and allows to select a colour theme for the page.