compass-treesaver-plugin 0.3.1

data/compass-treesaver-plugin.gemspec

@@ -0,0 +1,38 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{compass-treesaver-plugin}
+  s.version = "0.3.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Andrea Campi"]
+  s.date = %q{2011-03-18}
+  s.description = %q{A Compass plugin to provide basic styles for treesaver.js.}
+  s.email = %w{andrea.campi@zephirworks.com}
+  s.has_rdoc = false
+  s.files = [
+    "compass-treesaver-plugin.gemspec",
+    "lib/compass-treesaver-plugin.rb",
+    "stylesheets/_treesaver.scss",
+    "stylesheets/treesaver/_basic.scss",
+    "stylesheets/treesaver/_chrome.scss",
+    "stylesheets/treesaver/_config.scss",
+    "stylesheets/treesaver/_grid.scss",
+    "stylesheets/treesaver/_layout.scss",
+    "stylesheets/treesaver/_reset.scss",
+    "stylesheets/treesaver/basic/_base.scss",
+    "stylesheets/treesaver/chrome/_base.scss",
+    "stylesheets/treesaver/chrome/_controls.scss",
+    "stylesheets/treesaver/chrome/_viewer.scss",
+    "stylesheets/treesaver/grid/_base.scss",
+    "stylesheets/treesaver/layout/_base.scss",
+    "templates/project/_compass_treesaver.scss",
+    "templates/project/manifest.rb"
+  ]
+  s.homepage = %q{http://zephirworks.com/}
+  s.require_paths = ["lib"]
+  s.rubyforge_project = %q{compass-treesaver-plugin}
+  s.rubygems_version = %q{1.3.6}
+  s.summary = %q{Compass stylesheets for treesaver.js.}
+  s.add_dependency(%q<compass>, ["~> 0.11"])
+end

data/lib/compass-treesaver-plugin.rb

@@ -0,0 +1,3 @@
+require 'compass'
+
+Compass::Frameworks.register("treesaver", :path => File.expand_path("..", File.dirname(__FILE__)))

data/stylesheets/_treesaver.scss

@@ -0,0 +1,6 @@
+@import "treesaver/config";
+@import "treesaver/reset";
+@import "treesaver/basic";
+@import "treesaver/chrome";
+@import "treesaver/grid";
+@import "treesaver/layout";

data/stylesheets/treesaver/_basic.scss

@@ -0,0 +1,26 @@
+/*
+ * Basic module:
+ *
+ * Basic styling for the whole "site".
+ *
+ * These macros provide basic styling: setting `overflow: hidden` on the `body` and
+ * Treesaver containers, establishing a `line-height` grid and so on. They are
+ * automatically included when the plugin is loaded.
+ */
+
+@import "treesaver/config";
+@import "treesaver/basic/base";
+
+@mixin treesaver-basic-setup {
+  @include -treesaver-basic-setup;
+  @include -treesaver-basic-setup-group;
+  @include -treesaver-basic-error-and-loading;
+
+  // FIXME
+  .fill {
+    left: 0;
+    top: 0;
+  }
+}
+
+@include treesaver-basic-setup;

data/stylesheets/treesaver/_chrome.scss

@@ -0,0 +1,43 @@
+/*
+ * Chrome module:
+ *
+ * These macros aid in setting up chromes.
+ */
+
+@import "treesaver/config";
+@import "treesaver/chrome/base";
+@import "treesaver/chrome/viewer";
+@import "treesaver/chrome/controls";
+
+/*
+ * Sets up the "viewer" to take up the whole screen. Use it when you don't want
+ * a controls bar, perhaps because you are using a native shell to provide
+ * navigation.
+ */
+@mixin treesaver-chrome-viewer {
+  @include -treesaver-chrome-viewer(0);
+}
+
+/*
+ * Sets up a controls bar at the top of the screen, with the provided height
+ * (30px by default), with the viewer taking up the remaining height.
+ * Minimal styling is provided for the controls, aligning `left` and `right`
+ * buttons to their respective sides.
+ */
+@mixin treesaver-chrome-viewer-with-top-controls($controls-height: 30px) {
+  @include -treesaver-chrome-viewer($controls-height, "top");
+  @include -treesaver-chrome-controls($controls-height, "top");
+}
+
+/*
+ * Sets up a controls bar at the bottom of the screen, with the provided height
+ * (30px by default), with the viewer taking up the remaining height.
+ * Minimal styling is provided for the controls, aligning `left` and `right`
+ * buttons to their respective sides.
+ */
+@mixin treesaver-chrome-viewer-with-bottom-controls($controls-height: 30px) {
+  @include -treesaver-chrome-viewer($controls-height);
+  @include -treesaver-chrome-controls($controls-height);
+}
+
+@include -treesaver-chrome-size;

data/stylesheets/treesaver/_config.scss

@@ -0,0 +1,17 @@
+//
+// Basic module
+//
+
+$treesaver-line-height: 24px !default;            // Vertical grid
+
+//
+// Chrome module
+//
+
+$treesaver-chrome-maximum-smallscreen-width: 480px !default; // Any device wider
+  // than this will use "normal" grids, anything smaller will use "small" chromes.
+
+//
+// Grid module
+//
+$treesaver-grid-smallscreen-width: 300px !default;

data/stylesheets/treesaver/_grid.scss

@@ -0,0 +1,18 @@
+/*
+ * Grid module:
+ *
+ * This set of macros takes care of the minimal styles necessary to set up
+ * grids of different sizes, while retaining control over their use on big- and
+ * small-screen devices. They are automatically called when the plugin is loaded.
+ */
+
+@import "treesaver/config";
+@import "grid/base";
+
+@mixin treesaver-grid-default {
+  @include -treesaver-grid-base;
+  @include -treesaver-grid-support-smallscreen-mobile;
+  @include -treesaver-grid-fixed;
+}
+
+@include treesaver-grid-default;

data/stylesheets/treesaver/_layout.scss

@@ -0,0 +1,26 @@
+/*
+ * Layout module:
+ *
+ * NOTE: these macros are experimental, they may change or be removed in a future
+ * release. The mix of "full" and "half" widths is also very confusing.
+ */
+
+@import "layout/base";
+
+//
+// TODO document
+//
+@mixin treesaver-layout-setup($width, $margin, $steps) {
+  .grid {
+    width: $width;
+  }
+
+  .column, .container {
+    width: $width;
+    top: 0;
+    bottom: 0;
+  }
+
+  @include -treesaver-layout-column-widths($steps, $width, $margin);
+  @include -treesaver-layout-columns($steps, $width, $margin);
+}

data/stylesheets/treesaver/_reset.scss

@@ -0,0 +1,9 @@
+@import "compass/reset/utilities";
+
+html, body, h1, h2, h3, h4, h5, h6 {
+  @include reset-box-model;
+}
+
+p {
+  margin: 0;
+}

data/stylesheets/treesaver/basic/_base.scss

@@ -0,0 +1,58 @@
+//
+// Basic styling for the whole "site"; they are pretty much mandatory.
+//
+@mixin -treesaver-basic-setup {
+  .treesaver {
+    body {
+      overflow: hidden;
+    }
+  }
+
+  .chrome, .viewer, .grid, .column, .container {
+    position: absolute;
+    overflow: hidden;
+    line-height: $treesaver-line-height;
+  }
+
+  div, p, button {
+    line-height: $treesaver-line-height;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    line-height: $treesaver-line-height;
+  }
+
+  .hidden, .microdata {
+    display: none !important;
+  }
+}
+
+// XXX is this really generic?
+@mixin -treesaver-basic-setup-group {
+  .group {
+    top: 0;
+    bottom: 0;
+    padding: 0;
+    position: absolute;
+  }
+}
+
+//
+// Basic styling for the error and loading floats.
+// This may be stretching our goal of "structure, not presentation", but
+// without them the loader would be just too damn ugly.
+//
+// XXX replace magic values
+//
+@mixin -treesaver-basic-error-and-loading {
+  .error, .loading {
+    position: absolute;
+    width: 160px;
+    height: 100px;
+    letter-spacing: 2px;
+    margin: 0 0 0 20px;
+    img {
+      display: inline;
+    }
+  }
+}

data/stylesheets/treesaver/chrome/_base.scss

@@ -0,0 +1,14 @@
+//
+// Generates styles that make sure that "normal" chromes are only used on
+// devices bigger than the given width (480px by default), and small chromes
+// are used on smaller devices.
+//
+@mixin -treesaver-chrome-size {
+  .chrome {
+    min-width: $treesaver-chrome-maximum-smallscreen-width;
+    &.small {
+      min-width: 0;
+      max-width: $treesaver-chrome-maximum-smallscreen-width;
+    }
+  }
+}

data/stylesheets/treesaver/chrome/_controls.scss

@@ -0,0 +1,40 @@
+@mixin -treesaver-chrome-controls-top-or-bottom($side) {
+  @if $side == "top" { top: 0; }
+  @if $side == "bottom" { bottom: 0; }
+}
+
+//
+// A basic controls bar, anchored to either to bottom or top edges of the
+// viewspace. Use it in conjunction with -treesaver-chrome-viewer to ensure
+// viewer and controls will not overlap.
+//
+@mixin -treesaver-chrome-controls($height, $side: "bottom") {
+  .controls {
+    position: absolute;
+    @include -treesaver-chrome-controls-top-or-bottom($side);
+    left: 0;
+    right: 0;
+    height: $height;
+    line-height: $height;
+
+    .prev, .next {
+      border: none;
+      margin: 0;
+      padding: 0;
+
+      &:disabled {
+        display: none;
+      }
+    }
+
+    .prev {
+      position: absolute;
+      left: 0;
+    }
+
+    .next {
+      position: absolute;
+      right: 0;
+    }
+  }
+}

data/stylesheets/treesaver/chrome/_viewer.scss

@@ -0,0 +1,17 @@
+@mixin -treesaver-chrome-viewer-top-and-bottom($height, $side) {
+  @if $side == "top" { top: $height; bottom: 0; }
+  @if $side == "bottom" { top: 0; bottom: $height; }
+}
+
+//
+// The main viewer area, set up to fill the whole viewport. You can optionally
+// ask it to reserve some space either at the top or the bottom, mostly for
+// use in conjunction with -treesaver-chrome-controls.
+//
+@mixin -treesaver-chrome-viewer($height, $side: "bottom") {
+  .viewer {
+    @include -treesaver-chrome-viewer-top-and-bottom($height, $side);
+    left: 0;
+    right: 0;
+  }
+}

data/stylesheets/treesaver/grid/_base.scss

@@ -0,0 +1,48 @@
+@mixin -treesaver-grid-hide {
+  min-width: 9001px;
+  width: 9001px;
+}
+
+// XXX slightly magical, do not change
+@mixin -treesaver-grid-base {
+  .grid {
+    top: 50%;
+    z-index: 1;
+  }
+}
+
+//
+// Ensure mobile grids cannot be used by mistake on big screens, and that
+// small-screen mobile devices can only used grids marked for mobiles.
+// Note that you still have to add size-specific classes to specify grid sizes.
+//
+@mixin -treesaver-grid-support-smallscreen-mobile {
+  .grid.mobile {
+    @include -treesaver-grid-hide;
+  }
+
+  .smallscreen.mobile .grid {
+    @include -treesaver-grid-hide;
+
+    &.mobile {
+      width: $treesaver-grid-smallscreen-width;
+      min-width: $treesaver-grid-smallscreen-width;
+    }
+  }
+}
+
+//
+// A fixed grid has exact sizes and has no padding.
+// You will need to specify the size with other classes.
+//
+// FIXME .fixed vs .full vs other?
+//
+@mixin -treesaver-grid-fixed {
+  .grid.fixed {
+    max-width: none;
+    max-height: none;
+    min-width: none;
+    min-height: none;
+    padding: 0;
+  }
+}

data/stylesheets/treesaver/layout/_base.scss

@@ -0,0 +1,15 @@
+@mixin -treesaver-layout-column-widths($colgroups, $width, $margin) {
+  @for $n from 1 through $colgroups {
+    .cols-#{$n} {
+      width: ($n - 1) * ($width + $margin) + $width;
+    }
+  }
+}
+
+@mixin -treesaver-layout-columns($cols, $width, $margin) {
+  @for $n from 1 through $cols {
+    .col-#{$n} {
+      margin-left: ($n - 1) * ($width + $margin);
+    }
+  }
+}

data/templates/project/_compass_treesaver.scss

@@ -0,0 +1 @@
+@import "treesaver";

data/templates/project/manifest.rb

@@ -0,0 +1 @@
+stylesheet '_compass_treesaver.scss', :media => 'screen'

metadata

@@ -0,0 +1,83 @@
+--- !ruby/object:Gem::Specification 
+name: compass-treesaver-plugin
+version: !ruby/object:Gem::Version 
+  prerelease: 
+  version: 0.3.1
+platform: ruby
+authors: 
+- Andrea Campi
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-03-18 00:00:00 +01:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+description: A Compass plugin to provide basic styles for treesaver.js.
+email: 
+- andrea.campi@zephirworks.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- compass-treesaver-plugin.gemspec
+- lib/compass-treesaver-plugin.rb
+- stylesheets/_treesaver.scss
+- stylesheets/treesaver/_basic.scss
+- stylesheets/treesaver/_chrome.scss
+- stylesheets/treesaver/_config.scss
+- stylesheets/treesaver/_grid.scss
+- stylesheets/treesaver/_layout.scss
+- stylesheets/treesaver/_reset.scss
+- stylesheets/treesaver/basic/_base.scss
+- stylesheets/treesaver/chrome/_base.scss
+- stylesheets/treesaver/chrome/_controls.scss
+- stylesheets/treesaver/chrome/_viewer.scss
+- stylesheets/treesaver/grid/_base.scss
+- stylesheets/treesaver/layout/_base.scss
+- templates/project/_compass_treesaver.scss
+- templates/project/manifest.rb
+has_rdoc: true
+homepage: http://zephirworks.com/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: 1.3.5
+requirements: []
+
+rubyforge_project: compass-treesaver-plugin
+rubygems_version: 1.5.2
+signing_key: 
+specification_version: 3
+summary: Compass stylesheets for treesaver.js.
+test_files: []
+