gutter support, div wrapper @wrap, flexgrid macros

[hhaensel]

• gutter support by new keywords gutter, xgutter, ygutter which can receive values from [nothing, :xs, :sm, :md, :lg, :xl] (or their string counterparts)
• macros @flexgrid and @flexgrid_kwargs to simplify function definition with explicit flexgrid kwargs
• macro @wrap to wrap a div element around elements and moving all flexgrid kwargs to the wrapper div element

Examples:

Classical grid definition without spacing

julia> row([
         cell(1, sm = 2,  md = 8)
         cell(2, sm = 10, md = 4)
       ]) |> prettify |> println
<div class="row">
    <div class="st-col col col-sm-2 col-md-8">
        1
    </div>
    <div class="st-col col col-sm-10 col-md-4">
        2
    </div>
</div>

Grid definition with added spacing

julia> row(gutter = :md, @wrap [
         cell(1, sm = 2,  md = 8)
         cell(2, sm = 10, md = 4)
       ]) |> prettify |> println
<div class="row q-col-gutter-md">
    <div class="col col-sm-2 col-md-8">
        <div class="st-col col">
            1
        </div>
    </div>
    <div class="col col-sm-10 col-md-4">
        <div class="st-col col">
            2
        </div>
    </div>
</div>

Function definition without flexgrid kwargs

function bignumber( label::Union{String,Symbol} = "",
                    number::Union{Symbol,Number,Nothing,String} = nothing,
                    args...; kwargs...)
  st__big__number(args...; kw([:title => label, :number => number, kwargs...])...)

Function definition with flexgrid kwargs

@flexgrid function bignumber( label::Union{String,Symbol} = "",
                    number::Union{Symbol,Number,Nothing,String} = nothing,
                    args...; kwargs...)
  st__big__number(args...; kw(@flexgrid_kwargs(; title = label, number, kwargs...))...)
end

Demo

ui() = [
    row([
        row(col = 3, [
            cell(1, class = "bg-red-10")
            cell(2, class = "bg-red-6")
            cell(3, class = "bg-red-3")
        ])
    
        column(col = 3, [
            cell(1, class = "bg-green-10")
            cell(2, class = "bg-green-6")
            cell(3, class = "bg-green-3")
            cell(4, class = "bg-green-1")
        ])
    
        row(col = 0, [
            cell(1, class = "bg-blue-12")
            cell(2, class = "bg-blue-8")
            cell(3, class = "bg-blue-6")
            cell(4, class = "bg-blue-3")
            cell(5, class = "bg-blue-1")
        ])
    ])

    row(gutter = :lg, class = "q-pt-lg", @wrap[
        row(gutter = :sm, col = 3, class = "full-height", @wrap [
            cell(1, class = "bg-red-10 full-height")
            cell(2, class = "bg-red-6 full-height")
            cell(3, class = "bg-red-3 full-height")
        ])
    
        column(gutter = :sm, col = 3, class = "full-height", @wrap [
            cell(1, class = "bg-green-10 full-height")
            cell(2, class = "bg-green-6 full-height")
            cell(3, class = "bg-green-3 full-height")
            cell(4, class = "bg-green-1 full-height")
        ])
    
        row(gutter = :sm, col = 0, class = "full-height", @wrap [
            cell(1, class = "bg-blue-12 full-height")
            cell(2, class = "bg-blue-8 full-height")
            cell(3, class = "bg-blue-6 full-height")
            cell(4, class = "bg-blue-3 full-height")
            cell(5, class = "bg-blue-1 full-height")
        ])
    ])
]

[hhaensel]

Don't merge! I've found an edge case :-(

[hhaensel]

We decided to pursue the issues of this PR separately, so closing this