compass-grid-plugin 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/example/config.rb +1 -0
- data/example/example-fluid.html +40 -0
- data/example/scss/example-fluid.scss +71 -0
- data/example/scss/fixed.scss +2 -2
- data/example/scss/fluid.scss +2 -3
- data/lib/compass-grid.rb +1 -1
- data/lib/compass/grid/version.rb +1 -1
- data/stylesheets/grid/_fluid.scss +16 -6
- metadata +3 -1
data/example/config.rb
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
|
|
9
|
+
<title>1KB SCSS Grid Test Page</title>
|
|
10
|
+
<meta name="description" content="">
|
|
11
|
+
<meta name="author" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/example-fluid.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<div id="container">
|
|
19
|
+
<header>
|
|
20
|
+
<h1>Header</h1>
|
|
21
|
+
<nav><a href="#">Nav Link</a></nav>
|
|
22
|
+
</header>
|
|
23
|
+
<div role="main">
|
|
24
|
+
<div id="left-column">Left Column</div>
|
|
25
|
+
<div id="main-column">
|
|
26
|
+
<section class="hero">
|
|
27
|
+
Hero Space, I take the full width
|
|
28
|
+
</section>
|
|
29
|
+
<section>
|
|
30
|
+
<article id="content">Actual Content</article>
|
|
31
|
+
<aside id="right-column">Right Column</aside>
|
|
32
|
+
</section>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<footer>
|
|
36
|
+
<p>© Copyright 2011</p>
|
|
37
|
+
</footer>
|
|
38
|
+
</div>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
$grid-clearfix-class: false; // don't auto create the clearfix
|
|
2
|
+
|
|
3
|
+
// import the grid
|
|
4
|
+
@import "grid/fluid";
|
|
5
|
+
|
|
6
|
+
// establishes page width and centers
|
|
7
|
+
#container {
|
|
8
|
+
@include fluid-page;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// main page sections
|
|
12
|
+
[role="main"] {
|
|
13
|
+
@include fluid-row(true); // row is directly inside a page
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// header and footer don't have columns in this example
|
|
17
|
+
header, footer {
|
|
18
|
+
@include fluid-gutters; // gutters, like full-width columns
|
|
19
|
+
border: 1px solid black;
|
|
20
|
+
margin-bottom: $grid-gutter-width;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// column rules so that float and border-box aren't repeated
|
|
24
|
+
.column {
|
|
25
|
+
@include fluid-column($with-gutters: false); // omit gutters
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// side columns
|
|
29
|
+
#left-column, #right-column {
|
|
30
|
+
@extend .column;
|
|
31
|
+
border: 1px solid red;
|
|
32
|
+
}
|
|
33
|
+
#left-column {
|
|
34
|
+
@include fluid(3); //3 columns wide, don't adjust for border
|
|
35
|
+
@include fluid-gutters; // gutters
|
|
36
|
+
}
|
|
37
|
+
#right-column {
|
|
38
|
+
@include fluid(3, 0, 9); //3 columns wide, 9 column parent, don't adjust for border
|
|
39
|
+
@include fluid-gutters(9); // gutters in a 9 column parent
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// main column
|
|
43
|
+
#main-column {
|
|
44
|
+
@extend .column;
|
|
45
|
+
@include fluid(9); //9 columns wide
|
|
46
|
+
@include fluid-gutters; // gutters
|
|
47
|
+
|
|
48
|
+
// sections in the main column are rows
|
|
49
|
+
> section {
|
|
50
|
+
@include fluid-row(false, 9);
|
|
51
|
+
margin-bottom: $grid-gutter-width;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// hero sections don't have columns in this example
|
|
55
|
+
> section.hero {
|
|
56
|
+
border: 1px solid black;
|
|
57
|
+
margin-left: 0; // remove the right and left margins because this isn't a row
|
|
58
|
+
margin-right: 0;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// center column
|
|
63
|
+
#content {
|
|
64
|
+
@extend .column;
|
|
65
|
+
@include fluid(6, 0, 9); //6 columns wide, don't adjust for border
|
|
66
|
+
@include fluid-gutters(9); // gutters
|
|
67
|
+
border: 1px solid blue;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// define our own clearfix
|
|
71
|
+
.clearfix { @include pie-clearfix; }
|
data/example/scss/fixed.scss
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
border: 2px solid black;
|
|
13
13
|
}
|
|
14
14
|
@for $i from 1 through $grid-columns {
|
|
15
|
-
.grid-#{$i} { width: grid-width($i, -4px); }
|
|
15
|
+
.grid-#{$i} { width: grid-column-width($i, -4px); }
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
padding: 0 $grid-gutter-width/2;
|
|
22
22
|
}
|
|
23
23
|
@for $i from 1 through $grid-columns {
|
|
24
|
-
.grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
|
|
24
|
+
.grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
|
|
25
25
|
}
|
|
26
26
|
}
|
data/example/scss/fluid.scss
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// import the grid
|
|
2
|
-
@import "grid";
|
|
3
2
|
@import "grid/fluid";
|
|
4
3
|
@include grid-css;
|
|
5
4
|
@include fluid-css;
|
|
@@ -38,7 +37,7 @@
|
|
|
38
37
|
border: 2px solid black;
|
|
39
38
|
}
|
|
40
39
|
@for $i from 1 through $grid-columns {
|
|
41
|
-
.grid-#{$i} { width: grid-width($i, -4px); }
|
|
40
|
+
.grid-#{$i} { width: grid-column-width($i, -4px); }
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
|
|
@@ -47,6 +46,6 @@
|
|
|
47
46
|
padding: 0 $grid-gutter-width/2;
|
|
48
47
|
}
|
|
49
48
|
@for $i from 1 through $grid-columns {
|
|
50
|
-
.grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
|
|
49
|
+
.grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
|
|
51
50
|
}
|
|
52
51
|
}
|
data/lib/compass-grid.rb
CHANGED
data/lib/compass/grid/version.rb
CHANGED
|
@@ -13,8 +13,14 @@
|
|
|
13
13
|
//-----------------------------------
|
|
14
14
|
|
|
15
15
|
// apply a width to a column
|
|
16
|
-
@mixin fluid($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
16
|
+
@mixin fluid($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0, $with-gutters: false) {
|
|
17
17
|
width: fluid-column-width($i, $plus, $parent, $parent-plus);
|
|
18
|
+
@if $with-gutters { @include fluid-gutters($parent, $parent-plus); }
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// apply standard gutters to a column or row
|
|
22
|
+
@mixin fluid-gutters($parent: $grid-columns, $parent-plus: 0, $row: false) {
|
|
23
|
+
margin: 0 fluid-width($grid-gutter-width / 2 * if($row, -1, 1), grid-column-width($parent, $parent-plus + if($row, 0, $grid-gutter-width)));
|
|
18
24
|
}
|
|
19
25
|
|
|
20
26
|
// return a percentage width relative to a column width
|
|
@@ -56,7 +62,7 @@
|
|
|
56
62
|
@if $page {
|
|
57
63
|
margin: 0 0;
|
|
58
64
|
} @else {
|
|
59
|
-
|
|
65
|
+
@include fluid-gutters($parent, $parent-plus, true);
|
|
60
66
|
}
|
|
61
67
|
}
|
|
62
68
|
|
|
@@ -65,9 +71,9 @@
|
|
|
65
71
|
//-----------------------------------
|
|
66
72
|
|
|
67
73
|
// specify a column
|
|
68
|
-
@mixin fluid-column($i: false, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
74
|
+
@mixin fluid-column($i: false, $plus: 0, $parent: $grid-columns, $parent-plus: 0, $with-gutters: true) {
|
|
69
75
|
@include box-sizing(border-box);
|
|
70
|
-
|
|
76
|
+
@if $with-gutters { @include fluid-gutters($parent, $parent-plus); }
|
|
71
77
|
float: left;
|
|
72
78
|
|
|
73
79
|
@if $grid-support-for-ie6 { display: inline; }
|
|
@@ -80,9 +86,13 @@
|
|
|
80
86
|
@mixin fluid-offset($i: 1, $plus: 0, $side: left, $parent: $grid-columns, $parent-plus: 0) {
|
|
81
87
|
margin-#{$side}: (fluid-column-width($i, $grid-gutter-width + $plus) + fluid-width($grid-gutter-width / 2, grid-column-width($parent, $parent-plus + $grid-gutter-width)));
|
|
82
88
|
}
|
|
89
|
+
|
|
90
|
+
// convenience mixin for left offsets
|
|
83
91
|
@mixin fluid-offset-left($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
84
92
|
@include fluid-offset($i, $plus, left, $parent, $parent-plus);
|
|
85
93
|
}
|
|
94
|
+
|
|
95
|
+
// convenience mixin for right offsets
|
|
86
96
|
@mixin fluid-offset-right($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
87
97
|
@include fluid-offset($i, $plus, right, $parent, $parent-plus);
|
|
88
98
|
}
|
|
@@ -109,8 +119,8 @@
|
|
|
109
119
|
// columns widths
|
|
110
120
|
.fluid-#{$i} {
|
|
111
121
|
width: fluid-column-width($i);
|
|
112
|
-
> .fluid-row {
|
|
113
|
-
> .fluid-row > .fluid-column {
|
|
122
|
+
> .fluid-row { @include fluid-gutters($i, $row: true); }
|
|
123
|
+
> .fluid-row > .fluid-column { @include fluid-gutters($i); }
|
|
114
124
|
@for $j from 1 through $grid-columns - 1 {
|
|
115
125
|
@if $j <= $i {
|
|
116
126
|
> .fluid-row > .fluid-#{$j} { width: fluid-column-width($j, 0, $i); }
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass-grid-plugin
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.3
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -40,12 +40,14 @@ files:
|
|
|
40
40
|
- README.md
|
|
41
41
|
- compass-grid-plugin.gemspec
|
|
42
42
|
- example/config.rb
|
|
43
|
+
- example/example-fluid.html
|
|
43
44
|
- example/example.html
|
|
44
45
|
- example/fixed.html
|
|
45
46
|
- example/fluid.html
|
|
46
47
|
- example/i/dino-1.jpg
|
|
47
48
|
- example/i/dino-2.png
|
|
48
49
|
- example/media.html
|
|
50
|
+
- example/scss/example-fluid.scss
|
|
49
51
|
- example/scss/example.scss
|
|
50
52
|
- example/scss/fixed.scss
|
|
51
53
|
- example/scss/fluid.scss
|