Alternative for FlexLayout Lib after dropped support v15+

[mattiLeBlanc]

Hi,

for people using the basic patterns of the flex layout lib, you can just included a SCSS file with the following definitions:

[fxLayout]{
 box-sizing: border-box;
 display: flex;
}

[fxLayout="row wrap"]{
 flex-flow: row wrap;
}

[fxLayout="row"]{
 flex-direction: row;
}
[fxLayout="column"]{
 flex-direction: column;
}

[fxLayoutAlign="center center"]{
 display: flex;
 place-content: center;
 align-items: center;
}

[fxLayoutAlign="start center"]{
 display: flex;
 place-content: center flex-start;
 align-items: center;
}

[fxLayoutAlign="start start"]{
 display: flex;
 place-content: flex-start flex-start;
 align-items: center;
}

[fxLayoutAlign="end center"]{
 display: flex;
 place-content: center flex-end;
 align-items: center;
}

[fxFlex]{
 box-sizing: border-box;
 display: flex;
 flex: 1 1 100%;
}

[fxFlex="none"]{
 flex: none;
}

@media only screen and (min-width: 960px){
 [fxFlex-gt-sm="50"]{
 flex: 1 1 50% !important;
 box-sizing: border-box;
 max-width: 50% !important;
 }
 [fxFlex-gt-sm="33"]{
 flex: 1 1 33% !important;
 box-sizing: border-box;
 max-width: 33% !important;
 }
}


[fxFlex="33"]{
 flex: 1 1 33%;
 box-sizing: border-box;
 max-width: 33%;
}

[fxFlex="67"]{
 flex: 1 1 33%;
 box-sizing: border-box;
 max-width: 33%;
}



@mixin flex{
 @for $i from 0 through 20{
 [fxFlex="#{$i*5}"]{
 flex: 1 1 $i*5%;
 box-sizing: border-box;
 max-width: $i*5%;
 }
 }
}
@include flex;

You can extend it yourself to included more definitions.

[philmtd]

I've made a SCSS library some years ago that can replace some of the most popular functionality: https://github.com/philmtd/css-fx-layout

[stevebor1]

I've made a SCSS library some years ago that can replace some of the most popular functionality: https://github.com/philmtd/css-fx-layout

@philmtd What is your library lacking, in comparison to flex-layout? It seems to cover most of the static and responsive 'api' except the responsive ngClass and ngStyle directives (of course)

[philmtd]

Edit (March 2023): I‘ve improved the lib and documentation and have more details on how to migrate and the differences here: https://philmtd.github.io/css-fx-layout/docs/flex-layout-migration

---

@philmtd What is your library lacking, in comparison to flex-layout? It seems to cover most of the static and responsive 'api' except the responsive ngClass and ngStyle directives (of course)

@stevebor1 Basically my library uses statically generated CSS selectors to achieve what Flex Layout does. This means every selector/value combination needs to be generated upfront (more or less). So what you e.g. cannot do is fxFlex="<random percentage or CSS flex term>" because we unfortunately cannot read arbitrary attribute values in CSS.
That's why you e.g. need to specify in my library which units and sizes you want to include for your gap-properties.

Also it's lacking everything that requires JavaScript, e.g. observing responsive layout breakpoints or, as you mentioned, adding classes or styles dynamically. You could workaround that using the available mixins though. It may also miss some smart convenience features: Angular Flex Layout makes assumptions when you use responsive layouts, e.g. if you define many responsive layouts but did not specify all breakpoint, it will make smart assumptions what layout to use for the missing ones. Or it is adding fxLayout directives to parents of elements with fxFlex if they are missing. I've implemented that but it is currently not supported in all browsers (boo Firefox).

Apart from that I guess it now covers most of the static and responsive API. My last week's comment is a little outdated actually because I updated the library to include some more features like the responsive API in the past days.

[stevebor1]

@philmtd I think being explicit rather than making assumptions is fine and a good trade-off going from this to a pure css library is OK. Also, I like being explicit on setting defined units/sizes, to keep things consistent throughout the UI, especially when you have many developers working on different section of the app. Bravo and be ready for more activity on your library!

[DuncanFaulkner]

Hi, I'm looking to take over the maintenance of this library - initially just to keep the lights on - and keep it in line with the Angular release schedule (within 4 weeks of a release), once things are stable then look to see what the community would like to see from this library (first thing on my list is to move it out "beta", but little steps to start with).

I would also be looking for support from the community to help out where possible, I've used this library for a number of years myself and I like so many of you in the community don't want to this library to disappear.

So hopefully I can get this sorted soon - which I know may come too late for some as I see many have started to plan a migration and I fully get that you have to do what's right for your projects today.

hopefully will have more info on this soon

[DuncanFaulkner]

Looking to get started on this this week

[pashvin]

Here is alternative - https://www.npmjs.com/package/ngx-flexible-layout

[DuncanFaulkner]

I've now setup a clone of the Angular Flex-Layout library- this is still very much at the early stages but I've got the GitHub repo set up along with the Circle CI and a package on NPM.

The new home is now at

@ngbracket/ngx-layout.

I've pushed up a pre-release version 15.0.1-beta.42, this version is just an initial release just to make sure things are working, the only thing that got changed was the name which has been changed from @angular to @ngbracket, some of the readme's, and documentation still need to be updated to reflect this change which I'm hoping to complete shortly.

Please do check it out I welcome all feedback
@pashvin @mattiLeBlanc @CaerusKaru @philmtd @stevebor1

[smiccoli]

i still have to try it, but shouldnt the following

[fxFlex="67"]{
flex: 1 1 33%;
box-sizing: border-box;
max-width: 33%;
}

be like this?

[fxFlex="67"]{
flex: 1 1 67%;
box-sizing: border-box;
max-width: 67%;
}

[mattiLeBlanc]

Yes you are right. Sloppy paste error on my side

…

On Tue, 1 Aug 2023 at 23:56, smiccoli ***@***.***> wrote: i still have to try it, but shouldnt the following [fxFlex="67"]{ flex: 1 1 33%; box-sizing: border-box; max-width: 33%; } be like this? [fxFlex="67"]{ flex: 1 1 67%; box-sizing: border-box; max-width: 67%; } — Reply to this email directly, view it on GitHub <#1433 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABIKJKZBAZLBX6I4JCN6J7LXTERLBANCNFSM6AAAAAATHMTUOE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[joelcoxokc]

I've made a simple gist that I am using.

https://gist.github.com/joelcoxokc/1e22ed83ad0ed2359217bdecb88f76b7

You can easily paste the sass code into https://www.sassmeister.com/ and play around to make your own.

I've copied the same properties used in @angular/flex-layout... at least the ones I use.

[aeslinger0]

I've made a SCSS library some years ago that can replace some of the most popular functionality: https://github.com/philmtd/css-fx-layout

I'll vouch for this library. It wasn't too bad to implement if you use the data- attribute method of doing it and when I switched I saw an immediate performance improvement over flex-layout by eliminating a layout-thrashing issue that was plaguing me for way too long.

[DuncanFaulkner]

@ngbracket/ngx-layout now supports version 18.1 of Angular

https://www.npmjs.com/package/@ngbracket/ngx-layout

[philmtd]

I've made a SCSS library some years ago that can replace some of the most popular functionality: https://github.com/philmtd/css-fx-layout

I'll vouch for this library. It wasn't too bad to implement if you use the data- attribute method of doing it and when I switched I saw an immediate performance improvement over flex-layout by eliminating a layout-thrashing issue that was plaguing me for way too long.

Thanks for this feedback here! I actually added a simple migration script to automate most of the todos so the switch should be a relatively easy task depending on the project's size and the used features.