blob: 3280fb6a4e4fcfaf85c5fd95e4ce3863c5493426 (
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
//
// This is a simple CSS for a very fluid layout. One could say it is SUPER fluid.
// functions taken from susy.
//
// HTML
//
// .top
// .column_countainer
// .column_content
// .middle
// .column_container
// .column_content
// .bottom
// .column_container
// .column_content
//
//
// DEFAULTS
//
$total-columns: $gridColumns !default;
$side-columns: 2 !default;
$column-width: $gridColumnWidth !default;
$gutter-width: $gridGutterWidth !default;
//
// FUNCTIONS
//
//
// Returns the width of the specified number of columns
// $columns => The number of columns to get width for.
//
@function columns-width($columns : $total-columns) {
@return ($columns * $column-width) + (ceil($columns - 1) * $gutter-width);
}
//
// Returns the full width of all columns
//
@function full-width() {
@return columns-width();
}
//
// Return the percentage width of a single gutter in a given column context.
// $context => The grid context in columns, if nested.
//
@function gutter($context : $total-columns) {
@return percentage($gutter-width / columns-width($context));
}
//
// Return the percentage width of multiple 'columns' in a given 'context'.
// $columns => The number of columns to get relative width for.
// $context => The grid context in columns, if nested.
//
@function columns($columns, $context : $total-columns) {
@return percentage(columns-width($columns) / columns-width($context));
}
//
// CSS
//
.column_container {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: full-width();
max-width: 100%;
}
.column_content {
padding-left: gutter();
padding-right: gutter();
}
.middle .column_container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.middle .column_content {
padding-top: gutter();
padding-bottom: gutter();
}
.main_column.with_side_column {
width: columns($total-columns - $side-columns);
margin-left: gutter();
float: left;
// without left float, we would use this:
// margin-left: columns($side-columns) + gutter();
// but that creates problems if we have floated columns inside this main column
}
//.article.full {
// margin-left: 0;
// width: columns;
//}
.side_column {
display: inline;
float: left;
width: columns($side-columns);
}
|
