Frontsize - Example for addMarginOffset mixin

add-margin-offset.less

// this should be set in your theme app.less file
 
.addContainerRow(row);

@hdSteps                  : 12;                     // this will generate 12 columns rules like hd-#-of-12
@tabletSteps              : 4;
@smartphoneSteps          : 2;
@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,
    hd-,
    tablet-,
    smartphone-,
    @fillFromViewport,
    @viewTotalColumns,
    @columnsSeparator,
    @useHdRules,
    @useTabletRules,
    @useSmartphoneRules
);

// basically it's the same as addColumnsSet

.addMarginOffset(
    @hdSteps,
    @tabletSteps,
    @smartphoneSteps,
    hd-offset-,
    tablet-offset-,
    smartphone-offset-,
    @fillFromViewport,
    @viewTotalColumns,
    @columnsSeparator,
    @useHdRules,
    @useTabletRules,
    @useSmartphoneRules
);

example-add-margin-offset.html

<div class="row">
    <div class="hd-offset-4-of-12 hd-8-of-12">
        This column will be moved at right by 4 columns steps
    </div>
</div>

export.css

/* columns set */

.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 {
    /* code exported here */
}

.tablet-1-of-4, .tablet-2-of-4, .tablet-3-of-4, .tablet-4-of-4 {
    /* code exported here */
}

.smartphone-1-of-2, .smartphone-2-of-2 {
    /* code exported here */
}

/* margin set */

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

.tablet-offset-1-of-4, .tablet-offset-2-of-4, .tablet-offset-3-of-4, .tablet-offset-4-of-4 {
    /* code exported here */
}

.smartphone-offset-1-of-4, .smartphone-offset-2-of-4, .smartphone-offset-3-of-4, .smartphone-offset-4-of-4 {
    /* code exported here */
}