search

SAP / luigi

Micro frontend framework
https://luigi-project.io
Apache License 2.0
834 stars 174 forks source link

How can I style the Luigi core elements? #1352

Closed huberv closed 4 years ago

huberv commented 4 years ago

Description

From reading the documentation I would say that the css styles are embedded in the Luigi core. This is fine as long as you are using one of the Fiori Fundamentals libaries, but what about using Luigi with e.g. Google's material design? Is there a way to style Luigi in a consistent and future-proof way?

Reasons

I guess Luigi shouldn't be tied to the SAP Fiori Fundamentals libraries / styles.

hardl commented 4 years ago

Hi, there are several options at the moment: 1) use fundamental styles theming capabilities, see also https://github.com/SAP/theming-base-content, you can already achieve a lot by customizing the css variables 2) manually overwrite the styles where needed, you can check our documentation app as an example (yes, it is a luigi app ;) ) 3) turn off luigi view components completely and implement your own view components for header and navigation

Cheers

huberv commented 4 years ago

Hi Philipp,

Thanks for the swift reply! It would be great to have options 1 and 3 in the official documentation.

azriel46d commented 4 years ago

Hi, there are several options at the moment:

  1. use fundamental styles theming capabilities, see also https://github.com/SAP/theming-base-content, you can already achieve a lot by customizing the css variables
  2. manually overwrite the styles where needed, you can check our documentation app as an example (yes, it is a luigi app ;) )
  3. turn off luigi view components completely and implement your own view components for header and navigation

Cheers

With regards to point 3. Is this implemented externally? or is there some way that the custom view components can be registered/replaced?

The documentation seems to be pointing at the second one but nor really sure with this under the FAQ

Turn off Luigi view components completely via the hideNavigation parameter in the settings: section of your Luigi configuration. Then you can implement your own view components for header and navigation and use the Luigi Core API to set them up with Luigi.
hardl commented 4 years ago

There will be comprehensive examples soon showing how it is done (https://github.com/SAP/luigi/issues/1361) In general, you just define your custom html components as usual (you are owning index.html) and connect them to luigi via luigi core api