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

Document Design Principles #144

Closed
4 of 11 tasks
sebald opened this issue Mar 24, 2020 · 21 comments
Closed
4 of 11 tasks

Document Design Principles #144

sebald opened this issue Mar 24, 2020 · 21 comments
Assignees
@sebald
Labels
status:ready Ready for development type:docs Improvements or additions to documentation

Comments

@sebald
Copy link
Member

sebald commented Mar 24, 2020 •
edited

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

CONCEPTS

  • Primitives
    • Box
  • Styling
    • Design Tokens
    • CSS-in-JS
    • Responsive Values
  • Layout
    • isolated layouts (margin considered harmful)
  • Theming
@sebald sebald added the type:docs Improvements or additions to documentation label Mar 24, 2020
@sebald sebald changed the title RFC: Design Principles RFC: Document Principles Mar 31, 2020
@sebald sebald changed the title RFC: Document Principles RFC: Document Design Principles Mar 31, 2020
@github-actions
Copy link
Contributor

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 github-actions bot added the Stale label May 20, 2020
@sebald sebald removed the Stale label May 20, 2020
@sebald sebald changed the title RFC: Document Design Principles Document Design Principles May 27, 2020
sebald added a commit that referenced this issue Jun 4, 2020
@sebald
feat(docs): Add starting sections to "concepts & principles"
9db1f38 
Ref #144
@sebald sebald mentioned this issue Jun 4, 2020
Merged
viktoria-schwarz pushed a commit that referenced this issue Jun 8, 2020
@sebald
feat(docs): First part of "concepts & principles" (#298)
8f16c74 
* feat(docs): Add starting sections to "concepts & principles"

Ref #144

* typos
@github-actions
Copy link
Contributor

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 github-actions bot added the Stale label Jun 27, 2020
@sebald sebald removed the Stale label Jun 27, 2020
@github-actions
Copy link
Contributor

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 github-actions bot added the Stale label Jul 28, 2020
@github-actions github-actions bot closed this as completed Aug 2, 2020
@ti10le ti10le removed the Stale label Aug 3, 2020
@ti10le ti10le reopened this Aug 3, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Sep 3, 2020

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 github-actions bot added the Stale label Sep 3, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Oct 8, 2020

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 github-actions bot added the Stale label Oct 8, 2020
@sebald sebald removed the Stale label Oct 8, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Nov 8, 2020

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 github-actions bot added the Stale label Nov 8, 2020
@sebald sebald reopened this Nov 14, 2020
@ti10le ti10le removed the Stale label Nov 17, 2020
@github-actions
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

ti10le commented Sep 29, 2021 •
edited

Todos:

  • Why CSS-in-JS? (docs: foundation about css-in-js #1350)
  • 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, ...
  • 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
Copy link
Contributor

ti10le commented Sep 30, 2021 •
edited

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
Copy link
Contributor

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

@sebald
Copy link
Member Author

sebald commented Oct 6, 2021 via email

@ti10le ti10le added the status:ready Ready for development label Oct 8, 2021
@ti10le
Copy link
Contributor

ti10le commented Oct 8, 2021

and what do you basically think about my question? 😄

@sebald
Copy link
Member Author

sebald commented Dec 1, 2021

No

@ti10le ti10le mentioned this issue Jan 26, 2022
Closed
@sebald sebald self-assigned this Feb 3, 2022
This was referenced Feb 3, 2022
Merged
Merged
@ti10le ti10le mentioned this issue Mar 23, 2022
Closed
59 tasks
@ti10le ti10le mentioned this issue Apr 1, 2022
Closed
@github-actions
Copy link
Contributor

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 github-actions bot closed this as completed Aug 6, 2022
@sarahgm sarahgm mentioned this issue Aug 10, 2022
Closed
26 tasks
@sebald sebald reopened this Aug 12, 2022
@sebald
Copy link
Member Author

sebald commented Aug 16, 2022 •
edited

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
Copy link
Contributor

github-actions bot commented Feb 8, 2023

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
Copy link
Contributor

github-actions bot commented Jun 9, 2023

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.

@sarahgm sarahgm closed this as completed Aug 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sebald sebald

Labels
status:ready Ready for development type:docs Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@sebald @sarahgm @viktoria-schwarz @ti10le