zaydek / duomo

CSS component for implementing layout

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Todo] Extract pure Flexbox classes

zaydek opened this issue · comments

Here are the options:

$-justify-opts: (
	justify-stretch: stretch,
	justify-start: flex-start,
	justify-center: center,
	justify-end: flex-end,
	justify-baseline: baseline,
);

$-justify-self-opts: (
	justify-self-stretch: stretch,
	justify-self-start: flex-start,
	justify-self-center: center,
	justify-self-end: flex-end,
	justify-self-baseline: baseline,
);

$-align-opts: (
	align-stretch: stretch,
	align-start: flex-start,
	align-center: center,
	align-end: flex-end,
	align-baseline: baseline,
);

$-align-self-opts: (
	align-self-stretch: stretch,
	align-self-start: flex-start,
	align-self-center: center,
	align-self-end: flex-end,
	align-self-baseline: baseline,
);

$-wrap-opts: (
	wrap: wrap,
	wrap-reverse: wrap-reverse,
	wrap-none: nowrap,
);

So this should basically be +5 files, very similar to your work on cursors. You don’t have to write tests for these but you’re welcome to.

The expected output is something like:

// core/justify-content.scss
.justify-start {
  justify-content: flex-start;
}
// ...

// core/justify-self.scss
.justify-self-start {
  justify-self: flex-start;
}
// ...

// core/align-items.scss
.align-start {
  align-items: flex-start;
}
// ...

// core/align-self.scss
.align-self-start {
  align-self: flex-start;
}
// ...

// core/flex-wrap.scss
.wrap {
  flex-wrap: wrap;
}
// ...

All of the options should be in the same file.