Skip to content

Latest commit

 

History

History
131 lines (84 loc) · 4.06 KB

CONTRIBUTING.md

File metadata and controls

131 lines (84 loc) · 4.06 KB

CONTRIBUTING

You're awesome! Here at Allied, we love contributers. 😍

GENERAL

Since we're operating on a WordPress platform, their coding standards will always take precedence. See style guide below.

Use EditorConfig in your editor of choice, whitespace flipping is naughty! 😷

Contributing Code

Follow these steps:
  1. Open a new or already existing issue
  2. Fork the repo, create a branch, commit your fix
  3. Push the branch, open a pull request
  4. The core team reviews changes, provides feedback if necessary
  5. If fix is approved core team merges the PR
  6. 🎉 🎉 🎉

Development workflow

For small issues like updating a README or other Markdown files, quick pull request or even commit into master is acceptable. However, for most new code, we use the GitHub flow:

GitHub Flow

STYLE GUIDE

JavaScript

Use WordPress JavaScript Coding Standards as your baseline.

There's too much to list here, but in general we mostly agree with the Airbnb ES6 style guide] and Khan Academy React style guide where applicable.

Selector naming conventions

Simple words separated by hyphens as a preference to camelCasing or underscores.

CSS

Use WordPress CSS Coding Standards as your baseline.

Some suggestions and guidelines that will make the styling codebase simple, readable, consistent and relatively transferable to other CSS processor languages. Approach writing the code with a 'vanilla CSS' ethos, only adding non-standard syntax (SASS or perhaps PostCSS) when absolutely necessary.

Nesting

Try to avoid anything more than a selector nested within an already nested selector (three selectors deep).

.component-name {
  padding: 20px;

  .element {
    font-size: 16px;

    span {
        font-weight: bold;
    }
  }
}

Media queries

Write media queries at the bottom of the component/page file, each one inside of the main selector name so as to be in scope of the component for component specific variables.

.component-name {
  /*...*/

  @media screen and (min-width: $breakpoint) {
    /*...*/
  }
}

Comments

With this approach in mind use CSS comments /* ... */ and not SASS //.

Each CSS file should have the following at the top:

/*
 *  COMPONENT/PAGE NAME
 *  Short description of that component/page
 *
 *  Notes: Anything unusual or complicated to mention
 *  TODO:
 */

Loops, functions etc

If you really need them, then go bananas image but document extensively.

CODE OF CONDUCT

Above all else, be cool. Follow the Open Source Code of Conduct.

🌸 ✌️ :octocat:

ABOUT US

Allied is a global leader in steel construction, developing solutions for every industry. From aviation to warehouses and everything in between, trust Allied to be with you all the way. The names and logos for Allied are trademarks of Allied Steel Buildings, Inc.