Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alternative for FlexLayout Lib after dropped support v15+ #1433

Open
mattiLeBlanc opened this issue Dec 23, 2022 · 15 comments
Open

Alternative for FlexLayout Lib after dropped support v15+ #1433

mattiLeBlanc opened this issue Dec 23, 2022 · 15 comments

Comments

@mattiLeBlanc
Copy link

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.

@mattiLeBlanc mattiLeBlanc changed the title Alternative for FlexLayout Lib Alternative for FlexLayout Lib after dropped support v15+ Dec 23, 2022
@philmtd
Copy link

philmtd commented Dec 26, 2022

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
Copy link

stevebor1 commented Jan 5, 2023

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
Copy link

philmtd commented Jan 5, 2023

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
Copy link

@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
Copy link
Contributor

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
Copy link
Contributor

Looking to get started on this this week

@pashvin
Copy link

pashvin commented Jan 28, 2023

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

@DuncanFaulkner
Copy link
Contributor

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
Copy link

smiccoli commented Aug 1, 2023

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
Copy link
Author

mattiLeBlanc commented Aug 1, 2023 via email

@joelcoxokc
Copy link

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
Copy link

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
Copy link
Contributor

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

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

@philmtd
Copy link

philmtd commented Jul 19, 2024

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.

@mattiLeBlanc
Copy link
Author

i am a long time user of fxLayout, but I must say after dropped support I moved to Tailwind. The have a nice flexbox and grid system and ton of other utilities and they have some kind of CSS treeshaking.

If you really want inline css, like fxLayout does, then ignore this comment but otherwise, tailwind is a good alternative.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants