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.
   • Build with command make dev

   Troubleshooting:

   • You may need to install sass.
   • 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

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: ``` // // Tables //

   // // Structure // //

   // // // // // // // // // // //

   Product	Name
   Cell #1	Cell #2

   // // 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 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).

1. 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.