search

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

Use logical properties for padding & margin? #777

Open planktonic opened 1 year ago

planktonic commented 1 year ago

See the discussion here: https://github.com/bitcrowd/bitstyles/pull/751#discussion_r1188688370

Should we:

Update the default config for e.g. margin & padding utility classes to use block and inline (including the naming of the classes)

So .u-margin-s4-y becomes .u-margin-s4-block, .u-padding-s4-x becomes .u-padding-s4-inline. The styles they apply would also be updated to match e.g.

.u-margin-s4-block {
  margin-block: var(--bs-size-s4);
}

Update Sass variables that refer to e.g. padding-vertical, padding-horizontal to padding-block and padding-inline

See badges, buttons, inputs, selects etc.

The CSS properties should also be updated — we should not call a Sass variable padding-block but apply padding-top and padding-bottom in CSS, it should apply padding-block.

Update all instances of padding & margin to use the logical properties

This would make bitstyles more writing-direction friendly. Using padding and margin shorthands doesn’t apply logical properties, we’d have to split those out into their block and inline properties