Grid Spacing¶

Grid Spacing is a specific class that covers all classes related to spacing.

It features classes for margin:

mt-@{breakPointName}-@{iteration} - represents the margin-top property for a given breakpoint
mr-@{breakPointName}-@{iteration} - represents the margin-right property for a given breakpoint
ml-@{breakPointName}-@{iteration} - represents the margin-left property for a given breakpoint
mb-@{breakPointName}-@{iteration} - represents the margin-bottom property for a given breakpoint
m-all-@{breakPointName}-@{iteration} - represents the margin property for a given breakpoint

As well as classes for padding:

pt-@{breakPointName}-@{iteration} - represents the padding-top property for a given breakpoint
pr-@{breakPointName}-@{iteration} - represents the padding-right property for a given breakpoint
pl-@{breakPointName}-@{iteration} - represents the padding-left property for a given breakpoint
pb-@{breakPointName}-@{iteration} - represents the padding-bottom property for a given breakpoint
p-all-@{breakPointName}-@{iteration} - represents the padding property for a given breakpoint

Notice that all elements have two variables - breakpointName and iteration.

Grid Spacing class variables¶

breakpointName¶

breakpointName represents the name of a breakpoint that will be targetted by a class. You can learn about specific breakpoints available in the breakpoints documentation.

iteration¶

iteration represents the value of a spacing from 0 to 15. Each number increases the value of a spacing by a certain number defined by the @spacing CSS variable.

Example¶

In this example we add some top and bottom margin for mobile devices and up for a given element.

HTML

<div class="mt-xs-2 mb-xs-4">
    Example element
</div>

Example¶

In this example we add some left and top padding for only mobile devices for a given element.

HTML

<div class="pl-xs-1 pt-xs-5 pl-sm-0 pt-sm-0">
    Example element
</div>

Example¶

In this example we add some top margin for only mobile devices and padding bottom for large devices and up for a given element.

HTML

<div class="mt-xs-5 mt-sm-0 pb-lg-9">
    Example element
</div>

Grid Spacing tags¶

The classes of a grid spacing can be used with any element compatible with standard margin and padding values.

LESS¶

You can modify any less variable related to grid spacing in your User Less section to change the styles.

Grid Spacing variables¶

Here are variables used to style the grid spacing classes. From those variables only the @spacing variable is being used by default.

@gridSize: 12;
@gridGutter: 16;
@gridGutterRemValue: (@gridGutter / @baseFontSize);
@gridGutterRem: ~'@{gridGutterRemValue}rem';

@spacing: @globalSpacing * 0.5;

@gridContainerWidth: 1200px;
@gridContainerWidthL: 1400px;
@gridContainerWidthS: 1000px;

@gridFullFirstColPaddingLeft: 0;
@gridFullLastColPaddingRight: 0;

If you want to change grid spacing styles, you can just change the variables. To change a default spacing for each iteration value just modify the @spacing variable.

@spacing: 4;

Grid Spacing mixins¶

The generate-spacing mixin in the file below is used to create grid spacing classes.

.generate-spacing(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .mt-@{breakPointName}-@{iteration} {
        margin-top: @spacing * @iteration;
    }

    .mr-@{breakPointName}-@{iteration} {
        margin-right: @spacing * @iteration;
    }

    .ml-@{breakPointName}-@{iteration} {
        margin-left: @spacing * @iteration;
    }

    .mb-@{breakPointName}-@{iteration} {
        margin-bottom: @spacing * @iteration;
    }

    .pt-@{breakPointName}-@{iteration} {
        padding-top: @spacing* @iteration;
    }

    .pr-@{breakPointName}-@{iteration} {
        padding-right: @spacing* @iteration;
    }

    .pl-@{breakPointName}-@{iteration} {
        padding-left: @spacing* @iteration;
    }

    .pb-@{breakPointName}-@{iteration} {
        padding-bottom: @spacing* @iteration;
    }

    .m-all-@{breakPointName}-@{iteration} {
        margin: @spacing * @iteration;
    }

    .p-all-@{breakPointName}-@{iteration} {
        padding: @spacing * @iteration;
    }

    .generate-spacing(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-col(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .grid__col_@{breakPointName}-@{iteration} {
        flex: 1 0 (@iteration / @gridSize) * 100%;
        max-width: (@iteration / @gridSize) * 100%;
    }

    .grid__col_@{breakPointName}-auto {
        flex: 0 0 auto;
        max-width: initial;
    }

    .grid__col_@{breakPointName}-grow {
        flex: 1 0;
        max-width: initial;
    }

    .generate-col(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-order(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .grid__col_order-@{breakPointName}-@{iteration} {
        order: @iteration;
    }

    .generate-order(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-container-alignments(@breakPointName) {
    .grid {
        &_@{breakPointName}-hleft {
            align-items: flex-start;
        }

        &_@{breakPointName}-hcenter {
            align-items: center;
        }

        &_@{breakPointName}-hright {
            align-items: flex-end;
        }
    }
}

.generate-row-alignments(@breakPointName) {
    .grid {
        &__row {
            &_@{breakPointName}-vtop {
                align-items: flex-start;
            }

            &_@{breakPointName}-vcenter {
                align-items: center;
            }

            &_@{breakPointName}-vbottom {
                align-items: flex-end;
            }

            &_@{breakPointName}-vstretch {
                align-items: stretch;
                min-height: 100%;
            }

            &_@{breakPointName}-vbaseline {
                align-items: baseline;
                min-width: 100%;
            }

            &_@{breakPointName}-hleft {
                justify-content: flex-start;
            }

            &_@{breakPointName}-hcenter {
                justify-content: center;
            }

            &_@{breakPointName}-hbetween {
                justify-content: space-between;
            }

            &_@{breakPointName}-haround {
                justify-content: space-around;
            }

            &_@{breakPointName}-hevenly {
                justify-content: space-evenly;
            }

            &_@{breakPointName}-hright {
                justify-content: flex-end;
            }
        }
    }
}

.generate-col-alignments(@breakPointName) {
    .grid {
        &__col {
            &_@{breakPointName}-hleft {
                justify-items: start;
            }

            &_@{breakPointName}-hcenter {
                justify-items: center;
            }

            &_@{breakPointName}-hright {
                justify-items: end;
            }

            &_@{breakPointName}-vtop {
                align-content: start;
            }

            &_@{breakPointName}-vcenter {
                align-content: center;
            }

            &_@{breakPointName}-vbottom {
                align-content: end;
            }

            &_@{breakPointName}-vbetween {
                align-content: space-between;
            }
        }
    }
}

.generate-f-grid(@iterationsNumber, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .f-grid-@{iteration} {
        flex: 1 1 (@iteration / @gridSize) * 100%;
        max-width: (@iteration / @gridSize) * 100%;
    }

    .generate-f-grid(@iterationsNumber, (@iteration + 1));
}

You can modify it by changing the variables or names of the classes or adding new custom classes to the generated set if needed.

Below is an example of a modified generate-spacing mixin. In this example we got rid of @iterationsNumber variable and instead we have added a max iteration value of 10. We also removed all classes and instead we created two new ones: mhorizontal-@{breakPointName}-@{iteration} responsible for the horizontal padding and mvertical-@{breakPointName}-@{iteration} responsible for the vertical padding.

.generate-spacing(@breakPointName, @iteration: 0) when (@iteration =< 10) {
    .mhorizontal-@{breakPointName}-@{iteration} {
        margin-left: @spacing * @iteration;
        margin-right: @spacing * @iteration;
    }

    .mvertical-@{breakPointName}-@{iteration} {
        margin-top: @spacing * @iteration;
        margin-bottom: @spacing * @iteration;
    }
}

Grid Spacing standard styles¶

Here are standard grid spacing styles.

.generate-spacing(15, xs);

@media screen and (min-width: @breakPointXs) {
  .generate-spacing(15, sm);
}

@media screen and (min-width: @breakPointSm) {
  .generate-spacing(15, md);
}

@media screen and (min-width: @breakPointMd) {
  .generate-spacing(15, lg);
}

@media screen and (min-width: @breakPointLg) {
  .generate-spacing(15, xl);
}

@media screen and (min-width: @breakPointXl) {
  .generate-spacing(15, xxl);
}