Docs

Setup

Basics

Setting up fig elements is quite easy. Depending on your situation you can choose between an HTML4 and an HTML5 setup. Both are supported equally.

HTML4

<div class="fig">
    <div class="fig-caption">
        ...
    </div>
    <img src="path/to/image/file.jpg">
</div>

HTML5

<figure class="fig">
    <figcaption class="fig-caption">
        ...
    </figcaption>
    <img src="path/to/image/file.jpg">
</figure>

The <figcaption> is optional and only required if you have text to show over or under the image.

The code samples below will be based on the HTML5 version of the element, if you want to use the HTML4 version you can replace the <figure> and <figcaption> elements with a <div>.

Binding effects

Effects can be bound to the figure using data attributes. You can see how we trigger a fade animation using the data-intro attribute below. This will cause the figure to fade in once the image has loaded.

data attributes

<figure class="fig" data-intro="fade">
    ...
</figure>

Different parts of the fig element can be animated using different data attributes. For example, you can animate the caption by using the data-caption attribute. First you set the type of animation and then the directionality. You can control the intro, caption, interaction and content animations using data attributes.

animating captions

<figure class="fig" data-caption="slide:left">
    ...
</figure>

It's also possible to use multiple animations together. For example having a caption slide and fade into view at the same time could be accomplished like so.

multiple animations

<figure class="fig" data-caption="fade slide:left">
    ...
</figure>

Links

You can wrap the fig element in an anchor tag or have anchor tags in the <figcaption> element. It will all work flawlessly.

An anchor wrapping the element

<a href="foo.html" title="Wrapping the figure">
    <figure class="fig">
        ...
    </figure>
</a>

An anchor as content

<figure class="fig">
    <figcaption class="fig-caption">
        ...
        <p><a href="bar.html">Nice and contained.</a></p>
    </figcaption>
</figure>

Layout

Fig contains a small set of layout styles which allow you to steer the way the figs are organized on the page.

Rows

Create rows of figs by using the fig-row container. Copy paste the fig HTML within the fig-item articles shown below (replace the dots with the fig HTML).

a row of figs

<div class="fig-row">
    <article class="fig-item">
        ...
    </article>
    <article class="fig-item">
        ...
    </article>
    <article class="fig-item">
        ...
    </article>
</div>

The above code creates three evenly spaced containers for your figs. Add or remove <article> elements to control the amount of figs on a single row.

Sets

You also have the option to use a fig set instead of a fig row. The fig row will always put the amount of items you define on one row. The fig set will add the amount appropriate for the given screen size.

a fig set

<ul class="fig-set" data-layout="beta">
    <li>
        <article class="fig-item">
            ...
        </article>
    <li>
        <article class="fig-item">
            ...
        </article>
    <li>
        <article class="fig-item">
            ...
        </article>
</ul>

Note that there are the </li> tags have been omitted. This is required to fit the figs next to each other, this is still valid HTML5.

The data-layout property allows you to define the maximum amount of figs you want on each row.

Choose between "alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta" and "theta". Where "alpha" will try to put two figs next to each other and "theta" will attempt to fit nine.

Blocks

If you want a fig to span the entire available width of it's container you can add the fig-block class.

a fig block

<figure class="fig fig-block">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Loading images

You can optionally postpone image loading till the image scrolls into view by setting the data-src attribute instead of the src attribute.

delayed loading

<figure class="fig">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

By setting a data-figset you can group images together and have them animate in to view in sequence.

group loading

<figure class="fig" data-figset="foo-bar">
    ...
</figure>

Fallback

Should you wish to style the fig element as it shows on Internet Explorer 8 you can use the .fallback classname in your CSS. It is only added on browsers that do not support fig styling and animation.

Styles

The default styles allow you to control the look and feel of the fig element. If you require more control than the styles shown below you can always override the styles in your own stylesheet.

Caption

Caption styles apply to the caption of the fig element. Colors and transparancy might be influenced by the position of the caption.

Position

<!--
choose between 'top', 'bottom' and 'cover'
-->
<figure class="fig fig-position-bottom">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Fill

<!--
choose between 'blur', 'blur-light', 'blur-heavy' and
'soft' to control the fill style
-->
<figure class="fig fig-fill-blur-light">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Color

<!--
add class 'fig-caption-dark' to setup a dark caption
-->
<figure class="fig fig-caption-dark">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Font

<!--
add class 'fig-font-sansserif' to setup a sans serif caption
-->
<figure class="fig fig-font-sansserif">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Text

<!--
add class 'fig-text-large' to set large caption text
-->
<figure class="fig fig-text-large">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Frame

Frame styles allow you to setup a picture frame around the fig element and control it’s width and color.

Color

<!--
add class 'fig-frame' to add a frame around the image
additionally add 'fig-frame-dark' to make it dark
-->
<figure class="fig fig-frame fig-frame-dark">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Width

<!--
control the thickness of the frame by adding
'fig-frame-thick' or 'fig-frame-thin' classes
-->
<figure class="fig fig-frame fig-frame-thick">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Animations

Some of the animations below only execute when the image has just loaded. If you’ve missed the animation, click the ‘refresh’ button on the right to replay it.

Intro

Intro effects are executed when the image has loaded. All images contained in fig elements are automatically hidden till they’ve finished loading. Once the image has loaded it is revealed, if an intro has been set the intro effect is used to reveal the image if not it is revealed at once.

Fade

<!--
a fig with a fade intro
-->
<figure class="fig" data-intro="fade">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Zoom

<!--
a fig with a zoom intro, choose between
zooming 'in' and 'out'
-->
<figure class="fig" data-intro="zoom:out">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Rotate

<!--
a fig with a rotate intro, choose between
rotating from the 'top', 'right', 'bottom' or 'left'
side of the frame.
-->
<figure class="fig" data-intro="rotate:top">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Interaction

Interaction effects are executed once the user interacts with the fig element, interaction is detected when the user moves his mouse over the element.

Focus

<!--
a fig with a focus animation when you mouseover
the image, control which part of the image is
focuessed when the user hovers over the element.
Choose between 'top', 'right', 'bottom' or 'left'.
-->
<figure class="fig" data-interact="focus:right">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Move

<!--
a fig with a move animation when you mouseover
the image, control which direction the image is
moved in when the user hovers over the element.
Choose between 'up', 'down', 'left' or 'right'.
-->
<figure class="fig" data-interact="move:down">
    <img src="" data-src="path/to/image/file.jpg">
</figure>

Caption

Caption effects apply to the caption of the fig element. They control the movements of the caption and the fill of the caption. You can use multiple effects together. For instance, ‘position’, ‘fade’ and ‘fill’.

Not all caption effects can be stacked. Setting a ‘position’ and telling the caption to ‘push’ the image is contradictory and will give unexpected results.

Fade

<!--
fade caption into view by setting
the 'data-caption' attribute to 'fade'
-->
<figure class="fig" data-caption="fade">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Slide

<!--
slide the caption into view by setting
the 'data-caption' attribute to 'slide' and
picking 'up', 'down', 'left' or 'right'.
-->
<figure class="fig" data-caption="slide:up">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Push

<!--
push the caption into view by setting
the 'data-caption' attribute to 'push' and
pick 'up', 'down', 'left' or 'right'.
where slide moves over the image, push will
move the image aside.
-->
<figure class="fig" data-caption="push:right">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Content

Content effects apply to the content of the caption. You are free to define the content as you please. The examples show headers, links and paragraphs but you can have other elements in there if you want. The content animations target any element contained within the caption and are not tied to certain element types.

Fade

<!--
fade text into view by setting
the 'data-content' attribute to 'fade'
-->
<figure class="fig" data-content="fade">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Slide

<!--
slide the content into view by setting
the 'data-content' attribute to 'slide' and
picking 'left' or 'right'.
-->
<figure class="fig" data-content="slide:left">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Stack

<!--
stack the content into view by setting
the 'data-content' attribute to 'stack' and
picking 'rise' or 'fall'.
-->
<figure class="fig" data-content="stack:rise">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>

Zebra

<!--
zebra is almost the same as slide where
slide moves all text in the same direction
zebra will move each different element
in it's own direction.
-->
<figure class="fig" data-content="zebra">
    <img src="" data-src="path/to/image/file.jpg">
    <figcaption class="fig-caption">
        <h1>Title</h1>
        <p>Description</p>
        <p><a href="foo.html">Link</a></p>
    </figcaption>
</figure>