compass-vgrid-plugin 0.2.0 → 0.3.0

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/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