at-import / Singularity

Grids without limits
MIT License
1.5k stars 109 forks source link

Update on Flexbox-based output style? #225

Open lrobeson opened 8 years ago

lrobeson commented 8 years ago

I know the wiki mentions this, but curious if there are still plans to add a flexbox-based output style?

patrickcate commented 8 years ago

I'd like to know this as well.

garrettw commented 7 years ago

As would I. I like the fact that Singularity uses mixins instead of grid classes which allows for more semantic markup, but having that combined with a flexbox-based grid is what I want. I started out looking at Bourbon Neat which also allows semantic markup, but my search for flexbox led me to Batch -- which uses grid classes. Ugh! I'm starting to wonder if I'm gonna need to hack together my own solution.

Vagelis-Prokopiou commented 7 years ago

@garrettw, flexbox is just a handful of commands. I don't think that any kind of flexbox framework is required.

garrettw commented 7 years ago

@Vaggos I could say the same thing about a float-based layout. You're free to think what you want, of course, but I personally think it would be helpful to have a flexbox-based system that's as easy to use as Bootstrap (like Batch is) but that's built around mixins so that I can use my own CSS selectors. Oh and it needs to be something without device-based breakpoints so that I can easily set my own based around the content.

But I'm about to start trying to make Batch into what I want anyway.

scottkellum commented 7 years ago

@garrettw In having worked on a flexbox output mode a while back I keep coming back to @Vaggos’ point. The syntax is close enough that abstraction is superfluous. Writing display: flex already snaps children into a grid and then flex: # where # is the singularity column-span function means that creating an output mode is not simplifying things, it’s obscuring how the CSS works.

If more lines of code were to go into flexbox I would have probably continued work on this output mode, but I’d suggest you use the flexbox syntax here. You can map Flexbox to the Singularity config, but I’d rather not obscure something unnecessarily. There is an API you can leverage to make this an output mode if you wish to have it as an output mode.

garrettw commented 7 years ago

Fair enough. Thanks for the input.

LndnMdiaLb commented 7 years ago

Singularity is genius I've only been toying with it for a day or 2 and I'm amazed. Scott says Flexbox does not require an abstraction. Does this mean that in 2017 you are not future-proofing yourself by starting to use it? I want the answer to be no and that there are a wide spectrum of reasons why. My fear is that it is a piece of brilliant technical engineering on a soon to be redundant layout methodology. Are there reasons to use Singularity now that Flexbox is widely adopted?

TylerBarnes commented 7 years ago

@LndnMdiaLb Flexbox is not a good grid tool. What we're waiting on that will replace singularity is the css-grid spec. It is finished as far as I'm aware and supported by most of the major browsers. According to the readme, singularity development has stopped because of this. https://github.com/at-import/Singularity#css-grids-and-singularity

LndnMdiaLb commented 7 years ago

@tyler-barnes Thank you very much for clarifying