Get it together
What you need to get started
-
Include
gallery.css
&gallery.theme.css
<link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css">
-
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