The Column component only supports 1 Width and Size which limits responsive design

[jbennink]

Is just noticed the Column component only supports 1 Size. Usualy to make a website/app responsive you need to be able to set Widths for different Sizes, like so: <div class="col-sm-6 col-md3"> . To be able to use this the current Width and Size parameters are not sufficient. Also I think Bootstrap 4 added generic col-6 type widths as well.
Since responsiveness is important how should we implement this?
I see Blazorise.Bootstrap does not support this type of column style usage either. Is this not a thing anymore?

tag: enhancement

[jbennink]

Also, bootstrap allows you to specify no size and width and just make three columns which are distributed among the available space.

<div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
</div>

Is the goal to support this? Or do we follow Blazorise.Bootstrap where again, it is not supported either.

[jbennink]

Also found an issue when setting only the Width. In Bootstrap you can set col-xs-6 or col-6 and the two mean the same. We might want to fix that as no only supplying Width give col--6 and not supplying both give col-- which are both not rendered correctly.

[MarijnPessers]

col-xs-6 is not the same as col-6; only if col-xs-6 is the only one defined. If we want to define these properties I think we should make a base class that supports this. Every class inheriting this base class would implement the option to define this.
But I think we should allow not for 1 but for multiple definitions. col-xs-6, col-md-3 and col-lg-2 for instance should all be able to be defined on the component.
So I suggest adding a base class which has one Parameter; which is an IEnumerator of an object containing a enum (xs, md, lg) and an int.

[sjefvanleeuwen]

Linked to Issue: #7
Implementing this enhancement will automatically close that issue.

[sjefvanleeuwen]

First version of Fluent Class. I Tossed the enums from the column component.
See Commit: 6d0df37

[MarijnPessers]

I would propose not leaving the "extra small" empty, but use xs. Also this should be able to be an array of values.
I would for instance like the class attribute to be class="col-xs-6 col-sm-4 col-md-3 col-lg-2"

[sjefvanleeuwen]

No array is needed, when the fluent class string builder revisits a circular pattern. I will make that soon. xs will be addressed as literal in the next commit.

[sjefvanleeuwen]

As per offline discussion with @MarijnPessers we discussed a shorter annotation, see variant x, with col revisited. These all pass:

        [Fact]
        public void ClassTest()
        {
            var s = Column.Class.Size.Medium.Width.Twelve;
            var t = Column.Class.md._12;
            var u = col.md._12;
            var v = col._12;
            var x = col.xs._6.col.sm._4.col.md._3.col.lg._2;
            Assert.Equal("col-md-12", s.ToString());
            Assert.Equal("col-md-12", t.ToString());
            Assert.Equal("col-md-12", u.ToString());
            Assert.Equal("col-12", v.ToString());
            Assert.Equal("col-xs-6 col-sm-4 col-md-3 col-lg-2", x.ToString());
        }

[sjefvanleeuwen]

Column now has short annotation, as under u,v,x
In commit: 3e9df25

I am closing this thread. Extra features will have to be requested and tracked as a seperate issue.