sass-960gs 0.1.0 → 1.0.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 +31 -17
- data/lib/sass-960gs.rb +1 -1
- data/sass-960gs.gemspec +1 -1
- data/vendor/assets/stylesheets/960/_fixed.scss +6 -3
- data/vendor/assets/stylesheets/960/_fluid.scss +8 -4
- data/vendor/assets/stylesheets/960/_text.scss +2 -1
- metadata +1 -2
- data/changelog.txt +0 -26
data/README.md
CHANGED
@@ -50,22 +50,26 @@ Class-Based Grid System
|
|
50
50
|
=======================
|
51
51
|
|
52
52
|
To create a grid system that works like the original 960 Grid System framework
|
53
|
-
use the `@include grid-system-complete` mixin to generate the corresponding
|
54
|
-
|
53
|
+
use the `@include grid-system-complete` mixin to generate the corresponding
|
54
|
+
classes. Youccan also customize the number of columns as demonstrated:
|
55
55
|
|
56
56
|
Example:
|
57
57
|
|
58
58
|
@include grid-system-complete(24);
|
59
59
|
|
60
|
-
If you want to scope the grid inside a specific set of selectors or control
|
60
|
+
If you want to scope the grid inside a specific set of selectors or control
|
61
|
+
your container class' name you can use the `+grid-system` mixin instead.
|
61
62
|
|
62
63
|
Example:
|
63
64
|
|
64
65
|
#wrap {
|
65
66
|
.my_container {
|
66
|
-
@include grid-system(16);
|
67
|
+
@include grid-system(16);
|
68
|
+
}
|
69
|
+
}
|
67
70
|
|
68
|
-
This will render all of the grid system nested below your selector, replacing
|
71
|
+
This will render all of the grid system nested below your selector, replacing
|
72
|
+
the normal function of the container class (would be .container_16 in this example).
|
69
73
|
|
70
74
|
Making Semantic Grids
|
71
75
|
=====================
|
@@ -73,12 +77,17 @@ Making Semantic Grids
|
|
73
77
|
To create a grid system using only CSS, use the following semantic grid mixins:
|
74
78
|
|
75
79
|
* Use the `@include grid-container` mixin to declare your container element.
|
76
|
-
* Use the `@include grid(N, columns, gutter-width)` mixin to declare a grid
|
77
|
-
|
78
|
-
* Use the `@include
|
79
|
-
|
80
|
-
|
81
|
-
|
80
|
+
* Use the `@include grid(N, columns, gutter-width)` mixin to declare a grid
|
81
|
+
element.
|
82
|
+
* Use the `@include alpha` and `@include omega` mixins to declare the first
|
83
|
+
and last grid elements for a row.
|
84
|
+
* Use the `@include grid-prefix(N, columns)` and `@include grid-suffix(N, columns)`
|
85
|
+
mixins to add empty grid columns before or after a grid element.
|
86
|
+
* Use the `@include grid-push(N, columns)` and `@include grid-pull(N, columns)`
|
87
|
+
mixins to move a grid element from its default position.
|
88
|
+
|
89
|
+
`N` is the number of grid columns to span as in `grid_N` or `push_N` with
|
90
|
+
the original 960 Grid System framework.
|
82
91
|
|
83
92
|
Example:
|
84
93
|
|
@@ -87,20 +96,25 @@ Example:
|
|
87
96
|
#wrap {
|
88
97
|
@include grid-container
|
89
98
|
#header {
|
90
|
-
@include grid(16);
|
99
|
+
@include grid(16);
|
100
|
+
}
|
91
101
|
#middle {
|
92
102
|
@include grid(16);
|
93
103
|
#left-nav {
|
94
104
|
@include grid(5);
|
95
|
-
@include alpha;
|
105
|
+
@include alpha;
|
106
|
+
}
|
96
107
|
#main-content {
|
97
108
|
@include grid-prefix(1);
|
98
109
|
@include grid(10);
|
99
|
-
@include omega;
|
110
|
+
@include omega;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
100
114
|
|
101
115
|
Authors/Contributors
|
102
116
|
====================
|
103
117
|
|
104
|
-
[
|
105
|
-
|
106
|
-
|
118
|
+
[Nathan Smith](http://sonspring.com/) is the author of [960.gs](http://960.gs/),
|
119
|
+
the grid system this plugin is based on. He's also kind enough to let us pester
|
120
|
+
him with questions from time to time.
|
data/lib/sass-960gs.rb
CHANGED
data/sass-960gs.gemspec
CHANGED
@@ -6,7 +6,8 @@
|
|
6
6
|
width: $ninesixty-grid-width;
|
7
7
|
}
|
8
8
|
|
9
|
-
@mixin grid-width($n, $cols: $ninesixty-columns,
|
9
|
+
@mixin grid-width($n, $cols: $ninesixty-columns,
|
10
|
+
$gutter-width: $ninesixty-gutter-width) {
|
10
11
|
width: $ninesixty-grid-width / $cols * $n - $gutter-width;
|
11
12
|
}
|
12
13
|
|
@@ -19,7 +20,8 @@
|
|
19
20
|
};
|
20
21
|
}
|
21
22
|
|
22
|
-
@mixin grid($n, $cols: $ninesixty-columns,
|
23
|
+
@mixin grid($n, $cols: $ninesixty-columns,
|
24
|
+
$gutter-width: $ninesixty-gutter-width) {
|
23
25
|
@include grid-unit-base($gutter-width);
|
24
26
|
@include grid-width($n, $cols, $gutter-width);
|
25
27
|
}
|
@@ -32,7 +34,8 @@
|
|
32
34
|
margin-right: 0;
|
33
35
|
}
|
34
36
|
|
35
|
-
@mixin grids($cols: $ninesixty-columns,
|
37
|
+
@mixin grids($cols: $ninesixty-columns,
|
38
|
+
$gutter-width: $ninesixty-gutter-width) {
|
36
39
|
#{enumerate(".grid", 1, $cols, $ninesixty-class-separator)} {
|
37
40
|
@include grid-unit-base($gutter-width);
|
38
41
|
}
|
@@ -7,7 +7,8 @@
|
|
7
7
|
min-width: $ninesixty-fluid-grid-min-width;
|
8
8
|
}
|
9
9
|
|
10
|
-
@mixin fluid-grid-width($n, $cols: $ninesixty-columns,
|
10
|
+
@mixin fluid-grid-width($n, $cols: $ninesixty-columns,
|
11
|
+
$gutter-width: $ninesixty-fluid-gutter-width) {
|
11
12
|
width: 100% / $cols * $n - $gutter-width;
|
12
13
|
}
|
13
14
|
|
@@ -20,7 +21,8 @@
|
|
20
21
|
};
|
21
22
|
}
|
22
23
|
|
23
|
-
@mixin fluid-grid($n, $cols: $ninesixty-columns,
|
24
|
+
@mixin fluid-grid($n, $cols: $ninesixty-columns,
|
25
|
+
$gutter-width: $ninesixty-fluid-gutter-width) {
|
24
26
|
@include fluid-grid-unit-base($gutter-width);
|
25
27
|
@include fluid-grid-width($n, $cols, $gutter-width);
|
26
28
|
}
|
@@ -33,8 +35,10 @@
|
|
33
35
|
margin-right: 0;
|
34
36
|
}
|
35
37
|
|
36
|
-
@mixin fluid-grids($cols: $ninesixty-columns,
|
37
|
-
|
38
|
+
@mixin fluid-grids($cols: $ninesixty-columns,
|
39
|
+
$gutter-width: $ninesixty-fluid-gutter-width) {
|
40
|
+
#{enumerate(".fluid" + $ninesixty-class-separator + "grid", 1,
|
41
|
+
$cols, $ninesixty-class-separator)} {
|
38
42
|
@include fluid-grid-unit-base($gutter-width);
|
39
43
|
}
|
40
44
|
@for $n from 1 through $cols {
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass-960gs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 1.0.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -22,7 +22,6 @@ files:
|
|
22
22
|
- .gitignore
|
23
23
|
- LICENSE.md
|
24
24
|
- README.md
|
25
|
-
- changelog.txt
|
26
25
|
- lib/sass-960gs.rb
|
27
26
|
- sass-960gs.gemspec
|
28
27
|
- vendor/assets/stylesheets/960/_fixed.scss
|
data/changelog.txt
DELETED
@@ -1,26 +0,0 @@
|
|
1
|
-
0.10.4 06/15/2011
|
2
|
-
=================
|
3
|
-
|
4
|
-
add grid-system-complete mixin which includes relevant .container_X class
|
5
|
-
add info about installing in existing compass project
|
6
|
-
remove unneeded max .push and .pull classes, thank ShPakvel
|
7
|
-
|
8
|
-
0.10.3 04/25/2011
|
9
|
-
=================
|
10
|
-
|
11
|
-
add missing gutter-width when using =grids, thanks ShPakvel
|
12
|
-
don't create max-length .push and .pull classes, thanks ShPakvel
|
13
|
-
doc improvements
|
14
|
-
|
15
|
-
0.10.2 04/08/2011
|
16
|
-
=================
|
17
|
-
|
18
|
-
add $ninesixty-class-separator variable, thanks mattyoung
|
19
|
-
add changelog
|
20
|
-
|
21
|
-
0.10.1 03/14/2011
|
22
|
-
=================
|
23
|
-
|
24
|
-
documentation improvements, thanks Matthew Schulkind
|
25
|
-
fix positioning bug in grid-push and grid-pull, thanks Matthew Schulkind
|
26
|
-
grid-push and grid-pull default to specified column count correctly
|