static/css/sass/_grid.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

/* ==========================================================================
   Grid
   ========================================================================== */

// Defining number of columns in the grid.
// Common Values would be 12, 16 or 24
$width: 100%;
$def_grid: 12;
$margin: 0;

@mixin container(){
  margin:0 auto;
  width:$width;
}
                                      
// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Removes 20px for margins
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
  display:$display;
  float:$float;
  width:(100%/$grid * $cols) - ($margin * 2);
}  

// Allows for padding before element
@mixin prefix($grid:$def_grid,$cols:''){
  margin-left:(100%/$grid * $cols);
}

// Allows for padding after element
@mixin suffix($grid:$def_grid,$cols:''){  
  margin-right:(100%/$grid * $cols);    
}

// Removes left margin
@mixin first(){
  margin-left:0;
}

// Removes right margin
@mixin last(){
  margin-right:0;
}

@mixin push($grid:$def_grid,$move:'') {
  position:relative;
  left:(100%/$grid * $move);
} 

@mixin pull($grid:$def_grid,$move:''){
  position:relative;
  left:(100%/$grid * $move) * -1;
}