fix: (Core) refactor Layout Grid with latest changes from fundamental-styles

[mikerodonnell89]

Layout grid has received a significant refactor with many breaking changes. Note most code in this PR was done by @salarenko and I just wrote tests/docs

Fundamental Styles issues found during implementation:

• Offset in RTL

BREAKING CHANGE:
The layout grid is no longer a series of components but rather directives. Here are a few other breaking changes:

• gapSize input replaced with fdLayoutGridColOffset
• nogap replaced with noGap
• responsiveness is achieved by setting individual sizes for each of the following: fdLayoutGridCol fdLayoutGridColMd fdLayoutGridColLg fdLayoutGridColXl
• individual rows can be set with the fdLayoutGridRow directive.

[netlify]

Deploy preview for fundamental-ngx ready!

Built with commit fa417c0

https://deploy-preview-3640--fundamental-ngx.netlify.app

[stefanoScalzo]

We need examples of the following

• Responsive columns and offsets

• Nesting

• Auto adjusting

[salarenko]

I've introduces some changes:

• Moved responsive columns and responsive offsets to separate examples for better readability.
• Moved the logic used to apply .fd-col class to LayoutGridColDirective only.
• Commented out the API responsible for auto-adjustment behavior which is not available yet.

@stefanoScalzo

• Auto adjusting is not available in currently used Fundamental Styles version
• The other examples have been added to the documentation

@mikerodonnell89

• The documentation is a bit poor. It lacks in information how grid actually behaves, how grid elements should be used, what are the breaking points and many more etc. Could you improve it a bit.
• Did you document the breaking changes? I don't see them described in the PR.

[stefanoScalzo]

We still need to improve the documentation,
We need to define what the numbers correspond to
What about having a config being passed instead of having a bunch of inputs?
Nesting example: "Add a row" not "Add an row"

[salarenko]

@stefanoScalzo I also thought about the "config" approach, but in this case I find the directives much easier to use and read. Anyway I'm open for discussion, we can talk this through during one of the meetings.

[JKMarkowski]

There is 1 minor thing. I will continue review, after changing directives to inputs, as we discussed

[salarenko]

@stefanoScalzo @JKMarkowski
I've introduced changes according to our latest agreements:

• Abandon separate directives approach and introduce one col directive with inputs
• Implement CssClassBuilder
• Fixed documentation examples

Current markup:

Columns with breakpoints:

    <div fdLayoutGridCol="12" colMd="6" colLg="4" colXl="3"></div>

Offset with breakpoints:

    <div fdLayoutGridCol="4" colOffsetMd="1" colOffsetLg="2" colOffsetXl="4">

[JKMarkowski]

Great Job! I left 2 minor comments, but the rest LGTM

[stefanoScalzo]

The row example should come after before the column example
Nesting columns should be before responsive columns
Explain how to use responsive offset
State breakpoints for responsiveness

[mikerodonnell89]

The row example should come after before the column example
Nesting columns should be before responsive columns

Why?

Explain how to use responsive offset

The responsiveness and offsets work together without any additional effort

Hmm. you should be able to set them independently from each other