10up official starter theme.
Clone or download
timwright12 Merge pull request #86 from 10up/fix/node-require-at-least
Update Node engine to greater than or equal to 8.11
Latest commit 7309320 Oct 30, 2018
Permalink
Failed to load latest commit information.
assets Added newline on base/index.css to addres stylelint error Oct 22, 2018
gulp-tasks EOL fix Oct 11, 2018
includes Merge pull request #77 from 10up/feature/async-defer-tag-support Oct 23, 2018
languages Use the more generic TenUpScaffold text usable for plugins or themes Mar 16, 2018
partials update Mar 16, 2018
templates updated whitespace and cleaned up for scaffolding Aug 3, 2018
tests updated tests Aug 17, 2018
.babelrc Fix spacing according to .editorconfig Jun 14, 2018
.browserslistrc updated and tested packages Aug 27, 2018
.editorconfig Add .browserslistrc to .editorconfig to match plugin scaffold Jun 14, 2018
.eslintignore updated ignore for config files Jun 18, 2018
.eslintrc moved eslint to npm package Jun 14, 2018
.gitignore Remove composer.lock from .gitignore Jun 22, 2018
.stylelintrc EOL fix Oct 11, 2018
README.md Rename deploy to build-release and deploy-lint to lint-release, since… Oct 25, 2018
composer.json Move scripts to composer; fix composer error; simplify phpcs rules Jul 10, 2018
footer.php Fixes phpcs errors Jun 26, 2018
functions.php Code formatting Jul 16, 2018
gulpfile.babel.js stylelint integration Oct 11, 2018
header.php updated tests Aug 17, 2018
index.php Fixes phpcs errors Jun 26, 2018
package.json Update Node engine to greater than or equal to 8.11 Oct 30, 2018
phpcs.xml Move scripts to composer; fix composer error; simplify phpcs rules Jul 10, 2018
screenshot.png Added 10up screenshot.png Jul 19, 2018
style.css Use the more generic TenUpScaffold text usable for plugins or themes Mar 16, 2018
webpack.config.babel.js added auto-fix for JS linting Jul 25, 2018

README.md

10up Scaffold

At 10up, we strive to provide digital products that yield a top-notch user experience. In order to improve both our efficiency and consistency, we need to standardize what we use and how we use it. This theme scaffold allows us to share initial set up procedures to make sure all projects can get up and running as quickly as possible while closely adhering to 10up's high quality standards.

Work with 10up, we create amazing websites and tools that make content management simple and fun using open source tools and platforms

Dependencies

  1. Node & NPM - Build packages and 3rd party dependencies are managed through NPM, so you will need that installed globally
  2. Gulp - Gulp is used as the main task runner, it runs PostCSS, processes images, handles SVG sprites (if needed), and executes Webpack
  3. Webpack - Webpack is used to process the JavaScript
  4. Composer - Composer is used to manage PHP.

Getting Started

Quick Start

Install 10up's command line tool for scaffolding new projects. You can download it from the Project Scaffold repository. Setting up a new theme is as easy as running create-10up theme theme-name-here in the terminal!

Browsersync requires a local development URL. This is currently set in the package.json, as proxyUrl.

Direct Install

  • Clone the repository
  • Rename folder theme-scaffold -> your project's name
  • If copying files manually to an existing theme directory instead of cloning directly from the repository, make sure to include the following files which may be hidden:
.babelrc
.browserslistrc
.editorconfig
.eslintignore
.eslintrc
.gitignore

The NPM commands will fail without these files present.

  • Do case-sensitive search/replace for the following:

    • TenUpScaffold
    • TENUP_SCAFFOLD
    • tenup-scaffold
    • tenup_scaffold
    • 10up Scaffold
  • cd into the theme folder

  • run npm run start

NPM Commands

npm run start (install dependencies and run initial gulp)

npm run watch (watch)

npm run build (build all files)

npm run build-release (build all files for release)

npm run test-a11y (run accessibility tests)

Composer Commands

composer lint (lint PHP files)

composer lint-fix (lint PHP files and automatically correct coding standard violations)

Automated Style Guide

The Theme Scaffolding ships with a default style guide you can find in /templates/page-styleguide.php. This file contains all the basic HTML elements you would find at the very top of the cascade (headings, typography, tables, forms, etc.) These base elements will be styled and displayed as you naturally build out your CSS. The style guide also automatically pulls in the color variables used in the project. Any hex codes added into /assets/css/frontend/global/variables.css will be automatically displayed in the style guide. To set up your style guide, you just need to create a new page in WordPress and assign it the "Style Guide" template.

If you need to update the core styles that power the style guide they are located in /assets/css/styleguide and will naturally process with the rest of the CSS.

As your site grows you can add components to the style guide by updating /templates/page-styleguide.php as you see fit. All the JS and CSS for the site will already be included in the template, so everything should just work.

Automated Accessibility Testing

Automated accessibility testing in the Theme Scaffolding is done with Pa11y and is executed with the command npm run test-a11y. You can find any configuration options inside your package.json file inside the testing object. You will see default URL options (local, staging, production), but you can add as many as you'd like. The default script runs over the local URL and any others will run with an argument like npm run test-a11y production, over a production URL. You can also add more template URLs for testing like npm run a11y-test article-template. Be sure to check with your systems person on a project to make sure accessibility tests are also hooked up through the deploy process.

Compliance levels can also be updated through the testing.accessibility.compliance object in the package.json file. The default is WCAG Level A, but it can be updated to anything listed in the pa11y documentation.

The test file lives in /tests/accessibility/compliance/pa11y.js if any edits are needed (such as staging credentials, if you're running tests in an environment that requires authentication).

Contributing

We don't know everything! We welcome pull requests and spirited, but respectful, debates. Please contribute via pull requests on GitHub.

  1. Fork it!
  2. Create your feature branch: git checkout -b feature/my-new-feature
  3. Commit your changes: git commit -am 'Added some great feature!'
  4. Push to the branch: git push origin feature/my-new-feature
  5. Submit a pull request

Learn more about the default packages used with this project