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);
}
|