README.md in ethosstyles-0.1.15 vs README.md in ethosstyles-0.1.16

@@ -2,9 +2,96 @@
 
 These are Ethos's main styles.
 
 Note: These are foundational styles, and should be edited sparingly. You can still add styles to Moonbeam and OrCA in the `stylesheets` directories.
 
+## Stardust Development Guide
+
+
+1. **Building Stardust Locally**:
+	- Download [Stardust repo](https://git.corp.adobe.com/adobe-platform/stardust).
+	- Build with command `make dev`
+
+    **Troubleshooting**:
+    - You may need to [install sass](https://sass-lang.com/install).
+    - If you're using a VPN, you may need to re-run `docker-machine-nfs [MACHINE-NAME]`
+
+2. **Develop new elements in Moonbeam**
+
+    **Goal**: Create elements available for use in current and future Moonbeam UI.
+
+    Develop new elements for Moonbeam in `moonbeam/app/assets/stylesheets/components/_rf-for-gem.scss`.
+      - Prefix new styles with `.rf-`
+      - Make sure new styles are [BEM-ified](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
+
+3. **Port new elements to Stardust repo**:
+  
+    **Goal**: Add styles to Stardust and demonstrate their intended use. 
+   
+     Involved files:
+  	- `app/assets/stylesheets/components/<new-element>.scss`
+      - Copy the styles directly from `_rf-for-gem.scss` in Moonbeam and paste them here. Your code here must match what is in `_rf-for-gem.scss`.
+      - Demonstrate suggested use with HTML in the comments. For example, from [\_tables.scss](https://git.corp.adobe.com/adobe-platform/stardust/blob/master/app/assets/stylesheets/components/_tables.scss):
+      ```
+      //
+      // Tables
+      //
+
+      //
+      // Structure
+      //
+      //<table class="rf-table">
+      //  <tr class="rf-table__row rf-table__row--header">
+      //    <th class="rf-table__th">Product</th>
+      //    <th class="rf-table__th">Name</th>
+      //  </tr>
+      //  <tbody class="rf-table__body">
+      //    <tr class="rf-table__row">
+      //      <td class="rf-table__td"> Cell #1</td>
+      //      <td class="rf-table__td"> Cell #2</td>
+      //    </tr>
+      //  </tbody>
+      //</table>
+      //
+      // Best Practices
+      //
+      // Set column widths in the header
+      //
+      ```  
+  	- `index.php`:
+  			Add a new section to the display page for the new element
+  	- `app/views/`:
+  		- `<new-element>.php` 
+  				Create new section for the new element
+  		- `partial_<new-element>.php`:
+  				Use to prevent repetitive code
+  	- `app/assets/stylesheets/_ethosstyles.scss`
+  		- Add an `@import` statement for the new element's stylesheet
+
+4. **Update GEM**
+
+   Follow [these instructions](https://adobe.sharepoint.com/:w:/r/sites/EthosPlatformEngineering/Shared%20Documents/Component%20and%20Initiative%20Folders/UI%26UX/Documentation/How%20to%20Publish%20Stardust.docx?d=w27fb8ea13235422d93a52b5608b05791&csf=1&e=IA7QwM) to update the GEM version.
+
+   In order for changes to show up in Moonbeam you may need to:
+   - Clear containters:
+    ```
+    docker rm -f $(docker ps -a|grep -v moonbeam_db|grep -v CONTAINER|awk '{print $1}')
+    docker start moonbeam_db
+    flotilla up moonbeam
+    ```
+
+   - Force a recompiling of the scss elements by editing `application.scss` (for example, add `body {background-color: yellow;}` and save).   
+
+5. **Update Moonbeam** 
+
+   **Goal**: Styles are sourced solely from Stardust GEM. 
+  
+   Remove redundant code from:
+	- Outdated Moonbeam stylehseets
+	- `_rf-for-gem.scss`
+	
+
+
 ## To edit gem
 To develop this gem locally:
 
 1. Clone this repo to your computer.