ethosstyles

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

Dependencies

Stardust uses the .scss icon files from Font Awesome 5.6.3