# Ethos Styles

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.

2. Replace gem name with gem file path in Gemfile:

        # gem "ethosstyles"
        gem "ethosstyles", :path => "/usr/ethosstyles"

3. Add directory to `docker-compose.yml` under volumes within web:

        web:
          ...
          volumes:
            ...
            - ../ethosstyles:/usr/ethosstyles

4. You may need to rebuild moonbeam.

        flotilla rebuild moonbeam


## Process

**Review any changes on Moonbeam and OrCA before pushing to [prod](https://rubygems.org/gems/ethosstyles).**