[Question] Support for Carbon Grid layout

Question about how to support the Carbon Grid layout using Angular componentry?

Detailed description

We are starting to use the Carbon Grid layout in our code and have been experimenting with create Angular components to abstract away the details.

Currently you would add markup like this to your template:

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--offset-xs-2 bx--col-xs-10 bx--col-md-5">Some content here</div>
  </div>
</div>

This is rather verbose and difficult to write so we have created some components that reduces this to the following:

<ibm-grid>
  <ibm-row>
    <ibm-column offset="{xs:2}" col="{xs:10, md:5}">Some content here</ibm-column>
  </ibm-row>
</ibm-grid>

For the case where no breakpoint needs to be specified could look like this:

<ibm-grid>
  <ibm-row>
    <ibm-column offset="2" col="2">Some content here</ibm-column>
  </ibm-row>
</ibm-grid>

This would only work if we don’t need to support break points and no break points at the same time. Not sure if this will always be the case.

So we wanted to get your feedback on this approach and your guidance on the best way to proceed.

[markewallace]

@zvonimirfras thanks for the suggestions, we will try out that approach. If it works out we can open a PR to see if it’s something worth adding to the library.

[zvonimirfras]

That is accurate, Stan, we used it in multiple places. Thing is, with components, you need something in the template, so that something bloats the DOM if you don’t need it. Directives don’t have that limitation. You can also apply directives to other tags so technically you could apply layouts to other components. You can’t do that if layouts are done with components.