Get it together

What you need to get started

  1. Include gallery.css & gallery.theme.css

    <link rel="stylesheet" href="css/gallery.theme.css">
    <link rel="stylesheet" href="css/gallery.min.css">
  2. Mark up your gallery

    <div class="gallery items-3">
      <div id="item-1" class="control-operator"></div>
      <div id="item-2" class="control-operator"></div>
      <div id="item-3" class="control-operator"></div>
    
      <figure class="item">
        <h1>1</h1>
      </figure>
    
      <figure class="item">
        <h1>2</h1>
      </figure>
    
      <figure class="item">
        <h1>3</h1>
      </figure>
    
      <div class="controls">
        <a href="#item-1" class="control-button">•</a>
        <a href="#item-2" class="control-button">•</a>
        <a href="#item-3" class="control-button">•</a>
      </div>
    </div>

    Want your gallery to autoplay? Add the autoplay class!

    <div class="gallery autoplay items-3">

Choose a release

Download a prefixed or unprefixed build,
install using bower, or build it yo' self.

Learn how
Gallery works

Gallery uses some pretty advanced techniques.
Buy my screencast to learn them. Hell yes!

Topics covered

  • Layout & Setup

  • CSS Transitions

  • Gnarly
    CSS selectors

  • Interactivity,
    without script

  • Maintainable
    vendor prefixing

  • Advanced use
    of SASS & SCSS

  • CSS Animation

  • Grunt.js based
    build system