compass-scalablegs-plugin 0.0.2 → 1.0.0RC
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 +8 -8
- data/compass-scalablegs-plugin.gemspec +6 -6
- data/lib/scalable.rb +2 -0
- data/stylesheets/scalable/_grid.sass +83 -0
- data/templates/project/manifest.rb +1 -1
- data/templates/project/{scalablegs.sass → scalable.sass} +9 -4
- metadata +7 -7
- data/lib/scalablegs.rb +0 -2
- data/stylesheets/scalablegs/_grid.sass +0 -102
data/README.md
CHANGED
@@ -19,23 +19,23 @@ The plugin is build upon the great work done by [Christopher M. Eppstein and Mat
|
|
19
19
|
##Create a Scalablegs-based Compass Project
|
20
20
|
|
21
21
|
|
22
|
-
compass create -r
|
22
|
+
compass create -r scalable my_project --using scalable
|
23
23
|
|
24
24
|
Or, If you prefer to use Sass's indentation based syntax:
|
25
25
|
|
26
|
-
compass create -r
|
26
|
+
compass create -r scalable my_project --using scalable --syntax sass
|
27
27
|
|
28
|
-
Then edit your `
|
28
|
+
Then edit your `scalable.sass` accordingly.
|
29
29
|
|
30
30
|
# Customising your Grid System
|
31
31
|
|
32
32
|
|
33
33
|
This plugin uses the following configuration variables:
|
34
34
|
|
35
|
-
* `$
|
36
|
-
* `$
|
37
|
-
* `$
|
38
|
-
* `$
|
35
|
+
* `$scalable-columns` (default: 20) controls the default number of grid columns
|
36
|
+
* `$scalable-grid-min-width` (default: 26em - with the assumption of a 12px body font size) controls the default minimum site width
|
37
|
+
* `$scalable-grid-max-width` (default: 82em - with the assumption of a 12px body font size) controls the default maximum site width
|
38
|
+
* `$scalable-gutter-width` (default: 2%) controls the default gutter width
|
39
39
|
|
40
40
|
All of the mixins included with this plugin use these configuration variables
|
41
41
|
as defaults if the corresponding argument is omitted from a mixin call.
|
@@ -67,7 +67,7 @@ To create a grid system using only CSS, use the following semantic grid mixins:
|
|
67
67
|
|
68
68
|
Example:
|
69
69
|
|
70
|
-
$
|
70
|
+
$scalable-columns: 24
|
71
71
|
|
72
72
|
#wrap
|
73
73
|
+grid-container
|
@@ -2,20 +2,20 @@
|
|
2
2
|
|
3
3
|
Gem::Specification.new do |s|
|
4
4
|
s.name = %q{compass-scalablegs-plugin}
|
5
|
-
s.version = "
|
5
|
+
s.version = "1.0.0RC"
|
6
6
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
8
|
s.authors = ["Chris Eppstein", "Matt Sanders", "Kenneth Nordahl"]
|
9
|
-
s.date = %q{2011-04-
|
9
|
+
s.date = %q{2011-04-09}
|
10
10
|
s.description = %q{The Scalable Grid System or scalable.gs for short, is a device independent and cross screen size CSS framework.}
|
11
11
|
s.email = %w{kenneth@nordahl.me}
|
12
12
|
s.has_rdoc = false
|
13
13
|
s.files = [
|
14
14
|
"compass-scalablegs-plugin.gemspec",
|
15
15
|
"README.md",
|
16
|
-
"lib/
|
17
|
-
"stylesheets/
|
18
|
-
"templates/project/
|
16
|
+
"lib/scalable.rb",
|
17
|
+
"stylesheets/scalable/_grid.sass",
|
18
|
+
"templates/project/scalable.sass",
|
19
19
|
"templates/project/manifest.rb"
|
20
20
|
]
|
21
21
|
s.homepage = %q{http://github.com/KDN/compass-scalablegs-plugin}
|
@@ -23,5 +23,5 @@ Gem::Specification.new do |s|
|
|
23
23
|
s.rubyforge_project = %q{compass-scalablegs-plugin}
|
24
24
|
s.rubygems_version = %q{1.3.6}
|
25
25
|
s.summary = %q{Compass compatible Sass port of scalable.gs.}
|
26
|
-
s.add_dependency(%q<compass>, [">= 0.10.
|
26
|
+
s.add_dependency(%q<compass>, [">= 0.10.6"])
|
27
27
|
end
|
data/lib/scalable.rb
ADDED
@@ -0,0 +1,83 @@
|
|
1
|
+
$scalable-gutter-width: 2% !default
|
2
|
+
|
3
|
+
$scalable-grid-min-width: 26em !default
|
4
|
+
|
5
|
+
$scalable-grid-max-width: 82em !default
|
6
|
+
|
7
|
+
$scalable-grid-width: 100% !default
|
8
|
+
|
9
|
+
$scalable-columns: 20 !default
|
10
|
+
|
11
|
+
|
12
|
+
=grid-scalable
|
13
|
+
margin-left: auto
|
14
|
+
margin-right: auto
|
15
|
+
min-width: $scalable-grid-min-width
|
16
|
+
max-width: $scalable-grid-max-width
|
17
|
+
position: relative
|
18
|
+
|
19
|
+
=grid-width($n, $cols: $scalable-columns, $gutter-width: $scalable-gutter-width)
|
20
|
+
width: $scalable-grid-width / $cols * $n - $gutter-width
|
21
|
+
|
22
|
+
=grid-unit-base($gutter-width: $scalable-gutter-width)
|
23
|
+
display: inline
|
24
|
+
float: left
|
25
|
+
margin:
|
26
|
+
left: $gutter-width / 2
|
27
|
+
right: $gutter-width / 2
|
28
|
+
|
29
|
+
=grid($n, $cols: $scalable-columns, $gutter-width: $scalable-gutter-width)
|
30
|
+
+grid-unit-base($gutter-width)
|
31
|
+
+grid-width($n, $cols, $gutter-width)
|
32
|
+
|
33
|
+
=grid-first
|
34
|
+
margin-left: 0
|
35
|
+
|
36
|
+
=grid-last
|
37
|
+
margin-right: 0
|
38
|
+
|
39
|
+
=grids($cols: $scalable-columns, $gutter-width: $scalable-gutter-width)
|
40
|
+
#{enumerate(".grid", 1, $cols, "_")}
|
41
|
+
+grid-unit-base
|
42
|
+
@for $n from 1 through $cols
|
43
|
+
.grid_#{$n}
|
44
|
+
+grid-width($n, $cols, $gutter-width)
|
45
|
+
|
46
|
+
=grid-children
|
47
|
+
.first
|
48
|
+
+grid-first
|
49
|
+
.last
|
50
|
+
+grid-last
|
51
|
+
|
52
|
+
=grid-move-base
|
53
|
+
position: relative
|
54
|
+
|
55
|
+
=grid-move-push($n, $cols)
|
56
|
+
left: ($scalable-grid-width / $cols) * $n
|
57
|
+
|
58
|
+
=grid-move-pull($n, $cols)
|
59
|
+
left: -($scalable-grid-width / $cols) * $n
|
60
|
+
|
61
|
+
=grid-push($n, $cols: $scalable-columns)
|
62
|
+
+grid-move-base
|
63
|
+
+grid-move-push($n, $cols)
|
64
|
+
|
65
|
+
=grid-pull($n, $cols: $scalable-columns)
|
66
|
+
+grid-move-base
|
67
|
+
+grid-move-pull($n, $cols)
|
68
|
+
|
69
|
+
=grid-movements($cols: $scalable-columns)
|
70
|
+
#{enumerate(".push", 1, $cols, "_")},
|
71
|
+
#{enumerate(".pull", 1, $cols, "_")}
|
72
|
+
+grid-move-base
|
73
|
+
@for $n from 1 through $cols
|
74
|
+
.push_#{$n}
|
75
|
+
+grid-move-push($n, $cols)
|
76
|
+
.pull_#{$n}
|
77
|
+
+grid-move-pull($n, $cols)
|
78
|
+
|
79
|
+
=grid-system($cols: $scalable-columns)
|
80
|
+
+grid-scalable
|
81
|
+
+grids($cols)
|
82
|
+
+grid-children
|
83
|
+
+grid-movements($cols)
|
@@ -4,16 +4,21 @@
|
|
4
4
|
* Licensed under GPL and MIT.
|
5
5
|
|
6
6
|
|
7
|
-
@import
|
7
|
+
@import scalable/grid
|
8
8
|
|
9
|
-
// The following generates the default grids provided by the css version of
|
10
|
-
.
|
9
|
+
// The following generates the one of the default grids provided by the css version of scalable.gs
|
10
|
+
.scalable
|
11
11
|
+grid-system(20)
|
12
12
|
|
13
13
|
|
14
14
|
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
|
15
15
|
|
16
|
-
$
|
16
|
+
$scalable-grid-min-width: 26em
|
17
|
+
$scalable-grid-max-width: 82em
|
18
|
+
$scalable-columns: 20
|
19
|
+
$scalable-gutter-width: 2%
|
20
|
+
|
21
|
+
|
17
22
|
|
18
23
|
.two-column
|
19
24
|
+grid-scalable
|
metadata
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-scalablegs-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
prerelease:
|
5
|
-
version:
|
4
|
+
prerelease: 5
|
5
|
+
version: 1.0.0RC
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
8
|
- Chris Eppstein
|
@@ -12,7 +12,7 @@ autorequire:
|
|
12
12
|
bindir: bin
|
13
13
|
cert_chain: []
|
14
14
|
|
15
|
-
date: 2011-04-
|
15
|
+
date: 2011-04-09 00:00:00 Z
|
16
16
|
dependencies:
|
17
17
|
- !ruby/object:Gem::Dependency
|
18
18
|
name: compass
|
@@ -22,7 +22,7 @@ dependencies:
|
|
22
22
|
requirements:
|
23
23
|
- - ">="
|
24
24
|
- !ruby/object:Gem::Version
|
25
|
-
version: 0.10.
|
25
|
+
version: 0.10.6
|
26
26
|
type: :runtime
|
27
27
|
version_requirements: *id001
|
28
28
|
description: The Scalable Grid System or scalable.gs for short, is a device independent and cross screen size CSS framework.
|
@@ -37,9 +37,9 @@ extra_rdoc_files: []
|
|
37
37
|
files:
|
38
38
|
- compass-scalablegs-plugin.gemspec
|
39
39
|
- README.md
|
40
|
-
- lib/
|
41
|
-
- stylesheets/
|
42
|
-
- templates/project/
|
40
|
+
- lib/scalable.rb
|
41
|
+
- stylesheets/scalable/_grid.sass
|
42
|
+
- templates/project/scalable.sass
|
43
43
|
- templates/project/manifest.rb
|
44
44
|
homepage: http://github.com/KDN/compass-scalablegs-plugin
|
45
45
|
licenses: []
|
data/lib/scalablegs.rb
DELETED
@@ -1,102 +0,0 @@
|
|
1
|
-
# Config defaults
|
2
|
-
$scalablegs-gutter-width: 2\% !default
|
3
|
-
|
4
|
-
$scalablegs-grid-min-width: 26em !default
|
5
|
-
|
6
|
-
$scalablegs-grid-max-width: 82em !default
|
7
|
-
|
8
|
-
$scalablegs-grid-width: 100% !default
|
9
|
-
|
10
|
-
$scalablegs-columns: 20 !default
|
11
|
-
|
12
|
-
|
13
|
-
=grid-container
|
14
|
-
margin-left: auto
|
15
|
-
margin-right: auto
|
16
|
-
min-width: $scalablegs-grid-min-width
|
17
|
-
max-width: $scalablegs-grid-max-width
|
18
|
-
position: relative
|
19
|
-
|
20
|
-
=grid-width($n, $cols: $scalablegs-columns, $gutter-width: $scalablegs-gutter-width)
|
21
|
-
width: $scalablegs-grid-width / $cols * $n - $gutter-width
|
22
|
-
|
23
|
-
=grid-unit-base($gutter-width: $scalablegs-gutter-width)
|
24
|
-
display: inline
|
25
|
-
float: left
|
26
|
-
margin:
|
27
|
-
left: $gutter-width / 2
|
28
|
-
right: $gutter-width / 2
|
29
|
-
|
30
|
-
=grid($n, $cols: $scalablegs-columns, $gutter-width: $scalablegs-gutter-width)
|
31
|
-
+grid-unit-base($gutter-width)
|
32
|
-
+grid-width($n, $cols, $gutter-width)
|
33
|
-
|
34
|
-
=grid-first
|
35
|
-
margin-left: 0
|
36
|
-
|
37
|
-
=grid-last
|
38
|
-
margin-right: 0
|
39
|
-
|
40
|
-
=grids($cols: $scalablegs-columns, $gutter-width: $scalablegs-gutter-width)
|
41
|
-
#{enumerate(".grid", 1, $cols, "_")}
|
42
|
-
+grid-unit-base
|
43
|
-
@for $n from 1 through $cols
|
44
|
-
.grid_#{$n}
|
45
|
-
+grid-width($n, $cols, $gutter-width)
|
46
|
-
|
47
|
-
=grid-prefix($n, $cols: $scalablegs-columns)
|
48
|
-
padding-left: $scalablegs-grid-width / $cols * $n
|
49
|
-
|
50
|
-
=grid-prefixes($cols: $scalablegs-columns)
|
51
|
-
@for $n from 1 through $cols - 1
|
52
|
-
.prefix_#{$n}
|
53
|
-
+grid-prefix($n, $cols)
|
54
|
-
|
55
|
-
=grid-suffix($n, $cols: $scalablegs-columns)
|
56
|
-
padding-right: $scalablegs-grid-width / $cols * $n
|
57
|
-
|
58
|
-
=grid-suffixes($cols: $scalablegs-columns)
|
59
|
-
@for $n from 1 through $cols - 1
|
60
|
-
.suffix_#{$n}
|
61
|
-
+grid-suffix($n, $cols)
|
62
|
-
|
63
|
-
=grid-children
|
64
|
-
.first
|
65
|
-
+first
|
66
|
-
.last
|
67
|
-
+last
|
68
|
-
|
69
|
-
=grid-move-base
|
70
|
-
position: relative
|
71
|
-
|
72
|
-
=grid-move-push($n, $cols)
|
73
|
-
left: ($scalablegs-grid-width / $cols) * $n
|
74
|
-
|
75
|
-
=grid-move-pull($n, $cols)
|
76
|
-
left: -($scalablegs-grid-width / $cols) * $n
|
77
|
-
|
78
|
-
=grid-push($n, $cols: $scalablegs-columns)
|
79
|
-
+grid-move-base
|
80
|
-
+grid-move-push($n, $cols)
|
81
|
-
|
82
|
-
=grid-pull($n, $cols: $scalablegs-columns)
|
83
|
-
+grid-move-base
|
84
|
-
+grid-move-pull($n, $cols)
|
85
|
-
|
86
|
-
=grid-movements($cols: $scalablegs-columns)
|
87
|
-
#{enumerate(".push", 1, $cols, "_")},
|
88
|
-
#{enumerate(".pull", 1, $cols, "_")}
|
89
|
-
+grid-move-base
|
90
|
-
@for $n from 1 through $cols
|
91
|
-
.push_#{$n}
|
92
|
-
+grid-move-push($n, $cols)
|
93
|
-
.pull_#{$n}
|
94
|
-
+grid-move-pull($n, $cols)
|
95
|
-
|
96
|
-
=grid-system($cols: $scalablegs-columns)
|
97
|
-
+grid-container
|
98
|
-
+grids($cols)
|
99
|
-
+grid-prefixes($cols)
|
100
|
-
+grid-suffixes($cols)
|
101
|
-
+grid-children
|
102
|
-
+grid-movements($cols)
|