MJ Grid Framework OUTDATED
Breakpoints general
xs = 0px and above
s = 429px and above
m = 768px and above
l = 1025px and above
xl = 1200px and above
GRID breakpoints:
.grid.grid-xs-1
0 - 428 = grid-template-columns: repeat(1, 1fr);
.grid.grid-xs-2
0 - 428 = grid-template-columns: repeat(2, 1fr);
.grid.grid-xs-3
0 - 428 = grid-template-columns: repeat(3, 1fr);
.grid.grid-xs-4
0 - 428 = grid-template-columns: repeat(4, 1fr);
.grid.grid-s-1
428 - 767 = grid-template-columns: repeat(1, 1fr);
.grid.grid-s-2
428 - 767 = grid-template-columns: repeat(2, 1fr);
.grid.grid-s-3
428 - 767 = grid-template-columns: repeat(3, 1fr);
.grid.grid-s-4
428 - 767 = grid-template-columns: repeat(4, 1fr);
.grid
0 - 767 = grid-template-columns: repeat(1, 1fr);
768 - 1024 = grid-template-columns: repeat(6, 1fr);
1025+ = grid-template-columns: repeat(12, 1fr);
Grid COLUMN breakpoints:
0+:
all .column's = span 1
.col-xs-1 = span 1
.col-xs-2 = span 2
.col-xs-3 = span 3
.col-xs-4 = span 4
429+:
all .column's = span 1
.col-s-1 = span 1
.col-s-2 = span 2
.col-s-3 = span 3
.col-s-4 = span 4
768+:
all .column's = span 3
.col-m-1 = span 1
.col-m-2 = span 2
.col-m-3 = span 3
.col-m-4 = span 4
.col-m-5 = span 5
.col-m-6 = span 6
1025+:
all .column's = span 3
.col-l-1 = span 1
.col-l-2 = span 2
.col-l-3 = span 3
.col-l-4 = span 4
.col-l-5 = span 5
.col-l-6 = span 6
.col-l-7 = span 7
.col-l-8 = span 8
.col-l-9 = span 9
.col-l-10 = span 10
.col-l-11 = span 11
.col-l-12 = span 12
1200+:
all .column's = span 3
.col-xl-1 = span 1
.col-xl-2 = span 2
.col-xl-3 = span 3
.col-xl-4 = span 4
.col-xl-5 = span 5
.col-xl-6 = span 6
.col-xl-7 = span 7
.col-xl-8 = span 8
.col-xl-9 = span 9
.col-xl-10 = span 10
.col-xl-11 = span 11
.col-xl-12 = span 12