CSS Grids setup

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.

        flow: ltr,
        // Defines how to flow left to right (ltr) or Right to left (rtl)

        container-position: center
        // Defines the position of the container (left,center or right)

        ) !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.