Releases: philmtd/css-fx-layout
v3.0.5
This release removes deprecation warnings when using one of the latest versions of scss. Deprecated @import
uses and function calls have been replaced with the recommended alternatives.
What's Changed
- chore(deps-dev): bump @babel/traverse from 7.22.1 to 7.23.2 by @dependabot in #30
- update dev-dependencies, migrate scss code by @philmtd in #38
Full Changelog: v3.0.4...v3.0.5
v3.0.4
New Features: Flex-Layout migration script
There is now an automatic migration script available. If you are coming from Angular Flex-Layout this should make the migration even easier for you.
You can call the script like this: npx css-fx-layout migrate [path/to/src]
. Consult the documentation for a detailed migration guide.
As this is only an indirect feature of the actual library this release did not get a minor-version bump. (feat: add flex-layout migration script by @philmtd in #26)
What's Changed
- dev dependency updates
Full Changelog: v3.0.3...v3.0.4
v3.0.3
v3.0.2
v3.0.1
v3.0.0
This release is a large step towards an easier migration from Angular Flex-Layout. Thank you to @lievenjanssen for his work in multiple PRs!
3.0.0 introduces some breaking changes, which should be easy to resolve, though.
We also added a migration guide from Angular Flex-Layout to our documentation.
New Features
- Flex basis alias support (e.g.
data-flex="30"
/.fx-flex--30
) - Support to create gap values from a list instead of generating incrementally from one number to another using the mixins
gap-attribute-selectors-from-list
orgap-class-selectors-from-list
- New
data-flex-fill
/.fx-flex-fill
selectors - New
data-flex-align
/.fx-flex-align
selectors
What's Changed
- Flex basis alias support by @lievenjanssen in #13
- Layout gap value list support by @lievenjanssen in #12
- Flex size support by @lievenjanssen in #15
- chore: remove media size selectors phone, tablet and desktop in favor of the newer selectors by @philmtd in #16
- Increment support for layout gap mixins by @lievenjanssen in #17
- add real unit tests by @philmtd in #14
- feat: improved documentation by @philmtd in #18
- feat: add more flex layout support by @philmtd in #19
- adds an fxFlexFill alternative
- adds an fxFlexAlign alternative
- adds flex-row properties to containers where it is missing and where layout-align is used
- adds a documentation page on how to migrate from Flex Layout
- renames
data-fx-flex
todata-flex
because it was the only attribute selector with thefx
prefix, which was confusing - removes
data-fx-flex-grow
in favor ofdata-flex="grow"
Breaking Changes
data-fx-flex
has been renamed todata-flex
data-fx-flex-grow
has been removed in favor ofdata-flex="grow"
- The generator mixins for the gap selectors (
gap-class-selectors
andgap-attribute-selectors
) have a new parameter$increment
as their third parameter.
You need to set this to 1 to get the previous behaviour. - Removes the old, initial css-fx-layout media sizes
phone
,tablet
anddesktop
in favor of the existing Flex-Layout media sizes
New Contributors
- @lievenjanssen made their first contribution in #13
Full Changelog: v2.1.0...v3.0.0
v2.1.0
Features
This release adds a responsive API including the commonly known breakpoint sizes of Flex Layout.
In order to use the default responsive API selectors please set the bool parameter of the mixins generating the selectors to true
(see the "Getting started"
in the README). It is disabled per default because it negatively affects the size of the generated code and not all projects
may need this.
- add responsive API using flex layout media sizes
- add mixins to default API
- add flex-row properties to parent containers of elements using
.fx-flex
/data-fx-flex
if they are missing
v2.0.0
Breaking Changes and New Features
The library now only exposes mixins which can be used to generate the desired CSS selectors.
There also won't be pre-compiled CSS files available with the releases anymore.
The available selectors don't change. You only have to include the library differently. Please
consult the README or the Wiki for detailed instructions on how to get you
started with css-fx-layout.