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.
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