Comments (11)
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
from flex-layout.
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
from flex-layout.
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
from flex-layout.
Here is alternative - https://www.npmjs.com/package/ngx-flexible-layout
from flex-layout.
Looking to get started on this this week
from flex-layout.
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.
from flex-layout.
@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!
from flex-layout.
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)
from flex-layout.
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%;
}
from flex-layout.
from flex-layout.
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.
from flex-layout.
Related Issues (20)
- Support for Angular14 HOT 4
- fxLayoutGap="10px 20px grid" - alternative axis value and grid not working? HOT 1
- Issue when upgrading project from angular v13 to v14 HOT 2
- Conflicting peer dependency on 14.0.0-beta.39 HOT 3
- DirectiveDeclaration' requires 6 type argument(s). HOT 1
- Is there any dependency when mat-action-row tag is involved?? HOT 1
- How outdated are the DOCS? HOT 2
- my Etisalat HOT 2
- Angular 14 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'. Property 'prototype' is missing in type 'MockMediaQueryList' but required in type 'MediaQueryList'. HOT 25
- Angular Layout Migration Guides HOT 103
- Demo code link borken, demo page outdated HOT 2
- Support for Angular 15 HOT 17
- Status angular 15 HOT 6
- Why not continue flex-layout development with a community maintained fork? HOT 23
- Angular 15 Support HOT 8
- Angular 15 Pull request status HOT 4
- Archive the project in github HOT 2
- Why is this discontinued? HOT 2
- flex-layout Should support angular 16 version HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flex-layout.