Add a flex layout abstraction

[StarLederer]

Originally posted by @jojojojojoj5564656465465

Would you be abble to add this to Windblade ;

[StarLederer]

I am not quite understanding what you mean. What do the numbers mean, maximum elements in a row/column?

[jojojojojoj5564656465465]

The number is the location area where the child div must be

the

is divided in 9 areas and it make easy to locate where you would like to place the child div

[jojojojojoj5564656465465]

[jojojojojoj5564656465465]

.flex-row-1{
display: flex
justify-content: start
align-items: start;
}

[jojojojojoj5564656465465]

/^flex-(row|col)-(\d)$/

[StarLederer]

Doesn't order-{number} already solve that? It is a Tailwind utility already present in Windblade that can change where the item is placed within a grid or flexbox.

[jojojojojoj5564656465465]

no more need to lear justify-start or item-end

[jojojojojoj5564656465465]

It's working now hope it ll be in your preset

[jojojojojoj5564656465465]

rules: [
    [
      /^flex-(row|col)-(\d)$/,
      ([, direction, number]) => {
        function dd(d: 'row' | 'col'): string {
          if (d === 'row') {
            return 'row'
          } else {
            return 'column'
          }
        }
        function area(n: number): string {
          let position: string[]
          switch (n) {
            case 1:
              position = ['start', 'start']
              break
            case 2:
              position = ['center', 'start']
              break
            case 3:
              position = ['end', 'start']
              break
            case 4:
              position = ['start', 'center']
              break
            case 5:
              position = ['center', 'center']
              break
            case 6:
              position = ['end', 'center']
              break
            case 7:
              position = ['start', 'end']
              break
            case 8:
              position = ['center', 'end']
              break
            case 9:
              position = ['end', 'end']
              break

            default:
              position = []
              break
          }
          return position
        }

        let direction2 = dd(direction as 'row' | 'col')
        let number2 = area(Number(number))
        return {
          display: 'flex',
          'flex-direction': direction2,
          'justify-content': number2[0],
          'align-items': number2[1],
        }
      },
    ]

[StarLederer]

Oh I get it now, that does seem quite convenient but Windblade aims to be similar to Tailwind in utility names and functions and I don't think this abstraction fits in.

An alternative that I think fits better would be to use logical values (e.g flex-row-(ss|be|es)) but even then this ignores options like 'justify-content: space-between' and unnecessarily abstracts align-content. In fact I already removed Space Between, Divide and Ring originally found in Tailwind because they pretend to be CSS features and can crate confusion when used together with Margin, Border and Shadow.

I think your idea is pretty useful so you should probably publish it as your own small preset that can be used together with others. I can help you setting it up if you need.

At the same time, I remain open to adding it in the future if we determine that more abstraction is useful, this would require testing with large group of developers which is not possible at the moment.

[jojojojojoj5564656465465]

Thank you very much.

What do you think of doing a Separate file windblade.config.ts where user could activate or desactivate community rules like mine.

Windblade could become a directory of rules and any one could do

{
Flex-triks:true
Nth-chilllll:false
}

You would have to store all the community rules and leave user decide what would help or not

[StarLederer]

I this is a great idea but that is also what UnoCSS already does itself so I really don't think we should make this part of Windblade.

You can have many presets at the same time so instead of

import { defineConfig } from 'unocss';
import presetWindblade from 'unocss-preset-windblade';

export default defineConfig({
  presets: [
    presetWindblade({
      flexTricks: true,
    }),
  ],
});

you just do

import { defineConfig } from 'unocss';
import presetWindblade from 'unocss-preset-windblade';
import presetFlexTricks from 'unocss-preset-flex-tricks'; // you'll need to publish it on NPM

export default defineConfig({
  presets: [
    presetWindblade(),
    presetFlexTricks(),
  ],
});

Once Windblade documentation is done I will reach out to @antfu (the creator of UnoCSS) to discuss if my documentation framework can be adopted in official UnoCSS presets and if we can collaborate on turning my documentation page into a visual library and documentation inspector of all compatible community presets (similar to Nuxt modules page) so they have a better chance at getting discovered.

If you want to start a discussion about this please do so here instead of replying in this issue.