From 7d2cf8dad02e9e46f473d82a7649dbc54303104d Mon Sep 17 00:00:00 2001 From: Elise Chant Date: Thu, 7 Oct 2021 12:13:53 +1100 Subject: [PATCH 1/5] Add update-grid proposal --- RFC-by-stage/1-approved/update-grid.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 RFC-by-stage/1-approved/update-grid.md diff --git a/RFC-by-stage/1-approved/update-grid.md b/RFC-by-stage/1-approved/update-grid.md new file mode 100644 index 0000000..085441d --- /dev/null +++ b/RFC-by-stage/1-approved/update-grid.md @@ -0,0 +1,24 @@ +--- +Status: `Proposal` # Please do not change this. +Implementer: # It will be changed upon merging and as it moves through the RFC stages +--- + +# Update Grid 12 to use Flexbox + +## The issue to be solved + +Grid 12 is how the Design System does layout. + +Grid 12 was based on Bootstrap 3 (I think, it might be v4) and uses the box model to handle layout. Bootstrap v3 Grid docs here https://getbootstrap.com/docs/3.3/css/#grid and v4 here https://getbootstrap.com/docs/4.0/layout/overview/. + +However, Bootstrap is now at v5.1 and has moved to Flexbox, see https://getbootstrap.com/docs/5.1/layout/grid/. + + +## A short description of the desired outcome or solution + +I propose we keep a similar API design, but replace the internals of Grid 12 to also use Flexbox. + + +## Technical details + +* Rewrite Grid 12 module From ba9c3143d8decfaa14d04775de5adfaac5c8614a Mon Sep 17 00:00:00 2001 From: Elise Chant Date: Thu, 7 Oct 2021 12:17:19 +1100 Subject: [PATCH 2/5] update --- RFC-by-stage/1-approved/update-grid.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/RFC-by-stage/1-approved/update-grid.md b/RFC-by-stage/1-approved/update-grid.md index 085441d..df71b3a 100644 --- a/RFC-by-stage/1-approved/update-grid.md +++ b/RFC-by-stage/1-approved/update-grid.md @@ -13,6 +13,9 @@ Grid 12 was based on Bootstrap 3 (I think, it might be v4) and uses the box mode However, Bootstrap is now at v5.1 and has moved to Flexbox, see https://getbootstrap.com/docs/5.1/layout/grid/. +There are increased benefits of using Flexbox - such as easier vertical centering, which would add features to Grid 12. + +A downside is that this would limit browser compatibility, however, Flexbox is highly supported by browsers nowadays, see https://caniuse.com/flexbox. ## A short description of the desired outcome or solution From eadf187f5d2ff4bb98e4cac0d3ca62d0c7be1d4f Mon Sep 17 00:00:00 2001 From: Elise Chant Date: Thu, 7 Oct 2021 12:20:06 +1100 Subject: [PATCH 3/5] update --- RFC-by-stage/1-approved/update-grid.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/RFC-by-stage/1-approved/update-grid.md b/RFC-by-stage/1-approved/update-grid.md index df71b3a..41df163 100644 --- a/RFC-by-stage/1-approved/update-grid.md +++ b/RFC-by-stage/1-approved/update-grid.md @@ -11,15 +11,15 @@ Grid 12 is how the Design System does layout. Grid 12 was based on Bootstrap 3 (I think, it might be v4) and uses the box model to handle layout. Bootstrap v3 Grid docs here https://getbootstrap.com/docs/3.3/css/#grid and v4 here https://getbootstrap.com/docs/4.0/layout/overview/. -However, Bootstrap is now at v5.1 and has moved to Flexbox, see https://getbootstrap.com/docs/5.1/layout/grid/. +However, Bootstrap is now at v5.1 and has moved to Flexbox, see https://getbootstrap.com/docs/5.1/layout/grid/, which is a good signal that we should too. -There are increased benefits of using Flexbox - such as easier vertical centering, which would add features to Grid 12. +There are increased benefits of using Flexbox - such as easier vertical centering, which would add capability to Grid 12. A downside is that this would limit browser compatibility, however, Flexbox is highly supported by browsers nowadays, see https://caniuse.com/flexbox. ## A short description of the desired outcome or solution -I propose we keep a similar API design, but replace the internals of Grid 12 to also use Flexbox. +I propose we keep a similar API design, but replace the internals of Grid 12 to use Flexbox. ## Technical details From 142e5255cc23a26824203b07776c376a890ecd70 Mon Sep 17 00:00:00 2001 From: Elise Chant Date: Thu, 7 Oct 2021 12:21:03 +1100 Subject: [PATCH 4/5] format --- RFC-by-stage/1-approved/update-grid.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/RFC-by-stage/1-approved/update-grid.md b/RFC-by-stage/1-approved/update-grid.md index 41df163..e590e35 100644 --- a/RFC-by-stage/1-approved/update-grid.md +++ b/RFC-by-stage/1-approved/update-grid.md @@ -19,9 +19,8 @@ A downside is that this would limit browser compatibility, however, Flexbox is h ## A short description of the desired outcome or solution -I propose we keep a similar API design, but replace the internals of Grid 12 to use Flexbox. - +I propose we keep a similar API design, but replace the internals of Grid 12 to use Flexbox. ## Technical details -* Rewrite Grid 12 module +- Rewrite Grid 12 module From 5d648482fbf383780f3bf2652203c526a46b6024 Mon Sep 17 00:00:00 2001 From: Elise Chant Date: Thu, 7 Oct 2021 12:55:46 +1100 Subject: [PATCH 5/5] fix links --- RFC-by-stage/1-approved/update-grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/RFC-by-stage/1-approved/update-grid.md b/RFC-by-stage/1-approved/update-grid.md index e590e35..dc7f11d 100644 --- a/RFC-by-stage/1-approved/update-grid.md +++ b/RFC-by-stage/1-approved/update-grid.md @@ -9,7 +9,7 @@ Implementer: # It will be changed upon merging and as it moves through the RFC s Grid 12 is how the Design System does layout. -Grid 12 was based on Bootstrap 3 (I think, it might be v4) and uses the box model to handle layout. Bootstrap v3 Grid docs here https://getbootstrap.com/docs/3.3/css/#grid and v4 here https://getbootstrap.com/docs/4.0/layout/overview/. +Grid 12 was based on Bootstrap 3 (I think, it might be v4) and uses the box model to handle layout. Bootstrap v3 Grid docs here https://getbootstrap.com/docs/3.3/css/#grid and v4 here https://getbootstrap.com/docs/4.0/layout/grid/. However, Bootstrap is now at v5.1 and has moved to Flexbox, see https://getbootstrap.com/docs/5.1/layout/grid/, which is a good signal that we should too.