File: _layoutgala.scss

package info (click to toggle)
compass-layoutgala-plugin 0.2-3
  • links: PTS, VCS
  • area: main
  • in suites: jessie, jessie-kfreebsd
  • size: 220 kB
  • sloc: ruby: 14; makefile: 2
file content (119 lines) | stat: -rw-r--r-- 4,298 bytes parent folder | download | duplicates (4)
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
114
115
116
117
118
119
// 40 CSS base layouts for same HTML markup using Compass
// Plugin by Jonas Smedegaard <http://dr.jones.dk/>
// Based on the work of Alessandro Fulciniti <http://blog.html.it/layoutgala/>

// Generate one (or more) of 40 CSS layouts for one generic HTML markup,
// without hacks nor workarounds and a good cross-browser compatibility.
// The layouts uses techniques like negative margins, any order columns
// and opposite floats.
// <http://www.alistapart.com/articles/negativemargins/>
// <http://www.positioniseverything.net/articles/onetruelayout/anyorder>

@import "layoutgala/base";
//TODO @import "layoutgala/liquid";
@import "layoutgala/liquid-center";
@import "layoutgala/liquid-left";
@import "layoutgala/liquid-right";
@import "layoutgala/liquid-right-alternative";
@import "layoutgala/liquid-split";
@import "layoutgala/percentage2-larger1";
@import "layoutgala/fixed2";
@import "layoutgala/fixed1";

@import "compass/utilities/general/float";

@mixin layoutgala-1 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-center(left, $aside1-width, $aside2-width);
}

@mixin layoutgala-2 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-center(right, $aside1-width, $aside2-width);
}

@mixin layoutgala-3 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-left(center, auto, $aside1-width, $aside2-width);
}

@mixin layoutgala-4 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-left(right, auto, $aside1-width, $aside2-width);
}

@mixin layoutgala-5 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-right(center, $aside1-width, $aside2-width);
}

@mixin layoutgala-6 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-right(left, $aside1-width, $aside2-width);
}

@mixin layoutgala-13 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-center(left, $aside1-width, $aside2-width);
}

@mixin layoutgala-14 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-center(right, $aside1-width, $aside2-width);
}

@mixin layoutgala-15 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-left(center, auto, $aside1-width, $aside2-width);
}

@mixin layoutgala-16 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-left(right, auto, $aside1-width, $aside2-width);
}

@mixin layoutgala-17 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-right-alternative(center, $aside1-width, $aside2-width);
}

@mixin layoutgala-18 ($aside1-width, $aside2-width) {
	@include layoutgala-liquid-right-alternative(left, $aside1-width, $aside2-width);
}

@mixin layoutgala-27 ($aside1-width) {
	@include layoutgala-liquid-split(left, $aside1-width);
}

@mixin layoutgala-28 ($aside1-width) {
	@include layoutgala-liquid-split(right, $aside1-width);
}

@mixin layoutgala-29 ($content-width, $margin: 0, $content-padding-left: 0, $content-padding-right: 0) {
	@include layoutgala-percentage2-larger1(right, $content-width, $margin, $content-padding-left, $content-padding-right);
}

@mixin layoutgala-30 ($content-width, $margin: 0, $content-padding-left: 0, $content-padding-right: 0) {
	@include layoutgala-percentage2-larger1(left, $content-width, $margin, $content-padding-left, $content-padding-right);
}

@mixin layoutgala-33 ($container-width, $content-width) {
	@include layoutgala-fixed2(left, $container-width, $content-width, aside1);
}

@mixin layoutgala-34 ($container-width, $content-width) {
	@include layoutgala-fixed2(right, $container-width, $content-width, aside1);
}

@mixin layoutgala-35 ($container-width, $content-width) {
	@include layoutgala-fixed2(right, $container-width, $content-width, content);
}

@mixin layoutgala-36 ($container-width, $content-width) {
	@include layoutgala-fixed2(left, $container-width, $content-width, content);
}

@mixin layoutgala-37 ($container-width, $content-width) {
	@include layoutgala-fixed2(right, $container-width, $content-width, container);
}

@mixin layoutgala-38 ($container-width, $content-width) {
	@include layoutgala-fixed2(right, $container-width, $content-width, container);
}

@mixin layoutgala-39 ($container-width, $aside1-width) {
	@include layoutgala-fixed1(left, $container-width, $aside1-width);
}

@mixin layoutgala-40 ($container-width, $aside1-width) {
	@include layoutgala-fixed1(right, $container-width, $aside1-width);
}