seasons 0.9.3.beta8 → 0.9.3.beta9

data/seasons.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{seasons}
-  s.version = "0.9.3.beta8"
+  s.version = "0.9.3.beta9"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
   s.authors = ["Scott Kellum"]
@@ -21,6 +21,12 @@ Gem::Specification.new do |s|
     "stylesheets/seasons/tools/_modular-scale.sass",
     "stylesheets/seasons/tools/_color-schemer.sass",
     "stylesheets/seasons/tools/_reset.sass",
+    "stylesheets/seasons/plugin/_ad.sass",
+    "stylesheets/seasons/plugin/_ipad.sass",
+    "stylesheets/seasons/plugin/_mobile.sass",
+    "stylesheets/seasons/plugin/_no-treesaver.sass",
+    "stylesheets/seasons/plugin/_tablet-7-normalize.sass",
+    "stylesheets/seasons/plugin/_tablet-7-template.sass",
     "templates/project/_chrome.scss",
     "templates/project/_config.sass",
     "templates/project/_pages.scss",
@@ -38,7 +44,7 @@ Gem::Specification.new do |s|
   s.homepage = %q{http://www.treesaver.net/}
   s.require_paths = ["lib"]
   s.rubyforge_project = %q{seasons}
-  s.rubygems_version = %q{0.9.3.beta8}
+  s.rubygems_version = %q{0.9.3.beta9}
   s.summary = %q{The Compass variant of the Seasons framework to style Treesaver.}
   s.add_dependency(%q<compass>, ["~> 0.11"])
 end

data/stylesheets/seasons/_core.sass

@@ -7,8 +7,8 @@
 $base-size: 16px !default
 $size: 1em !default
 $line-height: 1.2em !default
-$module-w: 280px !default
-$module-h: 280px !default
+$module-w: 84px !default
+$module-h: 84px !default
 $gutter: 14px !default
 // grid margins:
 $margin: 20px !default
@@ -17,57 +17,74 @@ $bottom: 20px !default
 $columns: 12 !default
 $text-column-span: 3 !default
 
+$consistant-page-width: false !default
 
 $row-prefix: r !default
 $column-prefix: c !default
 $width-prefix: w !default
 $height-prefix: h !default
 $ratio-prefix: r !default
+$scale: 1
 
-// IMAGE + PAGE RATIOS
 =ratio($width, $height, $cols: $columns)
   @for $i from 1 through $cols
     .#{$ratio-prefix+$width}x#{$height}.#{$width-prefix+$i}, .container.#{$width-prefix+$i} [ratio="#{$width}x#{$height}"] img // Grid ratio, figure ratio.
-      width: grid($i) // Width spans all columns
-      height: round(grid($i) * ( $height / $width )) // Height is the proportion of the width.
-
-+ratios // Run the code above. Ratios are defined in _config.sass
-
-// GRID MEASURMENTS
-@for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . .
-  .#{$column-prefix+$i}
-    margin-left: grid($i) - $module-w
-@for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
-  .#{$width-prefix+$i}
-    width: grid($i)
-
-// Vertical grid
-$vertical-grid: false !default
-$rows: 10 !default
-@if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary.
-  @for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . .
-    .#{$row-prefix+$i}
-      position: absolute
-      top: (grid($i, $module-h) - $module-h) + $top
-  @for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
-    .#{$height-prefix+$i}
-      height: grid($i, $module-h)
-
-// Lightbox sizes
-.lightbox .container
-  &[class*="single"]
-    width: grid($text-column-span)
-  &[class*="double"]
-    width: grid($text-column-span * 2)
-  &[class*="triple"]
-    width: grid($text-column-span * 3)
-  &[class*="quad"]
-    width: grid($text-column-span * 4)
-
-// COLUMN WIDTHS
-.column
-  width: grid($text-column-span)
-  @include type($size, $line-height)
+      width: grid($i) * $scale // Width spans all columns
+      height: round(grid($i) * ( $height / $width )) * $scale // Height is the proportion of the width.
+
+=build-grid
+  // IMAGE + PAGE RATIOS
+  
+  +ratios // Run the code above. Ratios are defined in _config.sass
+  
+  // GRID MEASURMENTS
+  @for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . .
+    .#{$column-prefix+$i}
+      margin-left: (grid($i) - $module-w) * $scale
+  @for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
+    .#{$width-prefix+$i}
+      width: grid($i) * $scale
+  
+  // Force consistant page widths
+  @if $consistant-page-width
+    $i: $columns - $text-column-span
+    @while $i > 0
+      .#{$width-prefix+$i}.grid:not(.fixed):not(.sizetocontainer)
+        max-width: grid($i + $text-column-span) * $scale
+      $i: $i - $text-column-span
+  
+  // Vertical grid
+  $vertical-grid: false !default
+  $rows: 10 !default
+  @if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary.
+    @for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . .
+      .#{$row-prefix+$i}
+        position: absolute
+        top: ((grid($i, $module-h) - $module-h) + $top) * $scale
+    @for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
+      .#{$height-prefix+$i}
+        height: grid($i, $module-h) * $scale
+  
+  // Lightbox sizes
+  .lightbox .container
+    &[class*="single"]
+      width: grid($text-column-span) * $scale
+    &[class*="double"]
+      width: grid($text-column-span * 2) * $scale
+    &[class*="triple"]
+      width: grid($text-column-span * 3) * $scale
+    &[class*="quad"]
+      width: grid($text-column-span * 4) * $scale
+    img
+      width: 100%
+      height: auto
+  
+  // COLUMN WIDTHS
+  .column
+    width: grid($text-column-span) * $scale
+    @include type($size, $line-height)
+
++build-grid
 
 // GRID+FIGURE MEASUREMENTS
 .grid
@@ -147,11 +164,13 @@ $scroll-support: true !default
     width: 3px
 
 // TYPOGRAPHY RESET
-html, body
+html
   +type($base-size, $line-height)
   font-family: $font
   color: $text
   background-color: $body
+
+html, body
   overflow: hidden
 
 // Make sure headlines look good and always fit

data/stylesheets/seasons/plugin/_ad.sass

@@ -0,0 +1,7 @@
+// Standardizes grid sizes so if a 3rd party is making an ad they know what it's going to look like.
+
+@for $i from 1 through 12 // loop defines widths. w1, w2, w3 . . .
+  .ad.grid.#{w+$i}
+    width: (100px * $i)
+
+$seasons-ad-loaded: true

data/stylesheets/seasons/plugin/_ipad.sass

@@ -0,0 +1,44 @@
+// IPAD PIXEL-PERFECT STYLES
+// These styles allow you to create iPad specific grids.
+// To use create a new set of grids with the class "fixed ipad" followed by either "vertical" or "horizontal"
+
+// Margins will be over-written.
+// Recommended column and gutter widths are 95px and 16px
+
+// default columns per grid
+$ipad-horizontal-columns: 9 !default
+$ipad-vertical-columns: 6 !default
+
+// Make sure iPad grids don't show up for desktop users.
+.grid.ipad
+  +remove
+  margin: 0
+  +border-radius(0)
+  +box-shadow(none)
+  border: none
+
+// Force sizing and remove standard desktop grids.
+.os-ipad
+  .grid
+    +remove
+    opacity: 1 !important
+  .grid.fixed
+    &.ipad.horizontal
+      height: 644px
+      width: grid($ipad-horizontal-columns)
+      min-width: grid($ipad-horizontal-columns)
+      padding: 0 ((1024px - (grid($ipad-horizontal-columns))) / 2)
+    &.ipad.vertical
+      height: 900px
+      width: grid($ipad-vertical-columns)
+      min-width: grid($ipad-vertical-columns)
+      padding: 0 ((768px - (grid($ipad-vertical-columns))) / 2)
+
+.os-ipad.fullscreen
+  .grid.fixed
+    &.ipad.horizontal
+      height: 748px
+    &.ipad.vertical
+      height: 1004px
+
+$seasons-ipad-loaded: true

data/stylesheets/seasons/plugin/_mobile.sass

@@ -0,0 +1,85 @@
+// MOBILE STYLES
+// These styles allow you to create smartphone specific grids.
+// To use create a new set of grids with the class "mobile"
+// all width measurements will be overwritten by these styles.
+
+// Suggested cover width
+$cover_width: 250px
+
+// Remove mobile grids for desktop users
+.mobile.grid
+  +remove
+  margin: 0
+  +border-radius(0)
+  +box-shadow(none)
+  border: none
+
+// All the mobile grid styles here.
+.smallscreen.mobile
+  .viewer
+    padding: 0
+    margin: 0
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+    background: $page
+  .grid:not(.fixed)
+    +remove
+  .mobile.grid
+    opacity: 1 !important
+    margin: 0
+    width: 280px
+    min-width: 280px
+    padding: 20px
+  .column, .container
+    width: 280px
+    min-width: 280px
+
+
+// SHRINK IMAGES + PAGES
+=ratio($width, $height, $cols: $columns)
+  // Force resize images
+  .mobile.grid .container [ratio="#{$width}x#{$height}"] img
+    width: 280px
+    height: 280px * ( $height / $width )
+
+// Pull in the ratios defined in the skin
++ratios
+
+// MOBILE COVERS
+// If you grid is named "cover" it will be resized to be optimized for mobile devices.
+.smallscreen.mobile
+  // Large mobile cover
+  .cover.fixed.w3col.grid, .cover.fixed.w3col.grid *
+    margin: 0
+    padding: 0
+    width: $cover_width
+    height: $cover_width * ( 4 / 3 )
+    min-width: $cover_width
+    min-height: $cover_width * ( 4 / 3 )
+    .img
+      top: 0
+  // Small mobile cover
+  .cover.fixed.w2col.grid, .cover.fixed.w2col.grid *
+    margin: 0
+    padding: 0
+    width: $cover_width/2
+    height: $cover_width/2 * ( 4 / 3 )
+    min-width: $cover_width/2
+    min-height: $cover_width/2 * ( 4 / 3 )
+    .img
+      top: 0
+  .cover.grid
+    margin: 0 ( ( $cover_width - 320px ) / 8 )
+  .fixed.grid, .sizetocontainer.grid
+    max-width: none
+    max-height: none
+    min-width: none
+    min-height: none
+  // FALLBACK IMAGES
+  .mobile.grid .keeptogether.fallback img
+    width: 40px
+    height: 40px
+
+$seasons-mobile-loaded: true

data/stylesheets/seasons/plugin/_no-treesaver.sass

@@ -0,0 +1,74 @@
+// SUPPORT FOR NON-TREESAVER PAGES
+
+// Hide no-treesaver elements unless they are in a placed figure
+html.treesaver
+  .no-treesaver
+    display: none
+  .container, .fallback
+    .no-treesaver
+      display: block
+  
+// No-treesaver styles
+html.no-treesaver
+  overflow: auto
+  overflow-y: scroll
+  body
+    width: 100%
+    max-width: grid(9)
+    margin: 0 auto
+    overflow: visible
+    background: $page
+  #header, #content, #footer
+    padding: $line-height $margin
+  #header
+    h1
+      +solid($line-height)
+      margin-bottom: ms(-2)
+  .nav
+    ol, ul
+      list-style: none
+      margin: 0 (-$margin)
+      padding: 0 $margin
+    li
+      display: inline
+      position: relative
+      // SUCKERFISH MENUS
+      ol, ul
+        z-index: 1
+        display: none
+        position: absolute
+        top: 100%
+        left: 0
+        margin: 0
+        padding: 0
+      li
+        width: auto
+        display: block
+        a
+          display: block
+      &:hover ol, ul
+        display: block
+  #content
+    div, iframe, object
+      display: none
+      &.no-treesaver
+        overflow: visible
+        display: block
+        float: right
+        padding-left: 1em
+        width: 100%
+        max-width: grid(6)
+        div
+          display: block
+        img, iframe, video
+          width: 100%
+          height: auto
+  #footer
+    clear: both
+    padding-bottom: 0
+    .nav li
+      ol, ul
+        top: auto
+        bottom: 100%
+
+$seasons-no-treesaver-loaded: true

data/stylesheets/seasons/plugin/_tablet-7-normalize.sass

@@ -0,0 +1,18 @@
+// Normalize 7" tablets.
+
+// Default is halfway between both resolutions. I find the default 3/2 on the tab to be too much.
+$tab7-virtual-resolution: (6/5) !default
+
+@if unit($module-w) != "em"
+  @warn "Your grid MUST be based on ems to scale to 7 inch tablets."
+@else
+  // Standard 7" 1024x600 tablet
+  @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait)
+    html
+      font-size: $base-size * $tab7-virtual-resolution
+  // 1024x600 tablet with virtual resolution (Original Galaxy Tab)
+  @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait)
+    html
+      font-size: $base-size * (2/3) * $tab7-virtual-resolution
+
+$seasons-tablet-7-normalize-loaded: true

data/stylesheets/seasons/plugin/_tablet-7-template.sass

@@ -0,0 +1,47 @@
+// PIXEL-PERFECT TEMPLATES FOR 7" TABLETS.
+// These styles allow you to create specific grids for 7" tablets.
+// To use create a new set of grids with the class "seven" followed by either "vertical" or "horizontal"
+
+// Margins and column widths will be over-written.
+
+$seasons-tablet-7-normalize-loaded: false !default
+$tablet-7-margin: $margin !default
+
+// Resize images
+=ratio($width, $height, $cols: $columns)
+  // Force resize images
+  .seven.grid .container [ratio="#{$width}x#{$height}"] img
+    width: 600 / ( $base-size * $tab7-virtual-resolution / 1px ) - $tablet-7-margin * 2
+    height: ( 600 / ( $base-size * $tab7-virtual-resolution / 1px ) - $tablet-7-margin * 2 ) * ( $height / $width )
+
+@if $seasons-tablet-7-normalize-loaded
+  // Make sure seven grids don't show up for desktop users.
+  .grid.seven
+    +remove
+    margin: 0
+    +border-radius(0)
+    +box-shadow(none)
+    border: none
+  
+  @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait)
+    html.touch
+      background-color: $page
+      // Force sizing and remove standard desktop grids.
+      .grid:not(.fixed):not(.sizetocontainer):not(.seven)
+        +remove
+      .grid
+        opacity: 1 !important
+      .column, .container
+        width: 600 / ( $base-size * $tab7-virtual-resolution / 1px ) - $tablet-7-margin * 2
+      .grid.seven
+        width: 600 / ( $base-size * $tab7-virtual-resolution / 1px ) - $tablet-7-margin * 2
+        min-width: 600 / ( $base-size * $tab7-virtual-resolution / 1px ) - $tablet-7-margin * 2
+        margin: 0
+        padding: 0 $margin
+      
+      // Pull in the ratios defined in the skin
+      +ratios
+@else
+  @warn "Make sure tablet-7-normalize is loaded before loading tablet-7-templates."
+
+$seasons-tablet-7-template-loaded: true

data/templates/project/sample-ad.html

@@ -40,6 +40,19 @@
   line-height: 1em;
   font-family: Helvetica, sans-serif;
 }
+
+html.treesaver #ad-id {
+  /* Styles while inside Treesaver */
+}
+
+html.no-treesaver #ad-id {
+  /* Styles when directly linked to (not treesaver) */
+}
+
+.grid.w3 #ad-id {
+  /*  */
+}
+
 </style>
   <h1>AD<span style="display: block;">space</span></h1>
 </div>

data/templates/project/style.sass

@@ -30,6 +30,8 @@ $reset: true // set to false if you don’t want the bundled reset
 
 // PLUGINS:
 @import seasons/plugin/ad
-//@import seasons/plugin/ios-perfect
 //@import seasons/plugin/mobile
+//@import seasons/plugin/ipad
+@import seasons/plugin/tablet-7-normalize
+//@import seasons/plugin/tablet-7-template
 //@import seasons/plugin/no-treesaver

metadata

@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
   - 0
   - 9
   - 3
-  - beta8
-  version: 0.9.3.beta8
+  - beta9
+  version: 0.9.3.beta9
 platform: ruby
 authors: 
 - Scott Kellum
@@ -51,6 +51,12 @@ files:
 - stylesheets/seasons/tools/_modular-scale.sass
 - stylesheets/seasons/tools/_color-schemer.sass
 - stylesheets/seasons/tools/_reset.sass
+- stylesheets/seasons/plugin/_ad.sass
+- stylesheets/seasons/plugin/_ipad.sass
+- stylesheets/seasons/plugin/_mobile.sass
+- stylesheets/seasons/plugin/_no-treesaver.sass
+- stylesheets/seasons/plugin/_tablet-7-normalize.sass
+- stylesheets/seasons/plugin/_tablet-7-template.sass
 - templates/project/_chrome.scss
 - templates/project/_config.sass
 - templates/project/_pages.scss