Document Design Principles

sebald commented 4 years ago

By "design principles" I mean on a technological level, not design design.

When we really start to do some documentation, I guess we also need to tell people about the philosophy and our thinking behind the components and their API. For example, why did we chose the "Box-principle" or why do we use layout components (#118)?

This issue should be used to collect these things. I'll update the description based on our discussion below.

Structure

Let's plan a structure of the docs first:

INTRODUCTION

[x] Getting Started (#1744)
[x] About (#1761)
[ ] Design Principles
- strict vs flexible API
- style props + variants + theming
- composition
- a11y
FAQ
- [x] What are Design Systems (#1752)
- [ ] Why is component X missing?
- [ ] Why React?
- [ ] Why emotion (or CSS-in-JS)?

CONCEPTS

[ ] Primitives
- Box
[ ] Styling
- Design Tokens
- CSS-in-JS
- Responsive Values
[x] Layout
- isolated layouts (margin considered harmful)
[ ] Theming

github-actions[bot] commented 4 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 3 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

ti10le commented 3 years ago

We will do this when we have the Marigold docs gatsby page. Maybe we get content from UX/UI team

viktoria-schwarz commented 3 years ago

For the record: https://visly.app/blogposts/layout-isolated-components

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

ti10le commented 2 years ago

Todos:

[x] Why CSS-in-JS? (#1350)
[X] The Box as a primitive
[ ] Design Tokens + Scales / 8pt Grid (maybe infos from Confluence Marigold Layout)
[ ] Responsive Style Values (@theme-ui/css) - how does it work, why we use it, ...
[X] Theming (design token interpolation + variants)
[ ] Layout components (maybe explanation in Stack, Column component or we need a separate page to explain all Layout components?)

ti10le commented 2 years ago

Design Tokens + Scales / 8pt Grid (maybe infos from Confluence Marigold Layout)

Should we display in marigold the same doc like in this confluence link? With all links an images? @sebald @viktoria-schwarz @andres-dediego I would say yes. Have made a branch to start with this guide: origin/guide-design-tokens

viktoria-schwarz commented 2 years ago

I don't think we have implemented all the functions yet, nor the 8 pt grid or am I wrong?

sebald commented 2 years ago

That's not a component but rather a design principle :)

Viktoria Schwarz @.***> schrieb am Mi., 6. Okt. 2021, 15:37:

I don't think we have implemented all the functions yet, nor the 8 pt grid or am I wrong?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/marigold-ui/marigold/issues/144#issuecomment-936250968, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHQUZMNPRHS62NHBOA3PH3UFRGJ3ANCNFSM4LSXDWXQ .

ti10le commented 2 years ago

and what do you basically think about my question? 😄

sebald commented 2 years ago

No

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 120 days with no activity. Remove stale label or comment or this will be closed in 5 days.

sebald commented 1 year ago

Introduction

Principles

strict vs flexible
composition (of components)
a11y
DX (typed + native props)

Concepts

Primitive: Box
Styling: Design Tokens, CSS-in-JS, Responsive Values
Layout: isolated layouts (margin considered harmful)
Theming: variants + size, styling components
Forms: how to use form components, validation?

Recipes

Navigation
App shell

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 120 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 11 months ago

This issue is stale because it has been open 120 days with no activity. Remove stale label or comment or this will be closed in 5 days.

marigold-ui / marigold