css-lightbox 0.2.0

data/README.mkdn

@@ -0,0 +1,81 @@
+Compass CSS Lightbox
+====================
+
+CSS-only lightboxes that work in Everything But IE. Degrades gracefully, with
+no effect on IE at all, so you can set fallback styles there and/or bootstrap it
+with Javascript.
+
+Installation
+============
+
+From the command line:
+
+    sudo gem install css-lightbox
+
+Add to a project (rails: compass.config, other: config.rb):
+
+    require 'css-lightbox'
+    
+Or create a new project:
+
+    compass -r css-lightbox -f css-lightbox project_directory
+
+
+Lightboxes
+==========
+
+Your HTML:
+    
+    <div id="content">
+      <!-- all your normal page content, with links to lightboxes: -->
+      <a href="#about-us">a link to the about-us lightbox</a>
+    </div>
+
+    <div id="lightboxes">
+      
+      <!-- start lightbox -->
+      <aside id="about-us">
+        <div>
+          <!-- Your Lightbox Content -->
+          <a href="#" title="close the about lightbox">close</a>
+        </div>
+      </aside>
+      <!-- end lightbox... repeat as needed... -->
+      
+    </div>
+
+The important part is that you have:
+
+* elements with an ID linked from the content (the `aside` above)
+* an inner element in each that will act as the box itself (the `div` above)
+* a link to `#` from each box, to close it
+
+Your Scss:
+    
+    // override these if you want
+    //
+    // // set to "true" for CSS3 transform fade-in/out
+    // // - bug in Chrome allows you to see fade-out on-load
+    // !lightbox-fade      ||= "false"
+    //
+    // // set to your box element
+    // // or false to set the box styles on your own (see below)
+    // !lightbox-box       ||= "> div"
+
+    // import lightboxes
+    @import "css-lightbox";
+
+    // make it happen (assuming lightbox.html markup)
+    #lightboxes aside {
+      @include css-lightbox;
+
+      // add styles for IE
+      // properties: values
+
+      // override box styles
+      // &:not(:target), &:target
+      //   > div
+      //     properties: values
+
+    }
+    

data/lib/css-lightbox.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("css-lightbox", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_css-lightbox.scss

@@ -0,0 +1,27 @@
+// CSS-only Lightboxes
+// Plugin by Eric Meyer - http://www.oddbird.net/
+// Based on the work of Jenna Smith - http://growldesign.co.uk/
+
+// CSS-only lightboxes that work in Everything But IE. Degrades gracefully, with
+// no effect on IE at all, so you can set fallback styles there or bootstrap it
+// with Javascript. Probably both.
+
+// Set this to "true" to turn on CSS transitions
+// - causes Chrome to show fade-out on-load
+$lightbox-fade: false !default;
+
+// override to set your own box styles as follows:
+// FOR EXAMPLE:
+//
+// #lightboxes aside
+//   +css-lightbox
+//
+//   &:not(:target), &:target
+//     > div
+//       /* styles for your box element
+
+//
+$lightbox-box: "> div" !default;
+
+// import lightboxes
+@import "css-lightbox/lightbox";

data/stylesheets/css-lightbox/_lightbox.scss

@@ -0,0 +1,36 @@
+// apply this to the container elements of each lightbox
+@mixin css-lightbox($fade: $lightbox-fade, $style: $lightbox-box) {
+  &:not(:target), &:target {
+    @include reset-box-model;
+    @include reset-font;
+    display: block;
+    z-index: -1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    @include transparent;
+    @if $fade {
+      @include transition(unquote("opacity, z-index")); 
+    }
+    @if $style {
+      #{$style} {
+        margin: 3em auto;
+        padding: 1.5em;
+        width: 32em;
+        border: 1em solid;
+        background: white;
+        text-align: left;
+        @include box-shadow(rgba(0, 0, 0, 0.9), 0, 0, 1em); 
+      } 
+    } 
+  }
+  
+  &:target {
+    z-index: 999;
+    @include opaque;
+    @if $fade {
+      @include transition(unquote("opacity, z-index")); 
+    } 
+  } 
+}

data/templates/project/_lightbox.scss

@@ -0,0 +1,31 @@
+// CSS LIGHTBOXES
+// CSS-only lightboxes that work in Everything But IE. Degrades gracefully, with
+// no effect on IE at all, so you can set fallback styles there or bootstrap it
+// with Javascript. Probably both.
+
+// override these if you want
+//
+// // set to "true" for CSS3 transform fade-in/out
+// // - bug in Chrome allows you to see fade-out on-load
+// !lightbox-fade      ||= "false"
+//
+// // set to your box element
+// // or false to set the box styles on your own (see below)
+// !lightbox-box       ||= "> div"
+
+// import lightboxes
+@import "css-lightbox";
+
+// make it happen (assuming lightbox.html markup)
+#lightboxes aside {
+  @include css-lightbox;
+  
+  // add styles for IE
+  // properties: values
+  
+  // override box styles
+  // &:not(:target), &:target
+  //   > div
+  //     properties: values
+  
+}

data/templates/project/lightbox.html

@@ -0,0 +1,18 @@
+<div id="content">
+  <!-- all your normal page content, with links to lightboxes: -->
+  <a href="#about-us">a link to the about-us lightbox</a>
+</div>
+
+<div id="lightboxes">
+  
+  <!-- start lightbox -->
+  <!-- You need this structure, but can use whatever tags/classes/IDs you like-->
+  <aside id="about-us">
+    <div>
+      <!-- Your Lightbox Content -->
+      <a href="#" title="close the about lightbox">close</a>
+    </div>
+  </aside>
+  <!-- end lightbox... repeat as needed... -->
+  
+</div>

data/templates/project/manifest.rb

@@ -0,0 +1,16 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet '_lightbox.scss', :media => 'screen, projection'
+html 'lightbox.html'
+
+description "css-only lightboxes"
+
+help %Q{
+Installs some html and a stylesheet that you can use directly
+or refer to as an example.
+}
+
+welcome_message %Q{
+Please refer to the lightbox.html file to see how the markup should be structured.
+And to the lightbox stylesheet partial to see how to use the library and apply it to your markup.
+}
+

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification 
+name: css-lightbox
+version: !ruby/object:Gem::Version 
+  prerelease: false
+  segments: 
+  - 0
+  - 2
+  - 0
+  version: 0.2.0
+platform: ruby
+authors: 
+- Eric Meyer
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2010-04-20 00:00:00 -06:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        - 10
+        - 0
+        - rc3
+        version: 0.10.0.rc3
+  type: :runtime
+  version_requirements: *id001
+description: a css-only lightbox implementation for compass
+email: eric@oddbird.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.mkdn
+- lib/css-lightbox.rb
+- stylesheets/_css-lightbox.scss
+- stylesheets/css-lightbox/_lightbox.scss
+- templates/project/_lightbox.scss
+- templates/project/lightbox.html
+- templates/project/manifest.rb
+has_rdoc: true
+homepage: http://www.oddbird.net/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.6
+signing_key: 
+specification_version: 3
+summary: a css-only lightbox implementation for compass
+test_files: []
+