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>