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

Add some layout primitives #779

Open
planktonic opened this issue May 11, 2023 · 1 comment
Open

Add some layout primitives #779

planktonic opened this issue May 11, 2023 · 1 comment
Assignees
@planktonic

Comments

@planktonic
Copy link
Member

Utility classes can be used to create some complex layouts, but it’d be great to have some commonly-used layouts encapsulated in CSS classes. That would avoid having to recreate them in every codebase and template/component system.

Some possibilities listed below. Probably these would be best implemented using some global spacing and line-height variables — those can be used to ensure everything is spaced consistently.

  • vertically stack and separate content. Apply a consistent vertical gap or margin to all the direct children
  • row/column switch. Put content in a row (e.g. a row of action buttons), that switches to a column layout when there’s not enough available width
@planktonic
Copy link
Member Author

Also: a box component, that applies some standard padding around its content, good combined with u-bg classes. The current card component could be a variant of it

@planktonic planktonic self-assigned this May 22, 2023
planktonic added a commit that referenced this issue May 22, 2023
@planktonic
[#779] Add some layout primitives
325861f 
#779
@planktonic planktonic mentioned this issue May 22, 2023
Merged
7 tasks
planktonic added a commit that referenced this issue May 23, 2023
@planktonic
[#779] Add some layout primitives
9b8b3dc 
#779
@planktonic planktonic mentioned this issue May 23, 2023
Merged
7 tasks
planktonic added a commit that referenced this issue Jun 7, 2023
@planktonic
[#779] Add some layout primitives
3ec5039 
#779
planktonic added a commit that referenced this issue Jun 7, 2023
@planktonic
[#779] Add some layout primitives
fe5ef56 
#779
planktonic added a commit that referenced this issue Jul 20, 2023
@planktonic
[#779] Add some layout primitives (switcher) (#784)
45bc652 
feat: New switcher layout primitive

A new layout component at `atoms/switcher`, that lays out its children in a horizontal row with consistent spacing between children. The layout switches to a vertical stack once the width of the component passes below a threshold, or the number of children goes over a limit..

`content-padding` design tokens are now using the same naming scheme as the base size tokens (`l1`, `s1` etc)

#779
planktonic added a commit that referenced this issue Dec 11, 2023
@planktonic
[#779] Add some layout primitives
c05541d 
#779
planktonic added a commit that referenced this issue Dec 11, 2023
@planktonic
[#779] Add some layout primitives (stack) (#781)
304140e 
feat: Adds a `Stack` layout primitive

#779
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@planktonic planktonic

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@planktonic