├── .gitignore
├── templates
└── project
│ ├── slideshow.html
│ ├── manifest.rb
│ └── _slideshow.scss
├── stylesheets
├── _css-slideshow.scss
└── css-slideshow
│ └── _slideshow.scss
├── css-slideshow.gemspec
└── README.mkdn
/.gitignore:
--------------------------------------------------------------------------------
1 | css-slideshow-*.gem
2 |
--------------------------------------------------------------------------------
/templates/project/slideshow.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/stylesheets/_css-slideshow.scss:
--------------------------------------------------------------------------------
1 | //** CSS SLIDESHOWS **//
2 |
3 | // Default Settings ----------------------------------------------------------
4 |
5 | // The selector for your carousel (relative to your container)
6 | $slide-carousel : "> div";
7 |
8 | // The selector for your slides (relative to your carousel)
9 | $slide : "> article";
10 |
11 | // The largest number of slides that this container will need to house
12 | $max-slides : 10;
13 |
14 | // Import --------------------------------------------------------------------
15 | @import "css-slideshow/slideshow";
16 |
--------------------------------------------------------------------------------
/templates/project/manifest.rb:
--------------------------------------------------------------------------------
1 | # Make sure you list all the project template files here in the manifest.
2 | stylesheet '_slideshow.scss', :media => 'screen, projection'
3 | html 'slideshow.html'
4 |
5 | description "a css-only slideshow"
6 |
7 | help %Q{
8 | Installs some html and a stylesheet that you can use directly
9 | or refer to as an example.
10 | }
11 |
12 | welcome_message %Q{
13 | Please refer to the slideshow.html file to see how the markup should be structured.
14 | And to the slideshow stylesheet partial to see how to use the library and apply it to your markup.
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/stylesheets/css-slideshow/_slideshow.scss:
--------------------------------------------------------------------------------
1 | //** CSS SLIDESHOWS **//
2 |
3 | // Apply to the slideshow container
4 | @mixin slideshow(
5 | $carousel : $slide-carousel,
6 | $slide : $slide,
7 | $count : $max-slides
8 | ) {
9 | width: 100%;
10 | overflow: hidden;
11 |
12 | #{$carousel} {
13 | margin: 0;
14 | padding: 0;
15 | width: 103% * $count;
16 | @include no-bullets;
17 | @include clearfix;
18 |
19 | #{$slide} {
20 | @include float(left);
21 | width: 100% / (1.03 * $count);
22 | margin-right: .5% / (1.03 * $count);
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/templates/project/_slideshow.scss:
--------------------------------------------------------------------------------
1 | //** CSS-only Lightboxes **/
2 | // Plugin by Eric Meyer - http://www.oddbird.net/
3 | // Based on the work of Jenna Smith - http://growldesign.co.uk/
4 |
5 | // Compatible with IE6+, Mozilla and Webkit browsers.
6 | // **Not compatible with Opera without Javascript help**
7 |
8 | // Import --------------------------------------------------------------------
9 |
10 | @import "css-slideshow";
11 |
12 | // Slideshows ---------------------------------------------------------------
13 |
14 | // Based on our sample HTML template:
15 | .slideshow {
16 | @include slideshow('> div','> article');
17 | }
18 |
--------------------------------------------------------------------------------
/css-slideshow.gemspec:
--------------------------------------------------------------------------------
1 | Gem::Specification.new do |s|
2 | # Release Specific Information
3 | s.version = "0.2.0"
4 | s.date = "2010-04-20"
5 |
6 | # Gem Details
7 | s.name = "css-slideshow"
8 | s.authors = ["Eric Meyer"]
9 | s.summary = %q{a css-only slideshow implementation for compass}
10 | s.description = %q{a css-only slideshow implementation for compass}
11 | s.email = "eric@oddbird.net"
12 | s.homepage = "http://www.oddbird.net/"
13 |
14 | # Gem Files
15 | s.files = %w(README.mkdn)
16 | s.files += Dir.glob("lib/**/*.*")
17 | s.files += Dir.glob("stylesheets/**/*.*")
18 | s.files += Dir.glob("templates/**/*.*")
19 |
20 | # Gem Bookkeeping
21 | s.has_rdoc = false
22 | s.require_paths = ["lib"]
23 | s.rubygems_version = %q{1.3.6}
24 | s.add_dependency("compass", [">= 0.10.0.rc3"])
25 | end
26 |
27 |
--------------------------------------------------------------------------------
/README.mkdn:
--------------------------------------------------------------------------------
1 | Compass CSS Slideshow
2 | =====================
3 |
4 | CSS-only slideshows that work in IE6+, Mozilla and Webkit.
5 | Requires progressive JS support to work in Opera.
6 |
7 | Based on the work of [Jenna Smith](http://growldesign.co.uk/)
8 |
9 |
10 | Installation
11 | ============
12 |
13 | From the command line:
14 |
15 | sudo gem install css-slideshow
16 |
17 | Add to a project:
18 |
19 | // rails: compass.config, other: config.rb
20 | require 'css-slideshow'
21 |
22 | // command line
23 | compass install css-slideshow
24 |
25 | Or create a new project:
26 |
27 | compass -r css-slideshow -f css-slideshow project_directory
28 |
29 |
30 | Slideshows
31 | ==========
32 |
33 | The CSS-Slideshow works with a combination of internal links, overflow and
34 | floats.
35 |
36 | Each slideshow contains three important elements:
37 |
38 | - Container
39 | - Carousel
40 | - Slide(s)
41 |
42 | You can write the HTML to your liking, but here is one example:
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |