sass-960gs 0.1.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|