Portfolio Items

Static Items

You can create a static portfolio page by using our grid system Aurora, creating the grid structure with ae-grid, adding your items with ae-grid__itemand customizing it as you want.

Flexible Items

The special portfolio items we are using in Urku Portfolio adapt in a flexible way to the viewport, alowing them for instance to resize to new layout switches. Just add the class rk-item--flex along the rk-item class on each items, inside the flex container with the rk-portfolio__items class.
Those flexible items are implemented as background-image with incremental numbered classes like item-{number} to set the specific background-image for each item.

Advanced Layouts

Our flexible items can be modified easily to create original custom advanced layouts.
A series of class allows you to modify the item size, aspect ratio and create smart item containers for precise layouts.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Aspect Ratio

You can control the aspect ratio and create different display view for the item. There are three aspect modifiers classes that are rk-landscape, rk-portraitor rk-square. Look below the previous example with a modifier.
Those helpers will let you create and control your flexible design layout and tweak it as necessary.

Hover Style

When hovering on an item a "Blend Mode" is applied to create a subtle effect. This is applied to the image through the CSS property background-blend-mode. This creates a special Black & White and Brightness effect.
We also add an extra layer when item-meta is used, to create a white semi transparent layer to help with text legibility.

This effect is not visible in Safari browser as it has for now only partial support for blend modes.

Smart Item Containers

You can create complex layouts holding items in smart containers with the class rk-items-cont.

Switch Layout

The switch layout is an advanced use of our flexible items that lets the end-user switch between two layouts with only CSS, this is set-up with each portfolio item through classes.
Just add the size and aspect-ratio you want for the alternate item layout with rk-tosize-{cols} for the columns, and rk-tolandscape, rk-toportrait and rk-tosquare for the aspect ratio.
Try it by clicking on the switch icons below.

Tumblr hammock


Biodiesel etsy


Gentrify artisan

Graphic Design

To display the switch you can include the radio inputs, its labels and if needed, the mobile version in svg, before the portfolio container.

Blog items

The Blog item uses a similar markup than the Portfolio items, with additional blog related content.

The post-img accepts the same aspect-ratio classes, and control for the switch layouts.
We also use a blog-info section, with blog-info__title, blog-info__author and blog-info__excerpt. And a blog-meta section with blog-meta__comments, blog-meta__date and blog-meta__read-more[ as an arrow-button ].

We created another switch layout display for the blog section with a switch between full width item and three columns (2/3 columns depending on the viewport media quesries). In case you want only the columns view, you would add the class rk-blog--columns to the parent container rk-blog.
The code to include is pretty similar to the portfolio switch. Include it before the blog container elements.

Inner Pages

Hero Image

To create a dynamic flexible layout, the section with the class rk-portfolio-cover will automatically cover all the height of the viewport until the end user scrolls down.
You can see an example in an inner page here.
You can also use a helper class item-inside__meta--contrast that adds a subtle opacity layer between the image and the Item Title to augment the legibility of the text if needed.

Smart Styles

We created smart design styles that lets you display your text and image while maintaining vertical rhythm and white spaces to create precise and harmonious responsive layouts.
Check them out in this page with ready to use snippets.

Arrow Buttons

This template uses buttons with an animated svg arrow.
There are some helper classes to invert the arrow direction, or encapsulate two buttons as a group.