flex box mixin #2077
flex box mixin #2077
Conversation
sweet pt-flex-container mixinPreview: documentation | landing | table |
break margin logic into default, lastPreview: documentation | landing | table |
| // applies margin along axis of direction between every direct child, with no margins on either end. | ||
| // $direction: row | column | ||
| // $margin: margin[-right|-bottom] value | ||
| @mixin pt-flex-margin($direction, $margin) { |
There was a problem hiding this comment.
this whole thing inspired by "Spacing children" section on https://typestyle.github.io/#/box.
I used a similar pattern to great success in recent app development: huge reduction in layout headaches when you apply spacing to all children at the container level.
There was a problem hiding this comment.
super neat. since we don't export Sass functions/mixins, what do you think about providing utility classes?
There was a problem hiding this comment.
we do expose these sass functions... we ship all the original .scss files.
i'd be open to adding classes, but that can be done additively later. it's tricky cuz the mixin takes a bunch of parameters, but classes are static styles so we'd have to choose defaults (less flexible) or provide many classes (unwieldy).
sweet
pt-flex-container($dir, $margin, $inline, $fill)mixin does it all!@adidahiya this is the base branch for other flex PRs, but currently it contains just the code for the flex mixin so we can review that separately from the PRs that use it.