redgreengrid 0.2.0 → 0.3.0

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