Portfolio

Items

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

For lightbox items, just add 'ligtbox' class and make sure the 'href' attribute holds the full-size image.

Additionally you can add a filter class. We will explain that later.

// The item
<a class="item lightbox filter-class" href="path/to/full-image.jpg>
	<img src="path/to/thumbnail.jpg"/>
	<div class="caption"> // Optional caption
		<h4>Caption title</h4> // Caption title
	</div>
</a>
// Another item

Columns and spacing

With Sylk you can choose your own columns and spacing by simply adding classes like ".col-2" or ".spacious" to the image grid container.

Additionally you can just use multiple sizes of images to get a Masonry effect.

// A 2-column grid
<div class="img-grid col-2">
	// Items
</div>

// A 3-column grid
<div class="img-grid col-3">
	// Items
</div>

// A 4-column grid (default)
<div class="img-grid">
	// Items
</div>

// A spacious grid
<div class="img-grid spacious">
	// Items
</div>

Filters!

To get a filterable portfolio, we refer to the /pages/portfolio-category-filters.html page.

You can adjust filters by adjusting the "data-filter" attribute and fill it with the class you want to have filtered.

Lastly, add the desired class to the ".item" element inside the grid and it will show up when the filter is chosen!

// Filter container
<div id="filters">
	<ul>
		<li>
			<a href="#" data-filter=".class">Filter name</a>
		</li>
	</ul>
</div>