Frontsize - Example for addColumnsSet and addContainerRow mixins

add-columns-set.less

// this should be set in your theme's app.less file

// Example 1

.addContainerRow(
    row-3-columns,
    3, // Full HD columns
    3, // HD Ready columns
    2, // Tablet landscape columns
    2, // Tablet portrait columns
    1, // Smartphone landscape columns
    1  // Smartphone portrait columns
);

// Example 2 and 3

.addContainerRow(row);
.addColumnsSet(12);

// doing .addColumnsSet(12); is the same as doing the code below:

@hdSteps                  : 12;                     // this will generate 12 columns rules like hd-#-of-12
@tabletSteps              : @hdSteps;
@smartphoneSteps          : @tabletSteps;
@hdViewportPrefix         : hd-;                    // this will generate hd-#-of-# rule prefix
@tabletViewportPrefix     : tablet-;                // this will generate tablet-#-of-# rule prefix
@smartphoneViewportPrefix : smartphone-;            // this will generate smartphone-#-of-# rule prefix
@fillFromViewport         : "smartphone-landscape"; // until smartphone landscape, columns will be set to 100% width
@viewTotalColumns         : true;                   // this will prepend -of-12 at the bottom of the generated rule
@columnsSeparator         : -of-;
@useHdRules               : true;                   // this will enable code generation for hd-#-of-# rules set
@useTabletRules           : true;                   // this will enable code generation for tablet-#-of-# rules set
@useSmartphoneRules       : true;                   // this will enable code generation for smartphone-#-of-# rules set

.addColumnsSet(
    @hdSteps,
    @tabletSteps,
    @smartphoneSteps,
    @hdViewportPrefix,
    @tabletViewportPrefix,
    @smartphoneViewportPrefix,
    @fillFromViewport,
    @viewTotalColumns,
    @columnsSeparator,
    @useHdRules,
    @useTabletRules,
    @useSmartphoneRules
);

example-add-columns-set-container-row.html

<div>
    Example 1<br>
    <p>
        In this example <code>row-3-columns</code> will manage children rows automatically
    </p>
    <div class="row-3-columns">
        <div>First column contents</div>
        <div>Second column contents</div>
        <div>Third column contents</div>
    </div>
</div>

<div>
    Example 2<br>
    <p>
        In this example <code>hd-4-of-12</code> and <code>hd-8-of-12</code> will be set to <code>width:100%;</code> on Smartphone viewports automatically
    </p>
    <div class="row">
        <div class="hd-4-of-12">
            First column contents
        </div>
        <div class="hd-8-of-12">
            Second column contents
        </div>
    </div>
</div>

<div>
    Example 3<br>
    <p>
        In this example <b>HD</b>, <b>Tablet</b> and <b>Smartphone</b> viewports will be set manually
    </p>
    <div class="row">
        <div class="hd-4-of-12 tablet-4-of-12 smartphone-6-of-12">
            First column contents
        </div>
        <div class="hd-3-of-12 tablet-4-of-12 smartphone-6-of-12">
            Second column contents
        </div>
        <div class="hd-5-of-12 tablet-4-of-12 smartphone-12-of-12">
            Third column contents
        </div>
    </div>
</div>

export.css

.row-3-columns { /* frontsize rules */ }
.row { /* frontsize code exported here */ }

.hd-1-of-12, .hd-2-of-12, .hd-3-of-12, .hd-4-of-12,
.hd-5-of-12, .hd-6-of-12, .hd-7-of-12, .hd-8-of-12,
.hd-9-of-12, .hd-10-of-12, .hd-11-of-12, .hd-12-of-12 {
    /* frontsize code exported here */
}

.tablet-1-of-12, .tablet-2-of-12, .tablet-3-of-12, .tablet-4-of-12,
.tablet-5-of-12, .tablet-6-of-12, .tablet-7-of-12, .tablet-8-of-12,
.tablet-9-of-12, .tablet-10-of-12, .tablet-11-of-12, .tablet-12-of-12 {
    /* frontsize code exported here */
}

.smartphone-1-of-12, .smartphone-2-of-12, .smartphone-3-of-12, .smartphone-4-of-12,
.smartphone-5-of-12, .smartphone-6-of-12, .smartphone-7-of-12, .smartphone-8-of-12,
.smartphone-9-of-12, .smartphone-10-of-12, .smartphone-11-of-12, .smartphone-12-of-12 {
    /* frontsize code exported here */
}