Squarely is a WordPress Bootstrap 4 Theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap 4 that was built off the fantastic Sage starter theme.

• Source: https://github.com/roots/sage
• Homepage: https://roots.io/sage/
• Documentation: https://roots.io/sage/docs/
• Twitter: @rootswp, @retlehs, @swalkinshaw, @Foxaii, @c2foryou, @austinpray
• Newsletter: Subscribe
• Forum: https://discourse.roots.io/

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

• gulp build script that compiles both Less and Sass, checks for JavaScript errors, optimizes images, and concatenates and minifies files
• BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
• Bower for front-end package management
• asset-builder for the JSON file based asset pipeline
• Bootstrap 4
• Theme wrapper
• HTML5 Boilerplate
  • The latest jQuery via Google CDN, with a local fallback
  • The latest Modernizr build for feature detection
• ARIA roles and microformats
• Cleaner HTML output of navigation menus
• Posts use the hNews microformat
• Multilingual ready and over 30 available community translations

Install the Soil plugin to enable additional features:

• Cleaner output of wp_head and enqueued assets
• Root relative URLs
• Nice search (/search/query/)

Clone the git repo - git clone https://github.com/roots/sage.git in your Bedrock themes directory or your regular Wordpress installation theme directory.

Square uses gulp as its build system and Bower to manage front-end packages.

Building the theme requires node.js. We recommend you update to the latest version of npm: npm install -g npm@latest.

From the command line:

1. Install gulp and Bower globally with npm install -g gulp bower
2. Navigate to the theme directory, then run npm install
3. Run bower install

You now have all the necessary dependencies to run the build process.

• gulp — Compile and optimize the files in your assets directory
• gulp watch — Compile assets when file changes are made
• gulp --production — Compile assets for production (no source maps).

To use BrowserSync during gulp watch you need to update devUrl at the bottom of assets/manifest.json to reflect your local development hostname.

For example, if your local development URL is http://project-name.dev you would update the file to read:

...
  "config": {
    "devUrl": "http://project-name.dev"
  }
...

If your local develoment URL looks like http://localhost:8888/project-name/ you would update the file to read:

...
  "config": {
    "devUrl": "http://localhost:8888/project-name/"
  }
...

Sage documentation is available at https://roots.io/sage/docs/.

Contributions are welcome from everyone. We have contributing guidelines to help you get started.

Keep track of development and community news.

• Participate on the Roots Discourse
• Follow @rootswp on Twitter
• Read and subscribe to the Roots Blog
• Subscribe to the Roots Newsletter