Grids setup

Global settings for your all your grids

The grids in Frontendcore are totally configurable, you've got several columns options and you can overwrite the map $grid to personalize it:

        $grid: (
        container-width: 1140px,
        // Defines the max width of the container. Could be px or %.

        gutters: .50,
        // Defines the width of the space between columns. Should be relative.

        ) !global;

By default the grid is set to 98% and modifies the with and position of the columns depending on the resolution of the device. Reduce and maximize this page to see it in action.

The .grid-main class should be only added in the main grid of your page (usually called #container"). This class will add some paddings depending on the device you are.

If you want to create fixed layouts (very useful for admin panels) add the .grid-fixed class to your main grid container.