redgreengrid 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. data/README.md +41 -9
  2. data/VERSION +1 -1
  3. data/pkg/redgreengrid-0.2.0.gem +0 -0
  4. data/redgreengrid.gemspec +5 -3
  5. data/sass/redgreengrid/_browser_support.sass +16 -0
  6. data/sass/redgreengrid/_development.sass +13 -0
  7. data/sass/redgreengrid/_redgreengrid.sass +4 -1
  8. data/sass/redgreengrid/_typography.sass +12 -40
  9. data/sass/redgreengrid/elements/_hr.sass +16 -0
  10. data/sass/redgreengrid/fonts/20/_arial.sass +13 -15
  11. data/sass/redgreengrid/fonts/20/_base.sass +1 -0
  12. data/sass/redgreengrid/fonts/20/_helvetica.sass +29 -38
  13. data/sass/redgreengrid/fonts/20/_lucida.sass +10 -16
  14. data/sass/redgreengrid/fonts/20/_verdana.sass +24 -15
  15. metadata +5 -3
  16. data/pkg/redgreengrid-0.1.0.gem +0 -0
data/README.md CHANGED
@@ -26,7 +26,10 @@ Add to your screen.sass:
26
26
  @import redgreengrid/redgreengrid.sass
27
27
  // import font family for line height 20px
28
28
  @import redgreengrid/fonts/20/helvetica.sass
29
- +helvetica-light-13("p, li, td")
29
+ p, li, td
30
+ +helvetica-light-13
31
+ h1
32
+ +verdana-36
30
33
 
31
34
  // add styles to show the baseline grid
32
35
  +rgg-development
@@ -37,18 +40,40 @@ Add to your layout/application.html.haml:
37
40
  = redgreengrid
38
41
 
39
42
 
43
+ Don’ts
44
+ ------
40
45
 
46
+ Don’t add the fonts to the <body> unless you want the whole document to be shifted.
47
+
48
+ // Don’t
49
+ body
50
+ +arial-13
51
+
52
+ // Do
53
+ p, ol.list li, td, .links a
54
+ +arial-13
55
+
56
+ Don’t set the font for elements with a background unless you want the background to be shifted.
41
57
 
42
- Implementations Details
43
- =======================
44
-
58
+ // Don’t
59
+ <p class="highlight">abc</p>
60
+
61
+ p.highlight
62
+ :background red
63
+ +verdana-12
64
+
65
+ // Do
66
+ <p class="highlight"><span>abc</span></p>
67
+
68
+ p.highlight
69
+ :background red
70
+ span
71
+ +verdana-12
72
+
45
73
 
46
- Mix-Ins
47
- -------
48
74
 
49
- Maybe you’ll ask, why font size selectors aren’t implemented as mix-in?
50
- That’s because it needs a lot of browser fixes which can’t be done easily with mix-ins and would generate a lot of duplicate code.
51
- Let’s stay DRY.
75
+ Implementations Details
76
+ =======================
52
77
 
53
78
 
54
79
  Browser Fixes
@@ -87,6 +112,13 @@ There are two mix-ins which help you for this job:
87
112
 
88
113
  +up(1px)
89
114
  +down(2px)
115
+
116
+ If you want to fix a specific browser, there are mix-ins for each rendering engine:
117
+
118
+ +gecko(1px)
119
+ +presto(2px)
120
+ +trident(-1px)
121
+ +webkit(1px)
90
122
 
91
123
 
92
124
 
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.2.0
1
+ 0.3.0
data/pkg/redgreengrid-0.2.0.gem CHANGED
Binary file
data/redgreengrid.gemspec CHANGED
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = %q{redgreengrid}
8
- s.version = "0.2.0"
8
+ s.version = "0.3.0"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Nico Hagenburger"]
12
- s.date = %q{2009-11-30}
12
+ s.date = %q{2009-12-08}
13
13
  s.description = %q{RedGreenGred makes it easy for you to build cross-browser baseline grid layouts.}
14
14
  s.email = %q{redgreengrid@hagenburger.net}
15
15
  s.extra_rdoc_files = [
@@ -23,14 +23,16 @@ Gem::Specification.new do |s|
23
23
  "init.rb",
24
24
  "lib/redgreengrid.rb",
25
25
  "lib/redgreengrid/helpers.rb",
26
- "pkg/redgreengrid-0.1.0.gem",
27
26
  "pkg/redgreengrid-0.2.0.gem",
28
27
  "redgreengrid.gemspec",
28
+ "sass/redgreengrid/_browser_support.sass",
29
29
  "sass/redgreengrid/_development.sass",
30
30
  "sass/redgreengrid/_redgreengrid.sass",
31
31
  "sass/redgreengrid/_reset.sass",
32
32
  "sass/redgreengrid/_typography.sass",
33
+ "sass/redgreengrid/elements/_hr.sass",
33
34
  "sass/redgreengrid/fonts/20/_arial.sass",
35
+ "sass/redgreengrid/fonts/20/_base.sass",
34
36
  "sass/redgreengrid/fonts/20/_helvetica.sass",
35
37
  "sass/redgreengrid/fonts/20/_lucida.sass",
36
38
  "sass/redgreengrid/fonts/20/_verdana.sass",
data/sass/redgreengrid/_browser_support.sass ADDED
@@ -0,0 +1,16 @@
1
+ =browser(!engine, !up)
2
+ :position relative
3
+ .#{!engine} &
4
+ +up(!up, false)
5
+
6
+ =webkit(!up)
7
+ +browser("webkit", !up)
8
+
9
+ =presto(!up)
10
+ +browser("presto", !up)
11
+
12
+ =gecko(!up)
13
+ +browser("gecko", !up)
14
+
15
+ =trident(!up)
16
+ +browser("trident", !up)
data/sass/redgreengrid/_development.sass CHANGED
@@ -31,6 +31,9 @@
31
31
 
32
32
  div
33
33
  :border-bottom 1px #F33CE7 solid
34
+ :filter alpha(opacity=20)
35
+ :height 0
36
+ :line-height 0
34
37
  :margin-top = !line_height - 1px
35
38
  :opacity 0.1
36
39
  :width = 1280px
@@ -45,6 +48,16 @@
45
48
 
46
49
  div
47
50
  :border-bottom 1px #50C45E solid
51
+ :filter alpha(opacity=20)
52
+ :height 0
53
+ :line-height 0
48
54
  :margin-top = !line_height - 1px
49
55
  :opacity 0.2
50
56
  :width = 1280px
57
+
58
+ .trident
59
+ #redgreengrid-green, #redgreengrid-red
60
+ div
61
+ :float left
62
+ :Xmargin 0
63
+ :Xheight = !line_height - 1px
data/sass/redgreengrid/_redgreengrid.sass CHANGED
@@ -1,3 +1,6 @@
1
1
  @import reset.sass
2
+ @import browser_support.sass
2
3
  @import typography.sass
3
- @import development.sass
4
+ @import development.sass
5
+
6
+ @import elements/hr.sass
data/sass/redgreengrid/_typography.sass CHANGED
@@ -1,34 +1,10 @@
1
- !rgg_small ||= "small"
2
- !rgg_normal ||= "p, li, dt, dd, td, th, h3, h4, h5, h6, address"
3
- !rgg_big ||= "h2, legend"
4
- !rgg_huge ||= "h1"
5
- !rgg_bold ||= "h1, h2, h3, h4, h5, h6, strong, th"
6
-
7
-
8
- =browser(!engine, !selector, !up)
9
- .#{!engine}
10
- #{!selector}
11
- +up(!up)
12
-
13
- =webkit(!selector, !up)
14
- +browser("webkit", !selector, !up)
15
-
16
- =presto(!selector, !up)
17
- +browser("presto", !selector, !up)
18
-
19
- =gecko(!selector, !up)
20
- +browser("gecko", !selector, !up)
21
-
22
- =trident(!selector, !up)
23
- +browser("trident", !selector, !up)
24
-
25
-
26
- =up(!pixels)
27
- :position relative
1
+ =up(!pixels, !position = true)
2
+ @if !position
3
+ :position relative
28
4
  :bottom = !pixels
29
5
 
30
- =down(!pixels)
31
- +up(-!pixels)
6
+ =down(!pixels, !position = true)
7
+ +up(-!pixels, !position)
32
8
 
33
9
 
34
10
  =text-container
@@ -58,18 +34,14 @@
58
34
  =margin-bottom(!lines = 1)
59
35
  :margin-bottom = !lines * !line_height
60
36
 
37
+
38
+ =no-margin-bottom
39
+ :margin-bottom 0 !important
40
+
41
+
61
42
  =margin-top(!lines = 1)
62
43
  :margin-top = !lines * !line_height
63
44
 
64
45
 
65
- =hr
66
- hr
67
- :border none
68
- :border-bottom 1px #ccc dotted
69
- :clear both
70
- :margin = !line_height 1px !line_height - 1px 0
71
- +up(1px)
72
-
73
- .gecko hr
74
- :margin-bottom = !line_height - 2px
75
- +up(2px)
46
+ =no-margin-top
47
+ :margin-top 0 !important
data/sass/redgreengrid/elements/_hr.sass ADDED
@@ -0,0 +1,16 @@
1
+ =hr(!width = 1px, !color = #ccc, !style = "dotted")
2
+ hr
3
+ :border none
4
+ :border-bottom
5
+ :width = !width
6
+ :color = !color
7
+ :style = !style
8
+ :clear both
9
+ :height 0
10
+ :margin = !line_height 1px !line_height - 1px 0
11
+ +up(1px)
12
+
13
+ .trident hr
14
+ :display block
15
+ :float left
16
+ :margin-bottom = !line_height - 15px
data/sass/redgreengrid/fonts/20/_arial.sass CHANGED
@@ -1,20 +1,18 @@
1
- !line_height ||= 20px
1
+ @import base.sass
2
+
2
3
 
3
4
  !arial = "Arial, Helvetica, sans-serif"
4
5
 
5
- =arial-13(!selector = !rgg_normal)
6
- #{!selector}
7
- +font(!arial, 13px)
8
- +gecko(!selector, 1px)
6
+ =arial-13
7
+ +font(!arial, 13px)
8
+ +gecko(1px)
9
9
 
10
- =arial-16(!selector = !rgg_big)
11
- #{!selector}
12
- +font(!arial, 16px)
13
- +up(1px)
14
- +gecko(!selector, 2px)
10
+ =arial-16
11
+ +font(!arial, 16px)
12
+ +up(1px)
13
+ +gecko(2px)
15
14
 
16
- =arial-37(!selector = !rgg_huge)
17
- #{!selector}
18
- +font(!arial, 37px, 2)
19
- +down(1px)
20
- +presto(!selector, -2px)
15
+ =arial-37
16
+ +font(!arial, 37px, 2)
17
+ +down(1px)
18
+ +presto(-2px)
data/sass/redgreengrid/fonts/20/_base.sass ADDED
@@ -0,0 +1 @@
1
+ !line_height ||= 20px
data/sass/redgreengrid/fonts/20/_helvetica.sass CHANGED
@@ -1,61 +1,52 @@
1
- !line_height ||= 20px
1
+ @import base.sass
2
2
 
3
3
 
4
4
  // REGULAR
5
5
 
6
- !helvetica = "'HelveticaNeue','Helvetica','Swiss 721','Arial','sans-serif'"
6
+ !helvetica = "'HelveticaNeue','Helvetica','Swiss 721','Arial','sans-serif'"
7
7
 
8
- =helvetica-13(!selector = !rgg_normal)
9
- #{!selector}
10
- +font(!helvetica, 13px)
8
+ =helvetica-13
9
+ +font(!helvetica, 13px)
11
10
 
12
- =helvetica-16(!selector = !rgg_big)
13
- #{!selector}
14
- +font(!helvetica, 16px)
15
- +up(2px)
11
+ =helvetica-16
12
+ +font(!helvetica, 16px)
13
+ +up(2px)
16
14
 
17
- =helvetica-37(!selector = !rgg_huge)
18
- #{!selector}
19
- +font(!helvetica, 37px, 2)
20
- +presto(!selector, 1px)
15
+ =helvetica-37
16
+ +font(!helvetica, 37px, 2)
17
+ +presto(1px)
21
18
 
22
19
 
23
20
  // LIGHT
24
21
 
25
22
  !helvetica_light = "'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue','Swiss 721 Light','Helvetica','Arial','sans-serif'"
26
23
 
27
- =helvetica-light-13(!selector = !rgg_normal)
28
- #{!selector}
29
- +font(!helvetica_light, 13px, 1, 200)
30
- +up(1px)
24
+ =helvetica-light-13
25
+ +font(!helvetica_light, 13px, 1, 200)
26
+ +up(1px)
31
27
 
32
- =helvetica-light-16(!selector = !rgg_big)
33
- #{!selector}
34
- +font(!helvetica_light, 16px, 1, 200)
35
- +up(2px)
28
+ =helvetica-light-16
29
+ +font(!helvetica_light, 16px, 1, 200)
30
+ +up(2px)
36
31
 
37
- =helvetica-light-37(!selector = !rgg_huge)
38
- #{!selector}
39
- +font(!helvetica_light, 37px, 2, 200)
40
- +presto(!selector, 1px)
32
+ =helvetica-light-37
33
+ +font(!helvetica_light, 37px, 2, 200)
34
+ +presto(1px)
41
35
 
42
36
 
43
37
  // BOLD
44
38
 
45
- !helvetica_bold = "'HelveticaNeue-Bold','Helvetica Neue Bold','Helvetica Neue','Swiss 721 Bold','Helvetica','Arial','sans-serif'"
39
+ !helvetica_bold = "'HelveticaNeue-Bold','Helvetica Neue Bold','Helvetica Neue','Swiss 721 Bold','Helvetica','Arial','sans-serif'"
46
40
 
47
- =helvetica-bold-13(!selector = !rgg_normal)
48
- #{!selector}
49
- +font(!helvetica_bold, 13px)
50
- +up(1px)
41
+ =helvetica-bold-13
42
+ +font(!helvetica_bold, 13px)
43
+ +up(1px)
51
44
 
52
- =helvetica-bold-16(!selector = !rgg_big)
53
- #{!selector}
54
- +font(!helvetica_bold, 16px)
55
- +up(2px)
45
+ =helvetica-bold-16
46
+ +font(!helvetica_bold, 16px)
47
+ +up(2px)
56
48
 
57
- =helvetica-bold-37(!selector = !rgg_huge)
58
- #{!selector}
59
- +font(!helvetica_bold, 37px, 2)
60
- +presto(!selector, 1px)
49
+ =helvetica-bold-37
50
+ +font(!helvetica_bold, 37px, 2)
51
+ +presto(1px)
61
52
 
data/sass/redgreengrid/fonts/20/_lucida.sass CHANGED
@@ -1,21 +1,15 @@
1
- !line_height ||= 20px
1
+ @import base.sass
2
2
 
3
- !lucida = "'Lucida Grande', 'Tahoma', 'Vera Sans', 'Helvetica', 'Arial', 'sans-serif'"
4
3
 
5
- +typography(!rgg_huge, 36px, !line_height * 2 )
6
- +typography(!rgg_big, 16px, !line_height, 2px)
7
- +typography(!rgg_normal, !rgg_font_size, !line_height, 1px)
4
+ !lucida = "'Lucida Grande', 'Tahoma', 'Vera Sans', 'Helvetica', 'Arial', 'sans-serif'"
8
5
 
9
- =lucida-13(!selector = !rgg_normal)
10
- #{!selector}
11
- +font(!lucida, 13px)
12
- +up(1px)
6
+ =lucida-13
7
+ +font(!lucida, 13px)
8
+ +up(1px)
13
9
 
14
- =lucida-16(!selector = !rgg_big)
15
- #{!selector}
16
- +font(!lucida, 16px)
17
- +up(2px)
10
+ =lucida-16
11
+ +font(!lucida, 16px)
12
+ +up(2px)
18
13
 
19
- =lucida-36(!selector = !rgg_huge)
20
- #{!selector}
21
- +font(!lucida, 36px, 2)
14
+ =lucida-36
15
+ +font(!lucida, 36px, 2)
data/sass/redgreengrid/fonts/20/_verdana.sass CHANGED
@@ -1,20 +1,29 @@
1
- !line_height ||= 20px
1
+ @import base.sass
2
+
2
3
 
3
4
  !verdana = "Verdana, Tahoma, 'Vera Sans', Helvetica, Arial, sans-serif"
4
5
 
5
- =verdana-12(!selector = !rgg_normal)
6
- #{!selector}
7
- +font(!verdana, 12px)
8
- +gecko(!selector, 1px)
6
+ =verdana-10
7
+ +font(!verdana, 10px)
8
+
9
+ =verdana-11
10
+ +font(!verdana, 11px)
11
+ +gecko(1px)
12
+ +trident(1px)
13
+
14
+ =verdana-12
15
+ +font(!verdana, 12px)
16
+ +gecko(1px)
17
+ +trident(1px)
9
18
 
10
- =verdana-16(!selector = !rgg_big)
11
- #{!selector}
12
- +font(!verdana, 16px)
13
- +webkit(!selector, 2px)
14
- +presto(!selector, 2px)
15
- +gecko(!selector, 3px)
19
+ =verdana-16
20
+ +font(!verdana, 16px)
21
+ +gecko(3px)
22
+ +presto(2px)
23
+ +trident(2px)
24
+ +webkit(2px)
16
25
 
17
- =verdana-35(!selector = !rgg_huge)
18
- #{!selector}
19
- +font(!verdana, 36px, 2)
20
- +gecko(!selector, 1px)
26
+ =verdana-35
27
+ +font(!verdana, 36px, 2)
28
+ +gecko(1px)
29
+ +trident(1px)
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: redgreengrid
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nico Hagenburger
@@ -9,7 +9,7 @@ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
11
 
12
- date: 2009-11-30 00:00:00 +01:00
12
+ date: 2009-12-08 00:00:00 +01:00
13
13
  default_executable:
14
14
  dependencies: []
15
15
 
@@ -29,14 +29,16 @@ files:
29
29
  - init.rb
30
30
  - lib/redgreengrid.rb
31
31
  - lib/redgreengrid/helpers.rb
32
- - pkg/redgreengrid-0.1.0.gem
33
32
  - pkg/redgreengrid-0.2.0.gem
34
33
  - redgreengrid.gemspec
34
+ - sass/redgreengrid/_browser_support.sass
35
35
  - sass/redgreengrid/_development.sass
36
36
  - sass/redgreengrid/_redgreengrid.sass
37
37
  - sass/redgreengrid/_reset.sass
38
38
  - sass/redgreengrid/_typography.sass
39
+ - sass/redgreengrid/elements/_hr.sass
39
40
  - sass/redgreengrid/fonts/20/_arial.sass
41
+ - sass/redgreengrid/fonts/20/_base.sass
40
42
  - sass/redgreengrid/fonts/20/_helvetica.sass
41
43
  - sass/redgreengrid/fonts/20/_lucida.sass
42
44
  - sass/redgreengrid/fonts/20/_verdana.sass
data/pkg/redgreengrid-0.1.0.gem DELETED
Binary file