Update README with coding standards

README.md

@@ -9,6 +9,9 @@ with  other data to personally identify, track, and/or [target
 them](https://www.facebook.com/business/help/606443329504150?helpref=faq_content).
 
 ## Development
+
+Please refer to our [coding standards](docs/coding-standards.md) information for code styles, naming conventions and other methodologies.
+
 ### Requirements
 * python 3.7 (suggest using
   [virtualenv](https://docs.python-guide.org/dev/virtualenvs/))
@@ -19,7 +22,9 @@ them](https://www.facebook.com/business/help/606443329504150?helpref=faq_content
     * On OSX: `brew install postgresql libpq`
     * On Fedora: `sudo dnf install libpq-devel`
 * [SES](https://aws.amazon.com/ses/) if you want to send real emails
-* [NPM](https://www.npmjs.com/) and [Gulp](https://gulpjs.com/) to compile SCSS
+* [Node 12.X](https://nodejs.org/en/download/) – Needed for front-end SCSS compiling
+  * [NPM](https://www.npmjs.com/)
+  * [Gulp](https://gulpjs.com/) to compile SCSS
 
 ### Install and Run the Site Locally
 1. Clone and change to the directory:
@@ -36,7 +41,7 @@ them](https://www.facebook.com/business/help/606443329504150?helpref=faq_content
     source env/bin/activate
     ```
 
-3. Install Pyhton and Node requirements:
+3. Install Python and Node requirements:
 
     ```sh
     pip install -r requirements.txt
@@ -78,11 +83,9 @@ them](https://www.facebook.com/business/help/606443329504150?helpref=faq_content
     python manage.py runserver
     ```
 
-Next you'll need to enable Firefox Accounts auth ...
-
-#### Enable Firefox Accounts Auth
+#### Recommended: Enable Firefox Accounts authentication
 To enable Firefox Accounts authentication on your local server, you can use the
-"private-relay (local)" OAuth app on oauth-stable.dev.lcip.org.
+"Firefox Private Relay local dev" OAuth app on accounts.stage.mozaws.net.
 
 To do so:
 
@@ -97,31 +100,29 @@ To do so:
 page](http://127.0.0.1:8000/admin/socialaccount/socialapp/), sign in with the
 superuser account you created above, and add a social app for Firefox Accounts:
 
-   * Provider: Firefox Accounts
-   * Name: oauth-stable.dev.lcip.org
-   * Client id: 9ebfe2c2f9ea3c58
-   * Secret key: ping groovecoder for this
-   * Sites: 127.0.0.1:8000 -> Chosen sites
+| Field | Value |
+|-------|-------|
+| Provider | Firefox Accounts |
+| Name | `accounts.stage.mozaws.net` |
+| Client id | `9ebfe2c2f9ea3c58 ` |
+| Secret key | Request this from `#fx-private-relay-eng` Slack channel |
+| Sites | `127.0.0.1:8000 ` -> Chosen sites |
 
 Now you can sign into [http://127.0.0.1:8000/](http://127.0.0.1:8000/) with an
-FxA. Remember: you'll need to use an account on oauth-stable.dev.lcip.org, not
-the production accounts.firefox.com.
-
-#### Enable SES
-TODO
+FxA. 
 
+:warning: Remember that you'll need to use an account on https://accounts.stage.mozaws.net/, not
+the production site, accounts.firefox.com.
 
-### Install and run the add-on locally
+<!-- #### Optional: Enable SES
+TODO -->
 
-The add-on adds Firefox UI to generate and auto-fill email addresses. You may
-want to build the add-on so that it communicates with your `127.0.0.1:8000`
-server instead of the production `relay.firefox.com` server:
 
-1. In the `extension/` directory, run `npm install` and then `npm run build`
+#### Optional: Install and run the add-on locally
 
-2. Use `about:debugging` to install the resulting `static/downloads/addon/latest/private_relay.zip` file.
-   * Note: A link to the `.zip` is also available at http://127.0.0.1:8000/accounts/profile/
+*Note: The add-on is located in a [separate repo](https://github.com/mozilla/fx-private-relay-add-on/). See it for additional information on getting started.* 
 
+The add-on adds Firefox UI to generate and auto-fill email addresses across the web. Running the add-on locally allows it to communicate with your local server (`127.0.0.1:8000`) instead of the production server (`relay.firefox.com`).
 
 ## Production Environments
 

docs/coding-standards.md

@@ -0,0 +1,38 @@
+# Coding Standards
+
+### Lint styles
+
+For JavaScript, we follow [ESLint's recommended rules](https://eslint.org/docs/rules/). 
+
+For SCSS and CSS, we follow [the standard configuration](https://github.com/stylelint/stylelint-config-standard) with a few exceptions noted in the [StyleLint config file](https://github.com/mozilla/fx-private-relay/blob/main/.stylelintrc.json). 
+
+## Protocol Integration
+
+We leverage the Protocol [design system](https://protocol.mozilla.org/docs/glossary.html) and framework. See additional documentation on Protocol at https://protocol.mozilla.org/docs.  
+
+### Class Naming Convention
+
+For ease of integration and to avoid conflicts with other sites, frameworks, and libraries, most classes in Protocol are prefixed with our global namespace `.mzp-` for “Mozilla Protocol”. If the style is custom/outside of Protocol, we drop the `.mzp` prefix.
+
+We follow a [SMACSS-based naming convention](http://smacss.com/book/categorizing) with a set of prefixes to put rules into a few different categories:
+
+- `c-` for component names. Expect a lot of this one, e.g. `.mzp-c-card`, `.mzp-c-button`.
+- `t-` for theme styles, when a component has one or more alternative styles, e.g. `.mzp-t-dark`, `.mzp-t-product-firefox`.
+- `l-` for layout-related styles, e.g. `.mzp-l-content`, `.mzp-l-grid-third`. These are essentially presentational names, mostly used for container elements.
+- `u-` for utility styles, which have a broad scope and can be powerful overrides, e.g. `.mzp-u-inline`, `.mzp-u-title-md`. These are presentational so should be rare. Prefer mixins in a style sheet over classes in HTML.
+- `is-` to indicate a current state, e.g. `.mzp-is-active`, `.mzp-is-collapsed` (typically assigned by JS and not hard-coded).
+- `has-` to indicate that a component contains some other component, when the parent gets some styling to accommodate the child, e.g. `.mzp-has-submenu`, `.mzp-has-image`.
+- `js-` used as a behavior hook for JavaScript, e.g. `.mzp-js-sticky`, `.mzp-js-collapsible`, `.mzp-js-toggle`. Indicates potential for a change of state and usually shouldn’t have any styling.
+- `a- `for CSS animation names, e.g. `.mzp-a-fade-in`, `.mzp-a-slide-from-right`.
+
+Our names are all lowercase and hyphen-separated or “kebab-case,” e.g. `.mzp-c-card`, `.mzp-c-card-title`. This brings with it the potential for long kebabs of multipart, hyphenated names. Names should be as short as possible and as long as necessary. Clarity is key. If we find our names getting obscenely long and confusing we may need to revise our convention but we’re trying it this way first.
+
+### CSS Coding Guide
+
+We follow [Protocol's CSS coding guide](https://protocol.mozilla.org/docs/css-guide.html). See their documentation for additional details. 
+
+- Use [simple selectors](https://protocol.mozilla.org/docs/css-guide.html#simple-selectors)
+- Use [minimal nesting](https://protocol.mozilla.org/docs/css-guide.html#minimal-nesting)
+- [Format](https://protocol.mozilla.org/docs/css-guide.html#format) your CSS
+- Use `//` for [comments](https://protocol.mozilla.org/docs/css-guide.html#comments) in Sass instead of `/* */`
+- Use the [right unit](https://protocol.mozilla.org/docs/css-guide.html#units) for the right context.