_sass/tiny/_layout.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

// Fixed-width, centered column for site content.
.container {
  width: $container-width;
  margin-right: auto;
  margin-left: auto;
  @include clearfix;
}

// Grid system
//
// Create rows with `.columns` to clear the floated columns and outdent the
// padding on `.column`s with negative margin for alignment.

.columns {
  margin-right: -$grid-gutter;
  margin-left: -$grid-gutter;
  @include clearfix;
}

// Base class for every column (requires a column width from below)
.column {
  float: left;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
}

// Column widths
.one-third {
  width: 33.333333%;
}

// .two-thirds {
//   width: 66.666667%;
// }

// .one-fourth {
//   width: 25%;
// }

.one-half {
  width: 50%;
}

// .three-fourths {
//   width: 75%;
// }

// .one-fifth {
//   width: 20%;
// }

// .four-fifths {
//   width: 80%;
// }

// Single column hack
.single-column {
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
}

// Equal width columns via table sorcery.
// .table-column {
//   display: table-cell;
//   width: 1%;
//   padding-right: $grid-gutter;
//   padding-left: $grid-gutter;
//   vertical-align: top;
// }