Quick Start Guide

Functions

We have two functions files -

  • functions.php: Contains scripts and enqueueing, sidebars, custom walker menu, helper functions and everything else you'd normally expect to modify.
  • /includes/base-functions.php: Everything useful that you probably don't need to modify on a project-by-project basis — clean up stuff and ux/seo functions.

Template Structure

Post formats are rarely used in client websites, so we've commented out support for them by default.

We have two folders for organizing our files separate from the required theme files.

  • /templates/: Keep page templates organized here. We've included two templates – sitemap, and full width page templates to get started.
  • /template-parts/: This is where we've put files that are reused throughout the theme like pagination and error messaging.

Reference: WordPress Template Hierarchy

Styles

All theme styles are contained in the /scss/ folder.

  • style.scss: Setup file that builds style.css.
  • login.scss: Customize the admin login screen.
  • editor-styles.scss: Set specific styles for the wysiwyg editor.
  • /elements/
    • _bootstrap-grid.scss: Responsive Bootstrap Grid - This should remain untouched in most instances.
    • _comments.scss: Comment form and comments list
    • _forms.scss: Simple form elements – compatible with our Gravity Forms styles.
    • _links.scss: Text or button links
    • _lists.scss: Ordered, unordered or definition lists
    • _main-navigation.scss: Specific to the main navigation including mobile and tablet.
    • _media.scss: Images, galleries and videos
    • _pagination.scss: Next/previous post link and full pagination
    • _tables.scss: Simple table reset
    • _typography.scss: Everything typographic related
    • _widgets.scss: Default widgets or custom widgets
  • /libs/
    • /fontawesome/: Easily integrate the font into the theme using variables and mixins or create a custom build based on the different styles needed. See the documentation for more details.
    • _magnific-popup.scss: Magnific Popup modal windows
    • _normalize.scss: Normalize CSS across all browsers.
    • _retinajs.scss: Includes a mixin for adding retina images provided by
    • _selectWoo.scss: Better form dropdowns with SelectWoo.
  • /media-queries/
    • _xs.scss: Contains the base styles. The theme is developed "mobile first".
    • _sm.scss: Small mobile devices
    • _md.scss: Tablet devices
    • _lg.scss: Desktop size
    • _xl.scss: Large desktop size
    • _custom.scss: Define custom media queries outside of the grid breakpoints.
    • _print.scss: Strips out all unnecessary elements for optimal printing.
    • _retina.scss: Specific to retina devices.
  • /modules/
    • _sticky-footer.scss: Just add the "sticky-footer" class to the body.
  • /plugins/
    • /gravity-forms/
      • _base.scss: General styles and common form fields.
      • _other_fields.scss: Less common form fields such as date picker and multi-file upload.
      • _ready_classes.scss: Built-in "ready classes" included in Gravity Forms out-of-the-box.
      • _credit_cards.scss: Compatible with payment add-ons.
      • _submission_and_errors.scss: Validation handling.
  • /utilities/
    • _all-utilities.scss: Includes all the files below.
    • _variables.scss: Define colors, fonts, sizes, grid settings and other variables.
    • _functions.scss: Bootstrap functions for the grid
    • _mixins.scss: Helpful set of reusable declarations such as browser prefixes for Flexbox.
    • _classes.scss: Helpful set of classes for rapid development.
    • _accessibility.scss: Support for screen readers and other things along those lines.

Getting Started with SASS + Compass

We're using SASS by default to utilize it's organization, speed, and functions. If you've used LESS before, SASS is an easy transition. If you haven't used CSS preprocessors before, you're in for a treat. You can learn more about SASS here.

Compass is like an extension to SASS, giving us access to all sorts of predefined tools. On the most basic level, Compass can generate cross-browser code for CSS3 properties, saving valuable time and keeping your source code clean.

If you haven't used these tools before, the best way to get started is to visit http://compass-style.org/install/ to setup your compiler, or use an app to handle it for you:

Libraries

All of our third-party libraries are stored in the /libs/ folder. This includes css, javascript, fonts and images.

  • Where applicable we have included compressed and uncompressed versions of the files for debugging.

Scripts

All of our custom javascript files are in the /js/ folder.

  • scripts.js: Here we initialize our third-party scripts and define functionality for making the theme responsive.
  • navigation.js: Mobile/tablet navigation
  • responsive-iframes.js: Responsive iFrames

Recommended Plugins

Here is a list of plugins we've used on nearly every project.