compass-tfg-plugin 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +21 -5
- data/stylesheets/_tfg.scss +9 -9
- metadata +3 -3
data/README.md
CHANGED
@@ -7,22 +7,38 @@ This is a port of the [Tiny Fluid Grid][], originally developed by
|
|
7
7
|
[girlfriend]: http://girlfriendnyc.com/
|
8
8
|
|
9
9
|
|
10
|
-
##
|
10
|
+
## Install It.
|
11
11
|
|
12
|
-
|
12
|
+
[sudo] gem install compass-tfg-plugin
|
13
|
+
|
14
|
+
|
15
|
+
## Use It.
|
16
|
+
|
17
|
+
If you’re creating a typical standalone project, use:
|
18
|
+
|
19
|
+
compass create -r compass-tfg my_project
|
20
|
+
|
21
|
+
Otherwise, make sure you `require 'compass-tfg'` at some point before running
|
22
|
+
Compass/Sass.
|
23
|
+
|
24
|
+
|
25
|
+
### Haml/HTML
|
26
|
+
|
27
|
+
Make your document structure look something like this:
|
13
28
|
|
14
29
|
#container
|
15
|
-
|
30
|
+
/ row 1:
|
16
31
|
#col1
|
17
32
|
#subcol1
|
18
33
|
#subcol2
|
19
34
|
#col2
|
20
35
|
|
21
|
-
|
36
|
+
/ row 2:
|
22
37
|
#col3
|
23
38
|
#col4
|
24
39
|
#col5
|
25
40
|
|
41
|
+
|
26
42
|
### Sass
|
27
43
|
|
28
44
|
@import "tfg";
|
@@ -34,7 +50,7 @@ This is a port of the [Tiny Fluid Grid][], originally developed by
|
|
34
50
|
$tfg-gutter: 30%; // default 20%
|
35
51
|
|
36
52
|
#container {
|
37
|
-
@include container;
|
53
|
+
@include tfg-container;
|
38
54
|
|
39
55
|
// Row 1
|
40
56
|
|
data/stylesheets/_tfg.scss
CHANGED
@@ -5,6 +5,15 @@ $tfg-max-width: 1080px !default;
|
|
5
5
|
$tfg-columns: 12 !default;
|
6
6
|
$tfg-gutter: 20% !default;
|
7
7
|
|
8
|
+
@mixin tfg-container {
|
9
|
+
@include pie-clearfix;
|
10
|
+
|
11
|
+
min-width: $tfg-min-width;
|
12
|
+
max-width: $tfg-max-width;
|
13
|
+
|
14
|
+
margin: auto;
|
15
|
+
}
|
16
|
+
|
8
17
|
@mixin grid($span) {
|
9
18
|
width: ((100% - $tfg-gutter) * ($span / $tfg-columns)) + ($tfg-gutter * (($span - 1) / $tfg-columns));
|
10
19
|
|
@@ -23,14 +32,5 @@ $tfg-gutter: 20% !default;
|
|
23
32
|
margin-left: ((100% - $tfg-gutter) * ($span / $tfg-columns)) + ($tfg-gutter * (($span + 1) / $tfg-columns / 2));
|
24
33
|
}
|
25
34
|
|
26
|
-
@mixin container {
|
27
|
-
@include pie-clearfix;
|
28
|
-
|
29
|
-
min-width: $tfg-min-width;
|
30
|
-
max-width: $tfg-max-width;
|
31
|
-
|
32
|
-
margin: auto;
|
33
|
-
}
|
34
|
-
|
35
35
|
@mixin alpha { margin-left: 0; }
|
36
36
|
@mixin omega { margin-right: 0; }
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-tfg-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 27
|
5
5
|
prerelease: false
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 2
|
10
|
+
version: 0.0.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Zachary Voase
|