00%
images loaded

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

Peel 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>