website new design

The idea is to create a new (shared) design for 4 libraries:

• fundamental-styles
• fundamental-ngx
• fundamental-react
• fundamental-vue An option for the 4th doc websites is to share the same design but have slightly different colors. A nice touch could be an pption to reflect the branding color of each library. So Angular is red, React is blue, Vue is green.

Here are some requirements:

• Landing page (listing all the 4 libraries)
• artifacts will be grouped in different section (similar to the current ones)
• left navigation
• main content
• (right page navigation)
• each component doc page will /might have
  • description, overview, general documentation
  • option to show components in LTR and RTL mode
  • API/properties (e.g. https://sap.github.io/fundamental-ngx/alert/api\)
  • examples(code snippet and how the code will be interpreted by the browser). The snippets could be multiple files. For instance, there could be a typescript file which is combined with an html file and a css file. These should all be separated. We can offer Copy functionality so the user can copy the code in their clipboard. Maybe options for collapse/expand of the code
  • playground

It would be great to go over all the documentation websites and see what features there are.

• https://sap.github.io/fundamental-styles/
• https://sap.github.io/fundamental-ngx/home
• https://sap.github.io/fundamental-react/home
• https://sap.github.io/fundamental-vue/

[ChristianKienle]

Fundamental Vue has a Run-button that, when pressed, will launch the corresponding example is a code sandbox which allows you to run and edit the example.

[MattL75]

@saad-mo In my opinion the code should always be collapsed initially, with a button expanding it (and then showcasing the different files, allowing users to switch between them). Similar to Material’s approach would be nice.