redgreengrid 0.1.0 → 0.2.0

data/README.md

@@ -24,10 +24,10 @@ Add to your screen.sass:
 
     // import basics
     @import redgreengrid/redgreengrid.sass
-    // set font family
-    @import redgreengrid/typography/helvetica.sass
-    // add RedGreenGrid
-    +rgg
+    // import font family for line height 20px
+    @import redgreengrid/fonts/20/helvetica.sass
+    +helvetica-light-13("p, li, td")
+    
     // add styles to show the baseline grid
     +rgg-development
     
@@ -37,23 +37,6 @@ Add to your layout/application.html.haml:
       = redgreengrid
 
 
-Font Sizes
-----------
-
-A RedGreenGrid based layout should have three font sizes: normal, big, huge.
-You can define which CSS selectors will get which size.
-Here’s the default.
-Be sure to place your changes on top of the @imports:
-
-    !rgg_normal = "p, li, dt, dd, td, th, h3, h4, h5, h6, address"
-    !rgg_big    = "h2, legend"
-    !rgg_huge   = "h1"
-    
-    @import redgreengrid/redgreengrid.sass
-    @import redgreengrid/typography/helvetica.sass
-    +rgg
-
-
 
 
 Implementations Details
@@ -120,7 +103,7 @@ If you want to change the font size or line height:
 
 1. copy the SASS file of your preferred font family
 2. change the sizes
-3. name the file `_<font-family>_<font-size>_<line-height>.sass`
+3. name the file `fonts/<line-height>/_<font-family>.sass`
 4. test it and fix it for “all” browsers
 5. make a pull request for RedGreenGrid to share it
 

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0

data/redgreengrid.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{redgreengrid}
-  s.version = "0.1.0"
+  s.version = "0.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Nico Hagenburger"]
-  s.date = %q{2009-11-21}
+  s.date = %q{2009-11-30}
   s.description = %q{RedGreenGred makes it easy for you to build cross-browser baseline grid layouts.}
   s.email = %q{redgreengrid@hagenburger.net}
   s.extra_rdoc_files = [
@@ -24,15 +24,16 @@ Gem::Specification.new do |s|
      "lib/redgreengrid.rb",
      "lib/redgreengrid/helpers.rb",
      "pkg/redgreengrid-0.1.0.gem",
+     "pkg/redgreengrid-0.2.0.gem",
      "redgreengrid.gemspec",
      "sass/redgreengrid/_development.sass",
      "sass/redgreengrid/_redgreengrid.sass",
      "sass/redgreengrid/_reset.sass",
      "sass/redgreengrid/_typography.sass",
-     "sass/redgreengrid/typography/_arial_13_20.sass",
-     "sass/redgreengrid/typography/_helvetica_13_20.sass",
-     "sass/redgreengrid/typography/_lucida_13_20.sass",
-     "sass/redgreengrid/typography/_verdana_12_20.sass",
+     "sass/redgreengrid/fonts/20/_arial.sass",
+     "sass/redgreengrid/fonts/20/_helvetica.sass",
+     "sass/redgreengrid/fonts/20/_lucida.sass",
+     "sass/redgreengrid/fonts/20/_verdana.sass",
      "spec/redgreengrid/helpers_spec.rb",
      "spec/spec.opts",
      "spec/spec_helper.rb",

data/sass/redgreengrid/_development.sass

@@ -31,7 +31,7 @@
     
     div
       :border-bottom    1px #F33CE7 solid
-      :margin-top     = !rgg_line_height - 1px
+      :margin-top     = !line_height - 1px
       :opacity          0.1
       :width          = 1280px
 
@@ -45,6 +45,6 @@
     
     div
       :border-bottom    1px #50C45E solid
-      :margin-top     = !rgg_line_height - 1px
+      :margin-top     = !line_height - 1px
       :opacity          0.2
       :width          = 1280px

data/sass/redgreengrid/_reset.sass

@@ -1,4 +1,4 @@
-a, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, form, fieldset, legend, p, pre, span, th, td
+a, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, p, pre, span, th, td
   :background-repeat   no-repeat
   :margin              0
   :padding             0

data/sass/redgreengrid/_typography.sass

@@ -1,68 +1,75 @@
-!rgg_small              ||= "small"
-!rgg_normal             ||= "p, li, dt, dd, td, th, h3, h4, h5, h6, address"
-!rgg_big                ||= "h2, legend"
-!rgg_huge               ||= "h1"
-!rgg_bold               ||= "h1, h2, h3, h4, h5, h6, strong, th"
-!rgg_inline_text        ||= ""
-!rgg_inline_container   ||= ""
+!rgg_small   ||= "small"
+!rgg_normal  ||= "p, li, dt, dd, td, th, h3, h4, h5, h6, address"
+!rgg_big     ||= "h2, legend"
+!rgg_huge    ||= "h1"
+!rgg_bold    ||= "h1, h2, h3, h4, h5, h6, strong, th"
+
+
+=browser(!engine, !selector, !up)
+  .#{!engine}
+    #{!selector}
+      +up(!up)
+
+=webkit(!selector, !up)
+  +browser("webkit", !selector, !up)
+
+=presto(!selector, !up)
+  +browser("presto", !selector, !up)
+
+=gecko(!selector, !up)
+  +browser("gecko", !selector, !up)
+
+=trident(!selector, !up)
+  +browser("trident", !selector, !up)
 
 
 =up(!pixels)
   :position       relative
   :bottom       = !pixels
   
-
 =down(!pixels)
   +up(-!pixels)
   
 
-=typography(!tag, !tag_font_size, !tag_line_height, !tag_position = false)
-  #{!tag}
-    :font-size    = !tag_font_size
-    :line-height  = !tag_line_height
-    :margin       = 0 0 !rgg_line_height
-    @if !tag_position
-      :position     relative
-      :bottom     = !tag_position
+=text-container
+  :bottom         0
+  
+
+=font(!family, !size, !lines = 1, !weight = false)
+  :font-family    = !family
+  :font-size      = !size
+  @if !weight
+    :font-weight  = !weight
+  :line-height    = !line_height * !lines
 
 
 =float-left(!lines)
-  :height         = !lines * !rgg_line_height
+  :height         = !lines * !line_height
   :float            left
-  :margin         = 0 !rgg_line_height !rgg_line_height 0
+  :margin         = 0 !line_height !line_height 0
 
 
 =float-right(!lines)
-  :height         = !lines * !rgg_line_height
+  :height         = !lines * !line_height
   :float            right
-  :margin         = 0 0 !rgg_line_height !rgg_line_height
+  :margin         = 0 0 !line_height !line_height
 
 
+=margin-bottom(!lines = 1)
+  :margin-bottom  = !lines * !line_height
 
-=rgg
-  .box
-    +float-left(2)
-    :width        40px
-    :background   #ccc
-  
-  ul.list li
-    :list-style     circle
-    :margin-left  = !rgg_line_height
-  
-  ol.list li
-    :list-style     decimal
-    :margin-left  = !rgg_line_height
-  
+=margin-top(!lines = 1)
+  :margin-top     = !lines * !line_height
+
+
+=hr  
   hr
-    :border         none
-    :border-bottom  1px #ccc dotted
-    :margin       = !rgg_line_height 1px !rgg_line_height - 1px 0
+    :border           none
+    :border-bottom    1px #ccc dotted
+    :clear            both
+    :margin         = !line_height 1px !line_height - 1px 0
     +up(1px)
 
   .gecko hr
-    :margin-bottom  = !rgg_line_height - 2px
+    :margin-bottom  = !line_height - 2px
     +up(2px)
-  
-  @if !rgg_inline_container != ""
-    #{!rgg_inline_container}
-      :bottom       0

data/sass/redgreengrid/fonts/20/_arial.sass

@@ -0,0 +1,20 @@
+!line_height  ||= 20px
+
+!arial = "Arial, Helvetica, sans-serif"
+
+=arial-13(!selector = !rgg_normal)
+  #{!selector}
+    +font(!arial, 13px)
+  +gecko(!selector, 1px)
+
+=arial-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!arial, 16px)
+    +up(1px)
+  +gecko(!selector, 2px)
+
+=arial-37(!selector = !rgg_huge)
+  #{!selector}
+    +font(!arial, 37px, 2)
+    +down(1px)
+  +presto(!selector, -2px)

data/sass/redgreengrid/fonts/20/_helvetica.sass

@@ -0,0 +1,61 @@
+!line_height  ||= 20px
+
+
+// REGULAR
+
+!helvetica       = "'HelveticaNeue','Helvetica','Swiss 721','Arial','sans-serif'"
+
+=helvetica-13(!selector = !rgg_normal)
+  #{!selector}
+    +font(!helvetica, 13px)
+
+=helvetica-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!helvetica, 16px)
+    +up(2px)
+
+=helvetica-37(!selector = !rgg_huge)
+  #{!selector}
+    +font(!helvetica, 37px, 2)
+  +presto(!selector, 1px)
+  
+
+// LIGHT
+
+!helvetica_light = "'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue','Swiss 721 Light','Helvetica','Arial','sans-serif'"
+
+=helvetica-light-13(!selector = !rgg_normal)
+  #{!selector}
+    +font(!helvetica_light, 13px, 1, 200)
+    +up(1px)
+
+=helvetica-light-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!helvetica_light, 16px, 1, 200)
+    +up(2px)
+
+=helvetica-light-37(!selector = !rgg_huge)
+  #{!selector}
+    +font(!helvetica_light, 37px, 2, 200)
+  +presto(!selector, 1px)
+  
+
+// BOLD
+
+!helvetica_bold  = "'HelveticaNeue-Bold','Helvetica Neue Bold','Helvetica Neue','Swiss 721 Bold','Helvetica','Arial','sans-serif'"
+
+=helvetica-bold-13(!selector = !rgg_normal)
+  #{!selector}
+    +font(!helvetica_bold, 13px)
+    +up(1px)
+
+=helvetica-bold-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!helvetica_bold, 16px)
+    +up(2px)
+
+=helvetica-bold-37(!selector = !rgg_huge)
+  #{!selector}
+    +font(!helvetica_bold, 37px, 2)
+  +presto(!selector, 1px)
+  

data/sass/redgreengrid/fonts/20/_lucida.sass

@@ -0,0 +1,21 @@
+!line_height  ||= 20px
+
+!lucida = "'Lucida Grande', 'Tahoma', 'Vera Sans', 'Helvetica', 'Arial', 'sans-serif'"
+
++typography(!rgg_huge,    36px,           !line_height * 2     )
++typography(!rgg_big,     16px,           !line_height,     2px)
++typography(!rgg_normal,  !rgg_font_size, !line_height,     1px)
+
+=lucida-13(!selector = !rgg_normal)
+  #{!selector}
+    +font(!lucida, 13px)
+    +up(1px)
+    
+=lucida-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!lucida, 16px)
+    +up(2px)
+
+=lucida-36(!selector = !rgg_huge)
+  #{!selector}
+    +font(!lucida, 36px, 2)

data/sass/redgreengrid/fonts/20/_verdana.sass

@@ -0,0 +1,20 @@
+!line_height  ||= 20px
+
+!verdana = "Verdana, Tahoma, 'Vera Sans', Helvetica, Arial, sans-serif"
+    
+=verdana-12(!selector = !rgg_normal)
+  #{!selector}
+    +font(!verdana, 12px)
+  +gecko(!selector, 1px)
+    
+=verdana-16(!selector = !rgg_big)
+  #{!selector}
+    +font(!verdana, 16px)
+  +webkit(!selector, 2px)
+  +presto(!selector, 2px)
+  +gecko(!selector, 3px)
+    
+=verdana-35(!selector = !rgg_huge)
+  #{!selector}
+    +font(!verdana, 36px, 2)
+  +gecko(!selector, 1px)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: redgreengrid
 version: !ruby/object:Gem::Version 
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Nico Hagenburger
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2009-11-21 00:00:00 +01:00
+date: 2009-11-30 00:00:00 +01:00
 default_executable: 
 dependencies: []
 
@@ -30,15 +30,16 @@ files:
 - lib/redgreengrid.rb
 - lib/redgreengrid/helpers.rb
 - pkg/redgreengrid-0.1.0.gem
+- pkg/redgreengrid-0.2.0.gem
 - redgreengrid.gemspec
 - sass/redgreengrid/_development.sass
 - sass/redgreengrid/_redgreengrid.sass
 - sass/redgreengrid/_reset.sass
 - sass/redgreengrid/_typography.sass
-- sass/redgreengrid/typography/_arial_13_20.sass
-- sass/redgreengrid/typography/_helvetica_13_20.sass
-- sass/redgreengrid/typography/_lucida_13_20.sass
-- sass/redgreengrid/typography/_verdana_12_20.sass
+- sass/redgreengrid/fonts/20/_arial.sass
+- sass/redgreengrid/fonts/20/_helvetica.sass
+- sass/redgreengrid/fonts/20/_lucida.sass
+- sass/redgreengrid/fonts/20/_verdana.sass
 - spec/redgreengrid/helpers_spec.rb
 - spec/spec.opts
 - spec/spec_helper.rb

data/sass/redgreengrid/typography/_arial_13_20.sass

@@ -1,23 +0,0 @@
-!rgg_font_size    ||= 13px
-!rgg_line_height  ||= 20px
-
-body
-  :font-family    "Arial", "Helvetica", "sans-serif"
-
-#{!rgg_bold}
-  :font-weight    bold
-
-+typography(!rgg_huge,    37px,           !rgg_line_height * 2, -1px)
-+typography(!rgg_big,     16px,           !rgg_line_height,      1px)
-+typography(!rgg_normal,  !rgg_font_size, !rgg_line_height,         )
-
-.presto
-  #{!rgg_huge}
-    +down(2px)
-      
-.gecko
-  #{!rgg_big}
-    +up(2px)
-    
-  #{!rgg_normal}
-    +up(1px)

data/sass/redgreengrid/typography/_helvetica_13_20.sass

@@ -1,19 +0,0 @@
-!rgg_font_size    ||= 13px
-!rgg_line_height  ||= 20px
-
-body
-  :font-family    "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Swiss 721 Light", "Helvetica", "Arial", "sans-serif"
-  :font-weight    200
-
-#{!rgg_bold}
-  :font-family    "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", "Swiss 721 Bold", "Helvetica", "Arial", "sans-serif"
-  :font-weight    bold
-
-+typography(!rgg_huge,    37px,           !rgg_line_height * 2     )
-+typography(!rgg_big,     16px,           !rgg_line_height,     2px)
-+typography(!rgg_normal,  !rgg_font_size, !rgg_line_height,     1px)
-
-.presto
-  #{!rgg_big}
-    +up(2px)
-

data/sass/redgreengrid/typography/_lucida_13_20.sass

@@ -1,12 +0,0 @@
-!rgg_font_size    ||= 13px
-!rgg_line_height  ||= 20px
-
-body
-  :font-family    "Lucida Grande", "Tahoma", "Vera Sans", "Helvetica", "Arial", "sans-serif"
-
-#{!rgg_bold}
-  :font-weight    bold
-
-+typography(!rgg_huge,    36px,           !rgg_line_height * 2     )
-+typography(!rgg_big,     16px,           !rgg_line_height,     2px)
-+typography(!rgg_normal,  !rgg_font_size, !rgg_line_height,     1px)

data/sass/redgreengrid/typography/_verdana_12_20.sass

@@ -1,18 +0,0 @@
-!rgg_font_size    ||= 12px
-!rgg_line_height  ||= 20px
-
-body
-  :font-family    "Verdana", "Tahoma", "Vera Sans", "Helvetica", "Arial", "sans-serif"
-  
-#{!rgg_bold}
-  :font-weight    bold
-
-+typography(!rgg_huge,    35px,           !rgg_line_height * 2    )
-+typography(!rgg_big,     16px,           !rgg_line_height,    2px)
-+typography(!rgg_normal,  !rgg_font_size, !rgg_line_height        )
-
-.gecko
-  #{!rgg_big}
-    +up(3px)
-  #{!rgg_normal}
-    +up(1px)