Add some layout primitives - Githubissues

bitcrowd / bitstyles

A complete design system, with base styles and components, built in Sass using CSS variables

https://bitcrowd.github.io/bitstyles

ISC License

16 stars 0 forks source link

Add some layout primitives #779

Open planktonic opened 1 year ago

planktonic commented 1 year ago

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 commented 1 year ago

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