home.md

Welcome to the EOS project wiki

This Wiki defines the Design System used to deliver UX, UI, front-end, and other deliverables for the EOS project found at https://github.com/EOS-uiux-Solutions

EOS product vision

A living, open, and customizable Design System for front-end developers and UX designers at SUSE and SMEs to efficiently deliver and implement industry-standard practices that will help brands achieve consistency and success.

EOS Design System, what is it actually?

• The EOS Design System is not limited to 1 specific product or a set of them. Instead, to any product in a given organization. This means that the results of EOS can be implemented in either existing and upcoming products.
• EOS is a Design System, that means, a set of components, guides, and definitions to help designers and front-end developers design their interfaces efficiently and consistently.
• Features in a product are, normally, a set of components together to provide functionality for a certain website following specific use cases and scenarios. EOS doesn't provide features, but components. The product's designers/front-end dev take care of assembling the components into features.
• Read the product mission statement to understand the scope of the product: https://eos-mission.webflow.io/

Project setup

• EOS setup instructions
• Configuring Gmail
• Environment variables
• Feature flagging
• Strapi CMS
  • Manually dumping and restoring the DB

Developing the EOS project

Git

• Naming conventions for new branches
• Pull requests, approvals, and merging to Master
  • PR templates

Writing code

• Writing standard SCSS code
  • Code commenting standards
  • SCSS structure
• Writing standard JS code
• Writing standard pug code
• EOS code snippets

Writing accessible HTML

• A11Y
• Using VoiceOver screen reader on MAC
• Testing A11Y with Axe and Cypress

Releases

• Deploying and versioning releases with tags
• Semantic releases
• Managing front-end packages

Designing the EOS project

• Personas
• Photoshop documents guideline
• Logo icon
• Design process and feedback gathering
• Backing up design files
• Adding design specifications in Strapi

Designing new icons for EOS-icons

If you are sending a new icon to EOS-icons, please make sure your SVG is compliant to all the rules defined at:

1. Icon design guide
2. File conventions for creating new icons
3. Icon review checklist

User Analytics

• User analytics
  • Link event tracking

Investigations

• SVG icons to font
• Autofill the SCSS code snippets automatically

EOS web components

• Development
• Publishing