summaryrefslogtreecommitdiff
blob: 788a377a73b9097c0bb7616fbea7a70ea7b35590 (plain)
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// ==========================================================================
// Grid styles
// 12 column grid
// ==========================================================================

.j-row {
	width: 100%;
	margin: 0 auto;
	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

.j-col {
	padding: 0.85em;
	width: 100%;
	float: left;
	position: relative;
}

// Small grid (Mobile first)
@media only screen {
	// .j-sm-1		{width: 8.33333%;}
	// .j-sm-2		{width: 16.66667%;}
	// .j-sm-3		{width: 25%;}
	// .j-sm-4		{width: 33.33333%;}
	.j-sm-5		{width: 41.66667%;}
	// .j-sm-6		{width: 50%;}
	.j-sm-7		{width: 58.33333%;}
	// .j-sm-8		{width: 66.66667%;}
	// .j-sm-9		{width: 75%;}
	// .j-sm-10	{width: 83.33333%;}
	// .j-sm-11	{width: 91.66667%;}
	.j-sm-12	{width: 100%;}
}

// Medium grid
// 530px and up
@include minbreakpoint(large-phone) {
	// .j-md-1		{width: 8.33333%;}
	// .j-md-2		{width: 16.66667%;}
	// .j-md-3		{width: 25%;}
	.j-md-4		{width: 33.33333%;}
	// .j-md-5		{width: 41.66667%;}
	.j-md-6		{width: 50%;}
	// .j-md-7		{width: 58.33333%;}
	.j-md-8		{width: 66.66667%;}
	// .j-md-9		{width: 75%;}
	// .j-md-10	{width: 83.33333%;}
	// .j-md-11	{width: 91.66667%;}
	.j-md-12	{width: 100%;}
}

// Large grid
// 782px and up
@include minbreakpoint(tablet) {
	// .j-lrg-1	{width: 8.33333%;}
	// .j-lrg-2	{width: 16.66667%;}
	// .j-lrg-3	{width: 25%;}
	.j-lrg-4	{width: 33.33333%;}
	.j-lrg-5	{width: 41.66667%;}
	.j-lrg-6	{width: 50%;}
	.j-lrg-7	{width: 58.33333%;}
	.j-lrg-8	{width: 66.66667%;}
	// .j-lrg-9	{width: 75%;}
	// .j-lrg-10	{width: 83.33333%;}
	// .j-lrg-11	{width: 91.66667%;}
	.j-lrg-12	{width: 100%;}
}