File Structure


The PHOS Framework is the culmination of several years of perfecting an effective “starter” theme. This Framework is the starting point for all web development projects. It is lightweight and flexible enough to accommodate any site from a single-page site, to a several-hundred page eCommerce catalogue. The Framework utilizes a variety of pre-processing and compiler languages, such as Jade, Susy, SCSS and Gulp. The file structure is broken down in to several logical pieces that should make navigating the code easy.

A versioning procedure has been put in place for updating the Framework. For more info, read the SOP.

The primary files used during the construction of the website will be found in the /_jade, /_sass, and /_js folders. These folders contain the pre-compiled files for the site. Using Gulp, the Jade and Sass files will be compiled in their respective .php files or .min.css files (in the theme root and /assets, respectively).


Rather than having one overall Sass or CSS file for a site, we have broken down all the sass files into logical components to simplify editing and readability. Gulp will compile all .scss files into a single .min.css file and store it in /assets for the finished product.

_base.scss – Handles some of the basic foundation-level tags like body, img, and button, as well as image alignment. It is also the base setup for Susy.

_colors.scss – contains all the color variables for the site. Can be called throughout the other .scss files using color(variableName);

_forms.scss – all styling for Gravity Forms

_includes.scss – Generally used for classes that don’t have a particular “home” in the code structure. Used for classes that are re-used in multiple places in different sections of the pages.

_layouts.scss – the primary file for styling the site. Use this for most of your edits.

_placeholders.scss – Used for Sass placeholder variables that can be reused in multiple places

_tables.scss – Styles for tables

_typography.scss – Styling and setup for all fonts and typography.

_utilities.scss – Helper mixins for functionality. DO NOT EDIT.

_woocommerce.scss – WooCommerce-specific styles.


The /functions/ folder is also necessary for setting up a site. /functions contains a broken-down version of the WordPress-default functions.php file. In the Framework, functions.php is simply a script that loops through all .php files in the /functions folder. This maintains readability and makes the code easier to build and maintain. Typically, post-types.php and shortcodes.php are the most commonly used files in the /functions folder.