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
- For grid column basics please see Images > Grid of the Framework Docs.
- For thumbnail captions please see Images > Captions of the Framework Docs.
- 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.
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.
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.
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.
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.
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
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.
Example
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