compass-tfg-plugin 0.0.1 → 0.0.2
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 +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
|