compass-vgrid-plugin 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +2 -2
- data/VERSION +1 -1
- data/compass-vgrid-plugin.gemspec +4 -1
- data/sass/vgrid/_elastic.sass +61 -0
- data/sass/vgrid/_fluid.sass +3 -3
- data/templates/elastic/project/demo.html +60 -0
- data/templates/elastic/project/grid.sass +46 -1
- data/templates/elastic/project/manifest.rb +2 -1
- data/templates/fixed/project/demo.html +60 -0
- data/templates/fixed/project/grid.sass +23 -1
- data/templates/fixed/project/manifest.rb +2 -1
- data/templates/fluid/project/demo.html +60 -0
- data/templates/fluid/project/grid.sass +23 -1
- data/templates/fluid/project/manifest.rb +2 -1
- metadata +4 -1
data/README.md
CHANGED
@@ -22,7 +22,7 @@ vGrid provides three seperate framework options:
|
|
22
22
|
|
23
23
|
* `fixed` - Fixed width grid
|
24
24
|
* `fluid` - Fluid width grid
|
25
|
-
* `elastic` - Elastic width grid
|
25
|
+
* `elastic` - Elastic width grid
|
26
26
|
|
27
27
|
## Using vGrid with an existing project
|
28
28
|
|
@@ -47,7 +47,7 @@ Typically, you will want to customize your grid system. vGrid provides a number
|
|
47
47
|
|
48
48
|
* `!vgrid_width` - The width of the grid system. Defaults to `960px`. Not used with `fluid` framework.
|
49
49
|
* `!vgrid_columns` - The number of columns in the grid system. Defaults to `12`.
|
50
|
-
* `!vgrid_gutter` - The width of each column gutter. Defaults to `20px`.
|
50
|
+
* `!vgrid_gutter` - The width of each column gutter. Defaults to `20px`. Only used with `fixed` framework.
|
51
51
|
|
52
52
|
## Making semantic grids
|
53
53
|
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.3.0
|
@@ -5,7 +5,7 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = %q{compass-vgrid-plugin}
|
8
|
-
s.version = "0.
|
8
|
+
s.version = "0.3.0"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Aaron Russell"]
|
@@ -30,10 +30,13 @@ Gem::Specification.new do |s|
|
|
30
30
|
"sass/vgrid/_fixed.sass",
|
31
31
|
"sass/vgrid/_fluid.sass",
|
32
32
|
"sass/vgrid/shared/_grid_system.sass",
|
33
|
+
"templates/elastic/project/demo.html",
|
33
34
|
"templates/elastic/project/grid.sass",
|
34
35
|
"templates/elastic/project/manifest.rb",
|
36
|
+
"templates/fixed/project/demo.html",
|
35
37
|
"templates/fixed/project/grid.sass",
|
36
38
|
"templates/fixed/project/manifest.rb",
|
39
|
+
"templates/fluid/project/demo.html",
|
37
40
|
"templates/fluid/project/grid.sass",
|
38
41
|
"templates/fluid/project/manifest.rb"
|
39
42
|
]
|
data/sass/vgrid/_elastic.sass
CHANGED
@@ -0,0 +1,61 @@
|
|
1
|
+
=grid_container
|
2
|
+
:margin-left 4%
|
3
|
+
:margin-right 4%
|
4
|
+
:min-width= !vgrid_width
|
5
|
+
:width 92%
|
6
|
+
|
7
|
+
=grid_width(!n, !cols = !vgrid_columns)
|
8
|
+
:width= (100% / !cols) * !n - 2%
|
9
|
+
|
10
|
+
=grid_unit_base
|
11
|
+
:display inline
|
12
|
+
:float left
|
13
|
+
:position relative
|
14
|
+
:margin
|
15
|
+
:left= 1%
|
16
|
+
:right= 1%
|
17
|
+
|
18
|
+
=grid(!n, !cols = !vgrid_columns)
|
19
|
+
+grid_unit_base
|
20
|
+
+grid_width(!n, !cols)
|
21
|
+
|
22
|
+
=grids(!cols = !vgrid_columns)
|
23
|
+
#{enumerate(".grid", 1, !cols, "_")}
|
24
|
+
+grid_unit_base
|
25
|
+
@for !n from 1 through !cols
|
26
|
+
.container_#{!cols} .grid_#{!n}
|
27
|
+
+grid_width(!n, !cols)
|
28
|
+
|
29
|
+
=grid_prefix(!n, !cols = !vgrid_columns)
|
30
|
+
:padding-left= (100% / !cols) * !n
|
31
|
+
|
32
|
+
=grid_prefixes(!cols = !vgrid_columns)
|
33
|
+
@for !n from 1 through !cols - 1
|
34
|
+
.container_#{!cols} .prefix_#{!n}
|
35
|
+
+grid_prefix(!n, !cols)
|
36
|
+
|
37
|
+
=grid_suffix(!n, !cols = !vgrid_columns)
|
38
|
+
:padding-right= (100% / !cols) * !n
|
39
|
+
|
40
|
+
=grid_suffixes(!cols = !vgrid_columns)
|
41
|
+
@for !n from 1 through !cols - 1
|
42
|
+
.container_#{!cols} .suffix_#{!n}
|
43
|
+
+grid_suffix(!n, !cols)
|
44
|
+
|
45
|
+
=grid_push(!n, !cols = !vgrid_columns)
|
46
|
+
:left= (100% / !cols) * !n
|
47
|
+
|
48
|
+
=grid_pushes(!cols = !vgrid_columns)
|
49
|
+
@for !n from 1 through !cols - 1
|
50
|
+
.container_#{!cols} .push_#{!n}
|
51
|
+
+grid_push(!n, !cols)
|
52
|
+
|
53
|
+
=grid_pull(!n, !cols = !vgrid_columns)
|
54
|
+
:right= (100% / !cols) * !n * -1
|
55
|
+
|
56
|
+
=grid_pulls(!cols = !vgrid_columns)
|
57
|
+
@for !n from 1 through !cols - 1
|
58
|
+
.container_#{!cols} .pull_#{!n}
|
59
|
+
+grid_pull(!n, !cols)
|
60
|
+
|
61
|
+
@import vgrid/shared/grid_system.sass
|
data/sass/vgrid/_fluid.sass
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
=grid_container
|
2
2
|
:margin-left 4%
|
3
3
|
:margin-right 4%
|
4
|
-
:width
|
4
|
+
:width 92%
|
5
5
|
|
6
6
|
=grid_width(!n, !cols = !vgrid_columns)
|
7
7
|
:width= (100% / !cols) * !n - 2%
|
@@ -11,8 +11,8 @@
|
|
11
11
|
:float left
|
12
12
|
:position relative
|
13
13
|
:margin
|
14
|
-
:left
|
15
|
-
:right
|
14
|
+
:left 1%
|
15
|
+
:right 1%
|
16
16
|
|
17
17
|
=grid(!n, !cols = !vgrid_columns)
|
18
18
|
+grid_unit_base
|
@@ -0,0 +1,60 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
5
|
+
<title>vGrid - Variable Grid System (Elastic version)</title>
|
6
|
+
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div class="container_12">
|
10
|
+
<!--
|
11
|
+
.grid_12
|
12
|
+
-->
|
13
|
+
<div class="grid_12">
|
14
|
+
<h1>vGrid - Variable Grid System (Elastic version)</h1>
|
15
|
+
</div>
|
16
|
+
<!--
|
17
|
+
.grid_6
|
18
|
+
-->
|
19
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
20
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
21
|
+
<!--
|
22
|
+
.grid_4
|
23
|
+
-->
|
24
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
25
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
26
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
27
|
+
<!--
|
28
|
+
.grid_3
|
29
|
+
-->
|
30
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
31
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
32
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
33
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
34
|
+
<!--
|
35
|
+
.grid_2
|
36
|
+
-->
|
37
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
38
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
39
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
40
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
41
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
42
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
43
|
+
<!--
|
44
|
+
.grid_1
|
45
|
+
-->
|
46
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
47
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
48
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
49
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
50
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
51
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
52
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
53
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
54
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
55
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
56
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
57
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
58
|
+
</div>
|
59
|
+
</body>
|
60
|
+
</html>
|
@@ -1,2 +1,47 @@
|
|
1
1
|
/*
|
2
|
-
|
2
|
+
Variable Grid System (Elastic Version).
|
3
|
+
Learn more ~ http://www.spry-soft.com/grids/
|
4
|
+
Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/
|
5
|
+
Licensed under GPL and MIT.
|
6
|
+
Converted to Compass compatible plugin by Aaron Russell - http://www.aaronrussell.co.uk
|
7
|
+
|
8
|
+
@import vgrid/elastic.sass
|
9
|
+
|
10
|
+
// The following generates the default grids provided by the css version of Variable Grid System
|
11
|
+
+grid_system(12)
|
12
|
+
|
13
|
+
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
|
14
|
+
!vgrid_columns = 16
|
15
|
+
#wrap
|
16
|
+
+grid_container
|
17
|
+
#header, #footer
|
18
|
+
+grid(16)
|
19
|
+
#left-nav
|
20
|
+
+grid(5)
|
21
|
+
#main-content
|
22
|
+
+grid_prefix(1)
|
23
|
+
+grid(10)
|
24
|
+
|
25
|
+
// When in doubt, try a +clearfix mixin ;)
|
26
|
+
|
27
|
+
/*
|
28
|
+
Styles for demo. Delete these when you're happy what's going on.
|
29
|
+
|
30
|
+
body
|
31
|
+
:background #eee
|
32
|
+
:font 11px Arial
|
33
|
+
.container_12
|
34
|
+
:background #fff
|
35
|
+
:overflow auto
|
36
|
+
.grid_12
|
37
|
+
:background #666
|
38
|
+
:margin-bottom 6px
|
39
|
+
h1
|
40
|
+
:color #fff
|
41
|
+
:padding 10px
|
42
|
+
.grid_1, .grid_2, .grid_3, .grid_4, .grid_6
|
43
|
+
:background #ddd
|
44
|
+
:margin-bottom 6px
|
45
|
+
p
|
46
|
+
:color #333
|
47
|
+
:padding 10px
|
@@ -1 +1,2 @@
|
|
1
|
-
stylesheet "grid.sass", :media => "screen, projection"
|
1
|
+
stylesheet "grid.sass", :media => "screen, projection"
|
2
|
+
file "demo.html"
|
@@ -0,0 +1,60 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
5
|
+
<title>vGrid - Variable Grid System (Fixed width version)</title>
|
6
|
+
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div class="container_12">
|
10
|
+
<!--
|
11
|
+
.grid_12
|
12
|
+
-->
|
13
|
+
<div class="grid_12">
|
14
|
+
<h1>vGrid - Variable Grid System (Fixed width version)</h1>
|
15
|
+
</div>
|
16
|
+
<!--
|
17
|
+
.grid_6
|
18
|
+
-->
|
19
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
20
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
21
|
+
<!--
|
22
|
+
.grid_4
|
23
|
+
-->
|
24
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
25
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
26
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
27
|
+
<!--
|
28
|
+
.grid_3
|
29
|
+
-->
|
30
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
31
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
32
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
33
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
34
|
+
<!--
|
35
|
+
.grid_2
|
36
|
+
-->
|
37
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
38
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
39
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
40
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
41
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
42
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
43
|
+
<!--
|
44
|
+
.grid_1
|
45
|
+
-->
|
46
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
47
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
48
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
49
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
50
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
51
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
52
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
53
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
54
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
55
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
56
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
57
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
58
|
+
</div>
|
59
|
+
</body>
|
60
|
+
</html>
|
@@ -22,4 +22,26 @@
|
|
22
22
|
+grid_prefix(1)
|
23
23
|
+grid(10)
|
24
24
|
|
25
|
-
// When in doubt, try a +clearfix mixin ;)
|
25
|
+
// When in doubt, try a +clearfix mixin ;)
|
26
|
+
|
27
|
+
/*
|
28
|
+
Styles for demo. Delete these when you're happy what's going on.
|
29
|
+
|
30
|
+
body
|
31
|
+
:background #eee
|
32
|
+
:font 11px Arial
|
33
|
+
.container_12
|
34
|
+
:background #fff
|
35
|
+
:overflow auto
|
36
|
+
.grid_12
|
37
|
+
:background #666
|
38
|
+
:margin-bottom 6px
|
39
|
+
h1
|
40
|
+
:color #fff
|
41
|
+
:padding 10px
|
42
|
+
.grid_1, .grid_2, .grid_3, .grid_4, .grid_6
|
43
|
+
:background #ddd
|
44
|
+
:margin-bottom 6px
|
45
|
+
p
|
46
|
+
:color #333
|
47
|
+
:padding 10px
|
@@ -1 +1,2 @@
|
|
1
|
-
stylesheet "grid.sass", :media => "screen, projection"
|
1
|
+
stylesheet "grid.sass", :media => "screen, projection"
|
2
|
+
file "demo.html"
|
@@ -0,0 +1,60 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
5
|
+
<title>vGrid - Variable Grid System (Fluid version)</title>
|
6
|
+
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div class="container_12">
|
10
|
+
<!--
|
11
|
+
.grid_12
|
12
|
+
-->
|
13
|
+
<div class="grid_12">
|
14
|
+
<h1>vGrid - Variable Grid System (Fluid version)</h1>
|
15
|
+
</div>
|
16
|
+
<!--
|
17
|
+
.grid_6
|
18
|
+
-->
|
19
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
20
|
+
<div class="grid_6"><p>.grid_6</p></div>
|
21
|
+
<!--
|
22
|
+
.grid_4
|
23
|
+
-->
|
24
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
25
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
26
|
+
<div class="grid_4"><p>.grid_4</p></div>
|
27
|
+
<!--
|
28
|
+
.grid_3
|
29
|
+
-->
|
30
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
31
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
32
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
33
|
+
<div class="grid_3"><p>.grid_3</p></div>
|
34
|
+
<!--
|
35
|
+
.grid_2
|
36
|
+
-->
|
37
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
38
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
39
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
40
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
41
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
42
|
+
<div class="grid_2"><p>.grid_2</p></div>
|
43
|
+
<!--
|
44
|
+
.grid_1
|
45
|
+
-->
|
46
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
47
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
48
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
49
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
50
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
51
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
52
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
53
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
54
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
55
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
56
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
57
|
+
<div class="grid_1"><p>.grid_1</p></div>
|
58
|
+
</div>
|
59
|
+
</body>
|
60
|
+
</html>
|
@@ -22,4 +22,26 @@
|
|
22
22
|
+grid_prefix(1)
|
23
23
|
+grid(10)
|
24
24
|
|
25
|
-
// When in doubt, try a +clearfix mixin ;)
|
25
|
+
// When in doubt, try a +clearfix mixin ;)
|
26
|
+
|
27
|
+
/*
|
28
|
+
Styles for demo. Delete these when you're happy what's going on.
|
29
|
+
|
30
|
+
body
|
31
|
+
:background #eee
|
32
|
+
:font 11px Arial
|
33
|
+
.container_12
|
34
|
+
:background #fff
|
35
|
+
:overflow auto
|
36
|
+
.grid_12
|
37
|
+
:background #666
|
38
|
+
:margin-bottom 6px
|
39
|
+
h1
|
40
|
+
:color #fff
|
41
|
+
:padding 10px
|
42
|
+
.grid_1, .grid_2, .grid_3, .grid_4, .grid_6
|
43
|
+
:background #ddd
|
44
|
+
:margin-bottom 6px
|
45
|
+
p
|
46
|
+
:color #333
|
47
|
+
:padding 10px
|
@@ -1 +1,2 @@
|
|
1
|
-
stylesheet "grid.sass", :media => "screen, projection"
|
1
|
+
stylesheet "grid.sass", :media => "screen, projection"
|
2
|
+
file "demo.html"
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-vgrid-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Aaron Russell
|
@@ -45,10 +45,13 @@ files:
|
|
45
45
|
- sass/vgrid/_fixed.sass
|
46
46
|
- sass/vgrid/_fluid.sass
|
47
47
|
- sass/vgrid/shared/_grid_system.sass
|
48
|
+
- templates/elastic/project/demo.html
|
48
49
|
- templates/elastic/project/grid.sass
|
49
50
|
- templates/elastic/project/manifest.rb
|
51
|
+
- templates/fixed/project/demo.html
|
50
52
|
- templates/fixed/project/grid.sass
|
51
53
|
- templates/fixed/project/manifest.rb
|
54
|
+
- templates/fluid/project/demo.html
|
52
55
|
- templates/fluid/project/grid.sass
|
53
56
|
- templates/fluid/project/manifest.rb
|
54
57
|
has_rdoc: true
|