NeutronCSS/neutroncss

Add equivalent functionality as 'offset' found in other frameworks.

Opened this issue · 2 comments

chris-muller commented

Use-case

  • When user wants a margin of their column to match the width of a column, instead of a fixed size or specific percentage.

Suggested Syntax

// In margin declaration
section {
  @include columns(3, $margin: 10px 1);
}

// In column variable 
section {
  @include columns((2, ~1, 2), $margin: 10px 20px);
}

Considerations

  • Unitless integers in the margin variable will be interpreted as a 'column' unit. During column width calculations, 'column' units will be added to the total column count.
  • Virtual columns can only be applied to left and right margins?
  • What if users want a virtual column and left or right margin?
  • Adding what are essentially 'virtual columns' to the column declaration would allow people to offset by column width, while still having left or right margins.
  • Virtual columns will require adding column width to the left or right margin that is set.

References

Feature request raised in #35: desired behavior can be achieved using align-container() but this additional use-case was identified in the process.

chris-muller commented

Syntax will probably be better as the following:

// In column variable 
section {
  @include columns((2, ~1, 2), $margin: 10px 20px);
}

To better fit in with the future syntax of display: grid in case a grid module is created for Neutron in the future..

  • 👍1