github.com/mirisuzanne/compass-css-lightbox

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

}