From 713851f11a639be5d25410c14304a65a2e4a23c5 Mon Sep 17 00:00:00 2001
From: Philip Dakowitz
Date: Sat, 4 Mar 2023 14:04:26 +0100
Subject: [PATCH 01/24] docs: emojify documentation
---
documentation/docs/about.md | 5 +++--
documentation/docs/flex-layout-migration.mdx | 3 +--
documentation/docs/getting-started.md | 2 +-
documentation/docs/responsive.md | 3 +--
documentation/docusaurus.config.js | 8 ++++++--
documentation/src/pages/examples.mdx | 2 +-
documentation/src/pages/index.js | 2 +-
documentation/static/img/undraw_decide.svg | 2 +-
documentation/static/img/undraw_forming_ideas.svg | 2 +-
documentation/static/img/undraw_static_website.svg | 2 +-
documentation/versioned_docs/version-3.0/about.md | 5 +++--
.../versioned_docs/version-3.0/flex-layout-migration.mdx | 3 +--
.../versioned_docs/version-3.0/getting-started.md | 2 +-
documentation/versioned_docs/version-3.0/responsive.md | 3 +--
14 files changed, 23 insertions(+), 21 deletions(-)
diff --git a/documentation/docs/about.md b/documentation/docs/about.md
index ce94d5e..0ab414c 100644
--- a/documentation/docs/about.md
+++ b/documentation/docs/about.md
@@ -1,9 +1,10 @@
---
-sidebar_label: "About"
+slug: "/"
+sidebar_label: "📦 About"
sidebar_position: 1
---
-# About css-fx-layout
+# 📦 About css-fx-layout
`css-fx-layout` is a lightweight and modular SCSS flexbox library. It is inspired by Angular's [Flex-Layout](https://github.com/angular/flex-layout) and can
replace the most popular functions of the (by now deprecated) Angular library.
diff --git a/documentation/docs/flex-layout-migration.mdx b/documentation/docs/flex-layout-migration.mdx
index 87ed45d..6f7374d 100644
--- a/documentation/docs/flex-layout-migration.mdx
+++ b/documentation/docs/flex-layout-migration.mdx
@@ -1,9 +1,8 @@
---
-sidebar_label: Migration from Angular Flex-Layout
sidebar_position: 6
---
-# Migration from Angular Flex-Layout
+# 🧭 Migration from Angular Flex-Layout
If you consider migrating to css-fx-layout from Angular Flex-Layout be sure to know this library's limitations.
Not every feature of Flex-Layout is available but almost all popular features should be and some missing features can be
diff --git a/documentation/docs/getting-started.md b/documentation/docs/getting-started.md
index 90b7a76..11693b9 100644
--- a/documentation/docs/getting-started.md
+++ b/documentation/docs/getting-started.md
@@ -2,7 +2,7 @@
sidebar_position: 2
---
-# Getting Started
+# 🐝 Getting Started
## Installation
diff --git a/documentation/docs/responsive.md b/documentation/docs/responsive.md
index f78c477..4507aa3 100644
--- a/documentation/docs/responsive.md
+++ b/documentation/docs/responsive.md
@@ -1,9 +1,8 @@
---
-sidebar_label: Responsive API
sidebar_position: 5
---
-# Responsive API
+# 📱 Responsive API
This page describes `css-fx-layout`'s responsive API.
diff --git a/documentation/docusaurus.config.js b/documentation/docusaurus.config.js
index bc3ec4f..dd7bb6d 100644
--- a/documentation/docusaurus.config.js
+++ b/documentation/docusaurus.config.js
@@ -76,11 +76,11 @@ const config = {
type: 'doc',
docId: 'about',
position: 'left',
- label: 'Docs',
+ label: '📋 Docs',
},
{
to: 'examples',
- label: 'Examples',
+ label: '📺 Examples',
position: 'left'
},
/** {to: '/blog', label: 'Blog', position: 'left'}, */
@@ -118,6 +118,10 @@ const config = {
label: 'GitHub',
href: 'https://github.com/philmtd/css-fx-layout',
},
+ {
+ label: 'npm',
+ href: 'https://www.npmjs.com/package/css-fx-layout'
+ }
],
},
{
diff --git a/documentation/src/pages/examples.mdx b/documentation/src/pages/examples.mdx
index 7fcce51..1540656 100644
--- a/documentation/src/pages/examples.mdx
+++ b/documentation/src/pages/examples.mdx
@@ -1,6 +1,6 @@
import {Examples} from "../components/examples/examples";
-# Examples
+# 📺 Examples
This page shows some examples how css-fx-layout can be used. You can toggle between attribute- or class-based
examples and their live-rendered result.
diff --git a/documentation/src/pages/index.js b/documentation/src/pages/index.js
index 68aee56..a78db80 100644
--- a/documentation/src/pages/index.js
+++ b/documentation/src/pages/index.js
@@ -21,7 +21,7 @@ function HomepageHeader() {
- Getting Started
+ 🐝 Getting Started
diff --git a/documentation/static/img/undraw_decide.svg b/documentation/static/img/undraw_decide.svg
index 9f1022a..57bfdcf 100644
--- a/documentation/static/img/undraw_decide.svg
+++ b/documentation/static/img/undraw_decide.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/documentation/static/img/undraw_forming_ideas.svg b/documentation/static/img/undraw_forming_ideas.svg
index edb5d67..8734e51 100644
--- a/documentation/static/img/undraw_forming_ideas.svg
+++ b/documentation/static/img/undraw_forming_ideas.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/documentation/static/img/undraw_static_website.svg b/documentation/static/img/undraw_static_website.svg
index fb4ddea..93c523c 100644
--- a/documentation/static/img/undraw_static_website.svg
+++ b/documentation/static/img/undraw_static_website.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/documentation/versioned_docs/version-3.0/about.md b/documentation/versioned_docs/version-3.0/about.md
index ce94d5e..0ab414c 100644
--- a/documentation/versioned_docs/version-3.0/about.md
+++ b/documentation/versioned_docs/version-3.0/about.md
@@ -1,9 +1,10 @@
---
-sidebar_label: "About"
+slug: "/"
+sidebar_label: "📦 About"
sidebar_position: 1
---
-# About css-fx-layout
+# 📦 About css-fx-layout
`css-fx-layout` is a lightweight and modular SCSS flexbox library. It is inspired by Angular's [Flex-Layout](https://github.com/angular/flex-layout) and can
replace the most popular functions of the (by now deprecated) Angular library.
diff --git a/documentation/versioned_docs/version-3.0/flex-layout-migration.mdx b/documentation/versioned_docs/version-3.0/flex-layout-migration.mdx
index 87ed45d..6f7374d 100644
--- a/documentation/versioned_docs/version-3.0/flex-layout-migration.mdx
+++ b/documentation/versioned_docs/version-3.0/flex-layout-migration.mdx
@@ -1,9 +1,8 @@
---
-sidebar_label: Migration from Angular Flex-Layout
sidebar_position: 6
---
-# Migration from Angular Flex-Layout
+# 🧭 Migration from Angular Flex-Layout
If you consider migrating to css-fx-layout from Angular Flex-Layout be sure to know this library's limitations.
Not every feature of Flex-Layout is available but almost all popular features should be and some missing features can be
diff --git a/documentation/versioned_docs/version-3.0/getting-started.md b/documentation/versioned_docs/version-3.0/getting-started.md
index 90b7a76..11693b9 100644
--- a/documentation/versioned_docs/version-3.0/getting-started.md
+++ b/documentation/versioned_docs/version-3.0/getting-started.md
@@ -2,7 +2,7 @@
sidebar_position: 2
---
-# Getting Started
+# 🐝 Getting Started
## Installation
diff --git a/documentation/versioned_docs/version-3.0/responsive.md b/documentation/versioned_docs/version-3.0/responsive.md
index f78c477..4507aa3 100644
--- a/documentation/versioned_docs/version-3.0/responsive.md
+++ b/documentation/versioned_docs/version-3.0/responsive.md
@@ -1,9 +1,8 @@
---
-sidebar_label: Responsive API
sidebar_position: 5
---
-# Responsive API
+# 📱 Responsive API
This page describes `css-fx-layout`'s responsive API.
From a52071634e2303ce4513e1d73075b72a6bd73b42 Mon Sep 17 00:00:00 2001
From: Philip Dakowitz
Date: Sat, 4 Mar 2023 14:19:21 +0100
Subject: [PATCH 02/24] docs: fix build
---
documentation/docs/about.md | 1 -
documentation/versioned_docs/version-3.0/about.md | 1 -
2 files changed, 2 deletions(-)
diff --git a/documentation/docs/about.md b/documentation/docs/about.md
index 0ab414c..39700d5 100644
--- a/documentation/docs/about.md
+++ b/documentation/docs/about.md
@@ -1,5 +1,4 @@
---
-slug: "/"
sidebar_label: "📦 About"
sidebar_position: 1
---
diff --git a/documentation/versioned_docs/version-3.0/about.md b/documentation/versioned_docs/version-3.0/about.md
index 0ab414c..39700d5 100644
--- a/documentation/versioned_docs/version-3.0/about.md
+++ b/documentation/versioned_docs/version-3.0/about.md
@@ -1,5 +1,4 @@
---
-slug: "/"
sidebar_label: "📦 About"
sidebar_position: 1
---
From d56e0bf406e3574a343aa0f0fc892db3e0fa4b8d Mon Sep 17 00:00:00 2001
From: Philip Dakowitz
Date: Tue, 7 Mar 2023 20:42:11 +0100
Subject: [PATCH 03/24] fix(attributes): auto-apply flex layout only if no
layout attribute is present (#21)
fixes #20
---
src/lib/layout-align-attributes.scss | 12 ++++++-
src/lib/mixins.scss | 4 +++
test/index.html | 50 ++++++++++++++++++++++++++++
test/layout-align.spec.scss | 19 +++++++++++
4 files changed, 84 insertions(+), 1 deletion(-)
create mode 100644 test/layout-align.spec.scss
diff --git a/src/lib/layout-align-attributes.scss b/src/lib/layout-align-attributes.scss
index fce18f5..66e6a4a 100644
--- a/src/lib/layout-align-attributes.scss
+++ b/src/lib/layout-align-attributes.scss
@@ -50,9 +50,19 @@
}
}
- *[data-layout-align]:not([data-layout]) {
+ *[data-layout-align]:not(#{all-data-layout-selectors()}) {
@include flex-row-properties;
}
+
+}
+
+@function all-data-layout-selectors() {
+ $breakpoints: get-breakpoint-names();
+ $list: "[data-layout],";
+ @each $name in $breakpoints {
+ $list: $list + #{",[data-layout-" + $name + "]"}
+ }
+ @return $list
}
@mixin layout-align-attributes-for-media-sizes {
diff --git a/src/lib/mixins.scss b/src/lib/mixins.scss
index 0e2d94f..d9ddb57 100644
--- a/src/lib/mixins.scss
+++ b/src/lib/mixins.scss
@@ -109,6 +109,10 @@ $flex-layout-media-queries: (
'gt-lg': 'screen and (min-width: #{$lg + 1})',
);
+@function get-breakpoint-names() {
+ @return map-keys($flex-layout-media-queries)
+}
+
@mixin xs($invert: false) {
@media #{if($invert, 'not ', '')}#{map-get($flex-layout-media-queries, 'xs')} {
@content;
diff --git a/test/index.html b/test/index.html
index da146e7..39a59ca 100644
--- a/test/index.html
+++ b/test/index.html
@@ -511,5 +511,55 @@ Example E13
+
+ Example E14
+ Automatic flex-layout when layout-align is used + responsive API
+
+
+ | Attributes |
+ Classes |
+
+
+ |
+
+ One
+ Two
+ Three
+
+ |
+
+
+ One
+ Two
+ Three
+
+ |
+
+
+
+ Example E15
+ Automatic flex-layout when layout-align is used + responsive API 2
+
+
+ | Attributes |
+ Classes |
+
+
+ |
+
+ One
+ Two
+ Three
+
+ |
+
+
+ One
+ Two
+ Three
+
+ |
+
+