Portfolio Sections

Portfolio Grids

Portfolio grids are based on the Timber framework content grids and can be displayed using one, two, three, four, five or six columns. Each of our templates come with seven purpose-built portfolio grids for showcasing work; below is an example of each grid. A portfolio grid is basically just a content grid wrapped in a container with unique styling. Each portfolio grid wrapper is defined by the class .portfolio-X, where X represents the portfolio grid type (1-7) as shown below. Alternate the number of thumbnails per row by changing the .content-grid-X class, where X represents the number of columns (2-6).

Example
								
									
...
Related Sections
  1. For grid column basics please see Images > Grid of the Framework Docs.
  2. For thumbnail captions please see Images > Captions of the Framework Docs.
  3. For thumbnail rollovers and animation classes please see Images > Rollovers of the Framework Docs.

Grid Margins New

By default all portfolio grids (except portfolio type 6 and 7) have gutters that measure 30px.

Reduce column gutters to 10px by adding the .small-margins class to its wrapper.

Example
								
									
...

Remove column gutters by adding the .no-margins class to its wrapper.

Example
								
									
...

Full Width Grids

Make any portfolio grid full width by adding the .full-width class to its wrapper.

Example
								
									
...

Masonry & Filtering

Although some of the portfolio grids do not require masonry for aligning thumbnails you can still use the script for filtering grid items for portfolio sections 1-6. To use masonry simply add the .masonry-grid class to the content-grid wrapper.

Example
								
									
...

IMPORTANT: If you apply masonry to portfolio sections 1 through 4 you must add the class .grid-sizer to the grid item you want to use as a size guide for setting column width. Generally you can add this to the first grid item. See example below:

Example
								
									
...
...
...
Filtering Menu

You can add a filter menu to any portfolio grid. The filter menu is designed as an independent block which means you can easily move it around and style it independently of the grid itself.

Example

Note: Categories should be defined as classes proceeded by "."., ".design"

Adding Grid Items to Categories

Adding a grid item to one or several categories is easy, simply add the class name to the .grid-item wrapper.

Example
								
									
...

Note: All grid items are by default added to the "All" category and therefore does not need to be specified. Classes are added to the grid item wrapper without the "."


Portfolio Examples

Portfolio Type One

A simple grid displaying thumbnails only.

portoflio example 1
Example
								
									
Images Sizes

All thumbnails should be the same width and height.


Portfolio Type Two

This portfolio grid employs the equalize plug-in for matching the height of grid description to the height of the thumbnails. Simply add the .equalize class to the content-grid wrapper. As the plug-in loops through the entire grid you can add as many descriptions as necessary. To change background or font color of the description box target .portfolio-2 .grid-description.

portoflio example 1
Example
								
									

Recent Projects

Collection 2014

Clients: 452

Images Sizes

All thumbnails should be the same width and height.


Portfolio Type Three

A simple grid displaying thumbnails and descriptions.

portoflio example 2
Example
								
									
Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Images Sizes

All thumbnails should be the same width and height.


Portfolio Type Four

Pinterest inspired portfolio grid with variating image sizes. This type of grid requires that masonry be used and therefore we add the .masonry-grid class to the content-grid wrapper. To change background or font color of the description box target .portfolio-4 .item-description.

portoflio example 3
Example
								
									
Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Images Sizes

Thumbnails can be any width and height.


Portfolio Type Five

True masonry grid with variating image sizes for both portrait and landscape images. This type of grid requires that masonry be used and therefore we add the .masonry-grid class to the content-grid wrapper.

This type of grid offers four different masonry brick sizes: small landscape, large landscape, small portrait and large portrait. Default brick size is set to small landscape. Alternating between sizes and orientation is done by applying one or a combination of the following classes: .large, .portrait and .portrait.large. The image below clearly shows how these classes are applied.

portoflio example 4
Example
								
									
Images Sizes

Note: Images are doubled in size to accommodate retina displays

  • Small Landscape: 760x507px
  • Large Landscape: 1520x1023px
  • Small Portrait: 760x1047px
  • Large Portrait: 1520x2082px
Grid Item Ratio

Note: Portfolio section five grid items have a fixed width and height set by the script. The ratio by default is 3:2. You may want to change this, say if you are using images and videos in the grid where the video ratio used is commonly 16:9. To change the ratio of the grid items we add the data-grid-ratio to the content-grid wrapper and specify the new ratio as a decimal.

Example
								
									
...

Note: Changing the grid ratio means that you will need to resize your images using the same ratio. If not resized using the same ratio, cropping will occur.


Portfolio Type Six

Unique masonry grid with description boxes. This type of grid offers three different masonry brick sizes: square, vertical, and horizontal. Each type of masonry brick can have an accompanying description that can be positioned top, right, bottom or left. Default brick size is set to square. Alternating between sizes and orientation is done by applying one or a combination of the following classes:

Orientation Classes
  • .horizontal
  • .vertical
Image Width Classes
  • .half
  • .two-third
Image Position Classes
  • .image-top
  • .image-right
  • .image-bottom
  • .image-left
portoflio example 6
Example
								
									
Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Item Title

Item info...

Images Sizes

Note: Images are doubled in size to accommodate retina displays

  • Square: 960x960px
  • Vertical (Portrait): 960x1920px
  • Horizontal (Landscape): 1920x960px

Portfolio Type Seven

Carousel slider with thumbnails.

portoflio example 7
Example
								
									

Recent Projects

Item info...

Images Sizes

Note: Images are doubled in size to accommodate retina displays. Sizes are only suggestive based on the number of thumbs visible. Change the number of thumbs visible on line 336 of js/template-functions.js.

  • Two Columns: 800x800px
  • Three Columns: 500x500px
  • Four Columns: 360x360px