Portfolio Sections

Portfolio Grids Updated

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for the old portfolio grid structure. This page will be available until all templates have been upated using the latest verison of the framework.

Portfolio grids are based on the Timber framework content grids and can be displayed using one, two, three, four, five or six columns. A portfolio grid is basically just a content grid wrapped in a container with unique styling. Our portfolio grids have been redesigned from scratch to offer a simpler setup and a faster way to modify them on the fly using a range of classes and data attributes.

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.

Portfolio Grid Attributes New

Portfolio grids come with several data attributes for controlling the type of layout, grid thumbnail ratio, grid filter and resize animation duration, and whether dimensions should be variable or fixed.

Layout Mode

Set the layout mode of the grid by adding the data-layout attribute to the grid-container wrapper. Opt between two layouts, "masonry" or "fitRows".

Example
								
									
...
...
...

IMPORTANT: If you apply layout mode to a content grid you must add the class .grid-sizer to the grid item you want to use as a size guide for setting column width.


Fixed Dimensions

By default grid thumbnail height is variable. Force the grid to set thumbnail width and height by adding the data-set-dimensions attribute to the grid-container wrapper. Note: Requires that layout is set. Attribute takes no value.

Example
								
									
...

Grid Ratio

Set the grid thumbnail ratio by adding the data-grid-ratio attribute to the grid-container wrapper. Ratio is specified as a decimal where default is set to 1.5. Note: Requires that layout and dimensions are set.

Example
								
									
...

Note: Setting a unique grid ratio means that any images used must be resized using the same ratio. If not resized using the same ratio, cropping will occur!


Filter Duration

Set the grid filtering duration by adding the data-animate-filter-duration attribute to the grid-container wrapper. Duration is specified in milliseconds where default is set to 700, representing 0.7 seconds. Note: Requires that only layout is specified.

Example
								
									
...

Resize Animation & Duration

Force the grid to animate upon window resize by adding the data-animate-resize attribute to the grid-container wrapper. Note: Requires that only layout is specified. Attribute takes no value.

Specify the duration of the resize animation by adding the data-animate-resize-duration to the grid-container wrapper. Duration is specified in milliseconds where default is set to 700, representing 0.7 seconds.

Example
								
									
...

Grid Margins New

Our template grids offer three margin options, namely, 30px (default), 10px, or 0px margins.

Reduce column margins to 10px by adding the .small-margins class to the grid-container wrapper.

Example
								
									
...

Remove column margins by adding the .no-margins class to the grid-container wrapper.

Example
								
									
...

Full Width Grids

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

Example
								
									
...

Masonry & Filtering

Although portfolio grids do not require masonry for aligning thumbnails you can still use the script for filtering grid items. To use masonry simpy add the data-layout attribute to the grid container and specify "masonry".

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 perceeded 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 "."


Unique Grid Examples

Set Dimensions Grid

When using a masonry grid layout, images used should have the same widths but can have variating heights as the tiles of the grid will rearrange to fit accordingly. However, when using the attribute data-set-dimensions each grid item will receive a fixed width and height which is determined by the grid ratio. In these instances, images need to respect certain width/height contrstraints. Below are suggested image sizes based on a ratio of 1.5:

  • Landscape: 760x507px
  • Large Landscape: 1520x1023px
  • Portrait: 760x1047px
  • Large Portrait: 1520x2082px
  • Wide: 1520x507px

When using set dimensions we can variate the size of the tile using the following classes: .landscape, .large.landscape, .portrait, .large.portrait and .wide. Default tile size is set to landscape. The image below clearly shows how these classes are applied. Below is an example with variating tile sizes.

portoflio example 4
Example
								
									

Grid Slider

Carousel slider with thumbnails. Note: Sizes are only suggestive based on the number of thumbs visible.

  • Two Columns: 800x800px
  • Three Columns: 500x500px
  • Four Columns: 360x360px
portoflio example 7
Example
								
									

Recent Projects

Project intro