# Grid

# Settings

In your app.scss before all imports you need to specify grid settings.

    $nbCol-xl: 12 !default;
    $gap-xl: 50px !default;
    $max-width-xl: 1200px !default;
    $row-xl: 50px !default;

    //--S
    $nbCol-s: 4 !default; 
    $gap-s: 50px !default;
    $max-width-s: 320px !default;
    $row-s: 20px !default;


    $max-padding : $max-width-xl + 40;
    $marginGap   : ((#{100vw} - #{100%}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14

You may need more than two grid. Just add some variable and update calls in scss/01_mixin/_grid.scss

# Extend grid on an element

Using a classname grid should only used if the container does not have a specific classname otherwhise you should extend a placeholder.

WARNING

You never should extend a selector

Sass guide


// all grid properties defined in your variables
@extend %grid;

// max-width and center, but no grid properties
@extend %grid--lg;

// no max-width and all grid propreties
@extend %grid--full;

1
2
3
4
5
6
7
8
9
10

# Mixins

# set-col()

set in a grid the size of an element depend on breakpoint

@include set-col(
    string $breakpoint, 
    number $nb_columns, 
    number $column_start //optional
);
1
2
3
4
5

Exemple :

// element in small screen takes 4 columns
@include set-col(s,4);
// element in large screen takes 6 columns
@include set-col(lg,6);
// element in extra large screen takes 6 columns and start at 3th column
@include set-col(xl,6, 3);

1
2
3
4
5
6
7

# set-wCol()

calculate the pixel size of an element based on the grid settings

@include set-wCol(
    string $nb_columns, 
);
1
2
3

Exemple :

// element takes 4 columns
@include set-wCol(4);

1
2
3

# set-out()

calculate the pixel size for an element that needs to be aligned and out of the grid

@include set-out(
    string $nb_columns, 
);
1
2
3

Exemple :

// element takes 4 columns
@include set-out(4);

1
2
3
Last Updated: 5/25/2020, 2:34:53 PM