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 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 (framework still in development)
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`. Not used with `fluid` framework.
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.2.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.2.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
  ]
@@ -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
@@ -1,7 +1,7 @@
1
1
  =grid_container
2
2
  :margin-left 4%
3
3
  :margin-right 4%
4
- :width= 92%
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= 1%
15
- :right= 1%
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
- The vGrid Elastic framework is still in development. Look out for version 0.3.
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.2.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