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.
Files changed (3) hide show
  1. data/README.md +21 -5
  2. data/stylesheets/_tfg.scss +9 -9
  3. 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
- ## Usage Example
10
+ ## Install It.
11
11
 
12
- ### HTML
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
- <!-- row 1 -->
30
+ / row 1:
16
31
  #col1
17
32
  #subcol1
18
33
  #subcol2
19
34
  #col2
20
35
 
21
- <!-- row 2 -->
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
 
@@ -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: 29
4
+ hash: 27
5
5
  prerelease: false
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 1
10
- version: 0.0.1
9
+ - 2
10
+ version: 0.0.2
11
11
  platform: ruby
12
12
  authors:
13
13
  - Zachary Voase