css-slideshow 0.2.0 → 0.3.beta.1

data/README.mkdn

@@ -14,10 +14,14 @@ From the command line:
 
     sudo gem install css-slideshow
 
-Add to a project (rails: compass.config, other: config.rb):
-
+Add to a project:
+    
+    // rails: compass.config, other: config.rb
     require 'css-slideshow'
     
+    // command line
+    compass install css-slideshow
+    
 Or create a new project:
 
     compass -r css-slideshow -f css-slideshow project_directory
@@ -26,81 +30,63 @@ Or create a new project:
 Slideshows
 ==========
 
-Your HTML:
-    
-    <div class="slideshow">
-      <div class="slides">
-        <ul>
-        
-          <!-- start slide 1 -->
-          <li id="slide-title-1">
-            <!-- slide content can be anything you like -->
-            <div class="content">
-              <h2>Slide one</h2>
-              <p><a href="#slide-title-2">NEXT</a></p>
-              <p>
-                Decima eodem modo typi qui nunc nobis videntur fiant sollemnes 
-                in. Quam nunc putamus parum claram anteposuerit litterarum 
-                formas humanitatis per seacula quarta decima et quinta! 
-                Eleifend option congue.
-              </p>
-            </div>
-          </li>
-          <!-- end slide 1 -->
-          
-          <!-- start slide 2 -->
-          <li id="slide-title-2">  
-            <!-- slide content can be anything you like -->
-            <div class="content">        
-              <h2>Slide Two</h2>
-              <p><a href="#slide-title-1">PREV</a></p>
-              <p>
-                Dynamicus qui sequitur mutationem consuetudium; est notare quam 
-                littera? Decima eodem modo typi qui nunc nobis videntur parum 
-                clari fiant sollemnes in. Diam nonummy nibh euismod tincidunt ut 
-                laoreet dolore.
-              </p>
-            </di>
-          </li>
-          <!-- end slide 2 -->
-          
-        </ul>
+The CSS-Slideshow works with a combination of internal links, overflow and 
+floats.
+
+Each slideshow contains three important elements:
+
+    - Container
+        - Carousel
+            - Slide(s)
+
+You can write the HTML to your liking, but here is one example:
+
+    <section class="slideshow"><!-- container -->
+      <div><!-- carousel -->
+
+        <article id="slide1">  <!-- slide (repeat as needed) -->
+          <!-- slide content -->
+        </article>
+
       </div>
+    </section>
 
-Everything inside the list-item slides is optional. Your slide navigation can
-be anything from next/previous links (as above) to tabs. all that matters is 
-that they link to the slide IDs.
+To go to a slide, all you need is a link from somewhere else on the page
+that points at that specific slide ID:
 
-You can change the class of the slide container (.slideshow, .slides) elemtents given:
+    <a href="#slide1">a link to the first slide</a>
 
-* all the elements still exist 
-* you override the needed variables in your `_slideshow.sass`
+There's only one mixin that you need, and you apply it to your container: 
 
-Your Scss:
-    
-    // Override with the proper class names for your slide/slide-nav containers
-    $slide_container: ".slides";
-    $max_slides: 10;
+    .slideshow {
+      @include slideshow;
+    }
+
+`slideshow` takes three optional arguments, each with a default that you can 
+override globaly for your project.
 
-    // import lightboxes
-    @import css-slideshow
+* The first argument is a selector for the carousel relative to the container. 
+  It defaults to `"> div"`. 
+* The second is a selector for the slides relative to the carousel. This 
+  defaults to `"> article"`.
+* The third is the maximum number of slides that a given slideshow needs to 
+  support. It defaults to 10, but you can set it as high or low as you need.
+
+Use them like so:
 
-    // Make a slideshow
     .slideshow {
-      @import slideshow;
-    
-      // Style the slideshow yourself
-      #{!slide_container} {
-        background: #ccc;
-        
-        .content {
-          padding: 1.5em;
-        }
-        
-        h2 {
-          padding: .75em;
-          background: #aaa;     
-        }
-      }
+      @include slideshow('> div', '> article', 25);
     }
-    
+
+
+Available Defaults
+==================
+
+    // The selector for your carousel (relative to your container)
+    $slide-carousel : "> div";
+
+    // The selector for your slides (relative to your carousel)
+    $slide          : "> article";
+
+    // The largest number of slides that this container will need to house
+    $max-slides     : 10;

data/lib/{css-slideshow.rb → css-slidehow.rb}

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

data/stylesheets/_css-slideshow.scss

@@ -1,14 +1,15 @@
-// CSS SLIDESHOWS
-// Plugin by Eric Meyer - http://www.oddbird.net/
-// Based on the work of Jenna Smith - http://growldesign.co.uk/
+//** CSS SLIDESHOWS **//
 
-// Compatible with IE6+, Mozilla and Webkit browsers.
-// **Not compatible with Opera without Javascript help**
+// Default Settings ----------------------------------------------------------
 
-// Override with the proper class names for your slide/slide-nav containers
-$slide-container: ".slides" !default;
+// The selector for your carousel (relative to your container)
+$slide-carousel : "> div";
 
-$max-slides: 10 !default;
+// The selector for your slides (relative to your carousel)
+$slide          : "> article";
 
-// import lightboxes
+// The largest number of slides that this container will need to house
+$max-slides     : 10;
+
+// Import --------------------------------------------------------------------
 @import "css-slideshow/slideshow";

data/stylesheets/css-slideshow/_slideshow.scss

@@ -1,21 +1,25 @@
-// Apply +slideshow to the slideshow container
-@mixin slideshow($slides: $slide-container, $count: $max-slides) {
-  #{$slides} {
-    width: 100%;
-    overflow: hidden;
+//** CSS SLIDESHOWS **//
+
+// Apply to the slideshow container
+@mixin slideshow(
+  $carousel : $slide-carousel, 
+  $slide    : $slide, 
+  $count    : $max-slides
+) {
+  width: 100%;
+  overflow: hidden;
+  
+  #{$carousel} {
+    margin: 0;
+    padding: 0;
+    width: 103% * $count;
+    @include no-bullets;
+    @include clearfix;
     
-    > ul {
-      margin: 0;
-      padding: 0;
-      width: 103% * $count;
-      @include no-bullets;
-      @include clearfix;
-      
-      > li {
-        @include float(left);
-        width: 100% / (1.03 * $count);
-        margin-right: .5% / (1.03 * $count);
-      } 
+    #{$slide} {
+      @include float(left);
+      width: 100% / (1.03 * $count);
+      margin-right: .5% / (1.03 * $count);
     } 
   } 
 }

data/templates/project/_slideshow.scss

@@ -1,33 +1,17 @@
-// CSS-only Lightboxes
+//** CSS-only Lightboxes **/
 // Plugin by Eric Meyer - http://www.oddbird.net/
 // Based on the work of Jenna Smith - http://growldesign.co.uk/
 
 // Compatible with IE6+, Mozilla and Webkit browsers.
 // **Not compatible with Opera without Javascript help**
 
-// Override with the proper class names for your slide/slide-nav containers
-$slide-container: ".slides";
+// Import --------------------------------------------------------------------
 
-$max-slides: 10;
-
-// import lightboxes
 @import "css-slideshow";
 
-// Make a slideshow
+// Slideshows  ---------------------------------------------------------------
+
+// Based on our sample HTML template:
 .slideshow {
-  @include slideshow;
-  
-  // Style the slideshow yourself
-  #{$slide-container} {
-    background: #cccccc;
-    
-    .content {
-      padding: 1.5em; 
-    }
-    
-    h2 {
-      padding: 0.75em;
-      background: #aaaaaa; 
-    } 
-  } 
+  @include slideshow('> div','> article');  
 }

data/templates/project/slideshow.html

@@ -1,39 +1,9 @@
-<div class="slideshow">
-  <div class="slides">
-    <ul>
-      <!--
-        EXAMPLE SLIDES
-        ... the .slideshow and .slides elements are necessary, but can be any HTML elements (e.g. section)
-        ... the inner UL/LI structure is necessary as is
-        ... everything inside the LI is optional
-      -->
-      <li id="slide1">  
-        <div class="content">
-          <h2>Slide one</h2>
-          <p>Decima eodem modo typi qui nunc nobis videntur <a href="#slide2">NEXT</a> fiant sollemnes in. Quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta! Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. In vulputate velit esse molestie consequat vel illum dolore eu feugiat. Praesent luptatum zzril delenit augue duis dolore te.</p>
-        </div>
-      </li>
-      <li id="slide2">  
-        <div class="content">        
-          <h2>Slide Two</h2>
-          <p>Dynamicus qui sequitur mutationem consuetudium <a href="#slide1">PREV</a>; est notare quam littera? Decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Diam nonummy nibh euismod tincidunt ut laoreet dolore. Adipiscing elit sed magna aliquam erat volutpat ut wisi. In iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod.</p>
-        </di>
-      </li>
-      <!--
-        END EXAMPLE SLIDES
-      -->
-    </ul>
+<section class="slideshow"><!-- container -->
+  <div><!-- carousel -->
+    
+    <article id="slide1">  <!-- slide (repeat as needed) -->
+      <!-- slide content -->
+    </article>
+    
   </div>
-  <!--
-    EXAMPLE SLIDE NAV
-    ... you can set up your slide nav as tabs, or prev/next or any other way you like
-    ... all that matters is that each nav item links to the proper ID
-    ... from there you can style them anyway you like and/or add JS for more effect
-  -->
-  <div class="slide-nav">
-    <ul>
-      <li><a href="#slide1">Slide 1</a></li>
-      <li><a href="#slide2">Slide 2</a></li>
-    </ul>
-  </div><!-- /.slide-nav -->
-</div><!-- /.slideshow -->
+</section>

metadata

@@ -1,12 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: css-slideshow
 version: !ruby/object:Gem::Version 
-  prerelease: false
+  hash: 62196297
+  prerelease: 4
   segments: 
   - 0
-  - 2
-  - 0
-  version: 0.2.0
+  - 3
+  - beta
+  - 1
+  version: 0.3.beta.1
 platform: ruby
 authors: 
 - Eric Meyer
@@ -14,21 +16,23 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-04-20 00:00:00 -06:00
-default_executable: 
+date: 2011-07-11 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
+        hash: 15424179
         segments: 
         - 0
         - 10
         - 0
-        - rc3
+        - rc
+        - 3
         version: 0.10.0.rc3
   type: :runtime
   version_requirements: *id001
@@ -42,13 +46,12 @@ extra_rdoc_files: []
 
 files: 
 - README.mkdn
-- lib/css-slideshow.rb
+- lib/css-slidehow.rb
 - stylesheets/_css-slideshow.scss
 - stylesheets/css-slideshow/_slideshow.scss
 - templates/project/_slideshow.scss
 - templates/project/manifest.rb
 - templates/project/slideshow.html
-has_rdoc: true
 homepage: http://www.oddbird.net/
 licenses: []
 
@@ -58,23 +61,29 @@ rdoc_options: []
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version 
+      hash: 25
       segments: 
-      - 0
-      version: "0"
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 1.7.2
 signing_key: 
 specification_version: 3
 summary: a css-only slideshow implementation for compass