Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pure CSS Styling for Design System Components #1601

Closed
2 tasks done
go-ma123 opened this issue Dec 5, 2024 · 3 comments
Closed
2 tasks done

Pure CSS Styling for Design System Components #1601

go-ma123 opened this issue Dec 5, 2024 · 3 comments
Labels
wontfix This will not be worked on

Comments

@go-ma123
Copy link

go-ma123 commented Dec 5, 2024 •
edited
Loading

Prerequisites

  • I have read the Contributing Guidelines.
  • I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Suggestion / feature request

Problem statement:

The current design system provides excellent components and functionality for various frontend frameworks like React, Angular, and Vue or Web Components for native usage. This greatly facilitates the development of new applications.

However, there are two important use cases that have not been covered so far:

  1. The migration of existing web applications, without having to rewrite them completely.
  2. The integration of the design system into third-party applications that do not use the same frontend framework as the design system.

For these cases, it would be very helpful if the design system also provided pure CSS styles for all components. This would allow existing applications to be gradually migrated to the design system without having to reimplement the entire frontend code. It would also enable the use of the design system in third-party applications, regardless of the frontend framework they are using.

Proposed Solution:

Extend the design system to include a pure CSS variant of all components. These should be as easy to integrate into existing applications as possible, without requiring additional dependencies or configurations.

Possible Implementation:

  • Provision of CSS stylesheets that can be used separately from the framework-specific components
  • Easy integration via CDN or as an NPM package
  • Documentation on how to integrate into existing projects and third-party applications

Benefits:

  • Facilitates the gradual migration of existing web applications to the design system
  • Enables the use of the design system in third-party applications
  • Increases the reach and usability of the design system
  • Avoids the need for extensive redevelopment of existing applications
@go-ma123 go-ma123 added triage We discuss this topic in our internal weekly type: enhancement New feature or request labels Dec 5, 2024
@danielleroux
Copy link
Collaborator

You dont have to use react, angular and vue at all. The complete library is build based on Web Components which works without any framework, its easy to integrate in any browser based web application.

You can run it in a single html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@siemens/[email protected]/dist/siemens-ix/siemens-ix.esm.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@siemens/[email protected]/dist/siemens-ix/siemens-ix.css"
    />
  </head>
  <body>
    <main>
      <h1>Home page</h1>
      <ix-button>Test</ix-button>
      <ix-blind label="Blind header">Test</ix-blind>
    </main>
  </body>
</html>

If you can replace css inside your code your can also replace the markup with the specific component.

@danielleroux danielleroux removed the type: enhancement New feature or request label Dec 5, 2024
@go-ma123
Copy link
Author

go-ma123 commented Dec 6, 2024

@danielleroux ,
Thank you for your comment and your understanding of my feature request. You are correct that the Siemens IX library already offers Web Components that can be used without an additional framework.

However, my proposal was not about rebuilding the entire application, but only about adapting the appearance to the Siemens Design System. My goal is to gradually adapt the existing appearance of the application to the Siemens Corporate Design without having to change the underlying technology.

Therefore, it would be very helpful for me if there were not only Web Components, but also pure CSS styles that I could simply integrate into my existing application. This way I could gradually change the appearance without having to rewrite the entire code.

I hope this clarifies my concern. Please let me know if there are already solutions for this or if you can further pursue my proposal.

Thank you for your support.

@danielleroux
Copy link
Collaborator

danielleroux commented Dec 6, 2024 •
edited
Loading

I understand your requirements but pure css library is out of scope and will not be implemented. We provide all colors as css variables which can be used to adapt your application.

//EDIT:

As orientation how to use css variables to adapt existing controls like a button you can have a look inside the button styling:
https://github.com/siemens/ix/blob/main/packages/core/src/components/button/button-mixin.scss#L15-L34

@danielleroux danielleroux closed this as not planned Won't fix, can't repro, duplicate, stale Dec 6, 2024
@danielleroux danielleroux added wontfix This will not be worked on and removed triage We discuss this topic in our internal weekly labels Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
wontfix This will not be worked on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@danielleroux @go-ma123