Foundation for Sage

This repo is now archived and is not maintained.

Sage is a WordPress starter theme with a modern development workflow.

• Sage documentation

This branch combines the structure of Sage 8 (vanilla WP, no Laravel) with the updated workflow of the dev version of Sage 10.

Furthermore, this branch is setup for a quick start with several popular plugins, including Advanced Custom Fields, Yoast SEO, WooCommerce, and Gravity Forms.

Features

• Sass for stylesheets
• TypeScript support
• Laravel Mix for compiling assets and concatenating and minifying files
• Browsersync for synchronized browser testing
• CSS framework: Foundation

Install the WP-Abettor plugin to enable additional features:

• Hide default dashboard widgets on the back-end
• Add a fixed position emblem & modifies favicon to differentiate development sites from production sites
• Disable the admin bar on the front-end
• Turn off comments and related comments in the back-end interface
• Disable Yoast SEO columns for posts and pages on the back-end interface
• Set default settings for Gravity Forms: HTML5 output on & CSS output off
• Move Gravity Forms injected scripts to the footer
• Remove cruft from text when pasting into the TinyMCE editor
• Removes the back-end admin top bar from larger screens
• Adds a View Site link to the admin sidebar
• Adds a Logout link to the admin sidebar

Requirements

Make sure all dependencies have been installed before moving on:

• WordPress >= 6.0
• PHP >= 8.0 (with php-mbstring enabled)
• Node.js >= 8.0.0
• Yarn
• Composer (For PHP linting)

Theme installation

Clone the git repo - git clone https://github.com/thinknathan/Foundation-for-Sage.git and then rename the directory to the name of your theme or website.

Theme setup

Edit lib/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, post formats, and sidebars.

Theme development

• Run yarn from the theme directory to install dependencies
• Update webpack.mix.js with your local dev URL

Build commands

• yarn start — Compile assets when file changes are made, start Browsersync session
• yarn build — Compile and optimize the files in your assets directory
• yarn build:production — Compile assets for production

Linter commands

• yarn lint — Evaluate the code quality of all PHP, SCSS, JS files
• yarn lint:php — Runs phpcs on all PHP files
• yarn lint:scripts — Runs eslint on all JS files
• yarn lint:styles — Runs stylelint on all SCSS files

Formatting commands

• yarn prettier — Attempts to fix style and formatting for all PHP, SCSS, JS files
• yarn prettier:php — Runs phpcbf on all PHP files
• yarn prettier:scripts — Runs prettier on all JS files
• yarn prettier:styles — Runs prettier on all SCSS files

New Additions in this Fork

Structure

• Custom SASS file structure following Atomic Design principles
• SASS file structure that loads pieces of Zurb's Foundation, allowing you to easily remove chunks of CSS you're not using

Popular WP Plugin Integration

• Includes SASS styles for Gravity Forms to allow easy styling
• Formats Yoast SEO Breadcrumbs to use Foundation styles

Opinionated Changes

• Uses Zurb Foundation by default
• Removes jQuery by default
• A polyfill for missing JS features is loaded only as needed
• Custom login page styles in assets/styles/molecules/_login.scss