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.

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

Provide examples/templates for arrangements of components #462

Open
silentHoo opened this issue Nov 25, 2021 · 1 comment
Open

Provide examples/templates for arrangements of components #462

silentHoo opened this issue Nov 25, 2021 · 1 comment
Labels
feature This issue introduces a new feature

Comments

@silentHoo
Copy link
Member

silentHoo commented Nov 25, 2021

As a developer I want to speed up my development workflow and don't want to waste time by moving around components to get a good looking layout.

So why we don't add some example HTML code to speed that up? It's about how components fit together. How does it look good? At which spacing?
If you look at https://daisyui.com/components/footer, you'll see there are multiple layout variants for a footer.

If you talk about Design Systems in Brad Frost speech: Example HTML Code is all about Molecules and Organisms. Molecules for example are something like a text input and search button. Organisms are a lot bigger: They may include Molecules but also contain simple/atomic components. We should add example code of how someone can achieve Organisms with a handful of element components.

So my proposal here is to introduce new Storybook sections to demonstrate how someone can tie together multiple elements to a nice looking arrangement or a nice looking page. Just by copying the HTML code from that Storybook section. Let the user play around with the code by using StackBlitz or similar live tooling.

Acceptance Criteria

  • To start small, just look what others build with elements. At inovex several projects were created based on the elements. So we can start by inspecting existing organisms and generalize them.
  • Create an issue for every generalized organism.
@silentHoo silentHoo added feature This issue introduces a new feature discussion This issue needs to be discussed further new This issue has been recently added and has no estimation labels Nov 25, 2021
@silentHoo silentHoo added this to the Next milestone Nov 25, 2021
@silentHoo silentHoo mentioned this issue Nov 25, 2021
11 tasks
@silentHoo
Copy link
Member Author

We could distinguish here between Components for the basic structure of WebApps and Components for common use cases.

@silentHoo silentHoo added est-high and removed discussion This issue needs to be discussed further new This issue has been recently added and has no estimation labels Feb 15, 2022
@janivo janivo removed the est-high label May 24, 2022
@pfecht pfecht modified the milestones: Next, Docs & Getting Started Jun 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature This issue introduces a new feature
Projects
None yet
Development

No branches or pull requests

3 participants