Portfolio

A look inside.

The grid portfolio

The grid container is a div element that always holds the '.grid-portfolio' class.
Within, there's a '.grid-images' element.

// The grid container
<section class="grid-portfolio fadein">
    <div class="grid-images">
    <div class="item-sizer"></div>
        // The item
        <a class="item wide" href="path/to/work-page.html"> // Wide item
            // Item content
        </a>
        <a class="item tall" href="path/to/work-page.html"> // Tall item
            // Item content
        </a>
        <a class="item" href="path/to/work-page.html">
            // Item content
        </a>
        <a class="item" href="path/to/work-page.html">
            // Item content
        </a>
        ... Etc.
    </div>
</section>

Items

Items are links that include the ".item" class. Within the link there's a thumbnail background and a caption div that's holding the title.

// The item
<a class="item" href="path/to/work-page.html" style="background-image:url(/path/to/bg-image/);">
    <div class="caption">
        <h4>Caption title</h4> // Caption title
    </div>
</a>
// Another item

Full size portfolio

Ben includes a full size portfolio to showcase your work in a different way. It also has a slightly different markup and includes a navigation list. The nav item should have the same index as the full item.

// The grid container
<section class="fs-portfolio fadein">
    <ul class="fs-images">
        // The item
        <li style="background-image: url(/path/to/your-background.jpg)"> // Full item
            <h1>Item title</h1>
        </a>
        ... Etc.
    </ul>
    <ul class="fs-navigation">
        <li>
            <a href="link/to/project.html">Link title</a> // This item should have the same index as the full item.
        </li>
        ... Etc.
    </ul>
    </div>
</section>