Urku Portfolio :: Pixeden

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.

Essential Stationery

Branding

Tumblr hammock

Packaging

Biodiesel etsy

Branding

<div class="ae-grid"> 
   <!-- first column -->
   <div class="ae-grid__item item-lg-4"> 
     <a href="item-url" class="rk-item">
       <img src="img-url" />
       <span class="item-meta">
         <h2>Title</h2>
         <p>Category</p>
       </span>
     </a>
   </div>
    
   <!-- other columns... -->
</div>

Masonry Items

You can also use the Masonry grid style of Aurora. Create a ae-masonry container and add each item with the classae-masonry__item. You can also set the number of columns for each viewport.

Essential Stationery

Branding

Pickled Tousled

Art Direction

Waistcoat vegan

Graphic Design

Tumblr hammock

Packaging

<div class="ae-masonry ae-masonry-md-2 ae-masonry-xl-4"> 
   <a href="item-url" class="rk-item ae-masonry__item">
     <img src="img-url" />
     <span class="item-meta">
       <h2>Title</h2>
       <p>Category</p>
     </span>
   </a>
  
 <!-- other items... -->
</div>

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.

<div class="rk-portfolio__items"> 
  <a href="item-url" class="rk-item rk-item--flex item-1">
     <span class="item-meta">
        <h2>Title</h2>
        <p>Category</p>
     </span>
  </a>
  <a href="item-url" class="rk-item item-2">
    ...
  </a>
  ...
</div>

CSS background-image example.

.item-2 {
  background-image: url('path/to/img/');
}

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.

Size

Based on a 12 columns grid, you can control the size in columns with the class rk-size-{cols}, for example rk-size-6 would fill half a row (6 columns of 12).

<div class="rk-portfolio__items"> 
  <div class="rk-item item-10 rk-size-4">
    <!-- Item meta -->
  </div>
  <div class="rk-item item-1 rk-size-8">
    <!-- Item meta -->
  </div>
</div>

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.

<div class="rk-portfolio__items"> 
  <div class="rk-item item-10 rk-size-4
    <!-- Item meta -->
  </div>
  <div class="rk-item item-1 rk-size-8 rk-landscape">
    <!-- Item meta -->
  </div>
</div>

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.

Trust fund

Packaging

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.

<div class="rk-portfolio__items"> 
  <div class="rk-items-cont rk-size-6">
     <div class="rk-item item-4 rk-landscape">
       <!-- Item meta -->
     </div>
     <div class="rk-item item-5 rk-landscape">
       <!-- Item meta -->
     </div>
  </div>
  <div class="rk-item item-6">
    <!-- Item meta -->
  </div>
</div>

Look that for item-6 we did not declare a size helper because the smart container make it fill the remaining available space. This lets you create precise layouts.

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.

<div class="rk-portfolio__items"> 
  <div class="rk-items-cont rk-size-6 rk-tosize-8">
     <div class="rk-item item-4 rk-tosize-6 rk-landscape">
       <!-- Item meta -->
     </div>
     <div class="rk-item item-5 rk-tosize-6 rk-landscape">
       <!-- Item meta -->
     </div>
  </div>
  <div class="rk-item item-6 rk-tosize-4">
    <!-- Item meta -->
  </div>
</div>

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

<input type="radio" name="layout-ctrl" id="layout-base" class="layout-ctrl-input"> 
<div class="ae-container-fluid rk-layout-ctrl-cont">
   <label for="layout-base" class="rk-layout-ctrl">
     <svg>
       <use xlink:href="assets/img/symbols.svg#icon-view-default" />
     </svg>
   </label>
</div>
<input type="radio" name="layout-ctrl" id="layout-grid" class="layout-ctrl-input"> 
<div class="ae-container-fluid rk-layout-ctrl-cont">
   <label for="layout-grid" class="rk-layout-ctrl">
     <svg>
       <use xlink:href="assets/img/symbols.svg#icon-view-alt" />
     </svg>
   </label>
</div>
<!-- Mobile version -->
<div class="rk-layout-ctrl-mobile">
  <svg viewBox="0 0 9 9" class="layout-mob-1">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-2">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-3">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-4">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
</div>
<section class="rk-portfolio">
  <div class="rk-portfolio__items">
    ...items
  </div>
</section>

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 ].

<div class="rk-blog__items"> 
  <div class="rk-blog__item">
     <a href="post-url" class="post-img post-x rk-landscape rk-tosquare"></a>
     <div class="blog-info">
        <h2 class="blog-info__title">Post Title</h2>
        <h5 class="blog-info__author">Author</h5>
        <p class="blog-info__excerpt">Lorem ipsum...</p>
     </div>
     <div class="blog-meta">
       <a href="post-url#comments" class="blog-meta__comments">1 Comment</a>
       <a href="post-url" class="blog-meta__date">December, 1 2015</a>
       <a href="post-url" class="arrow-button blog-meta__read-more">
         <svg>
         </svg>
       </a>
     </div>
  </div>
</div>

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.

<input type="radio" name="layout-ctrl" id="layout-base" class="layout-ctrl-input"> 
<div class="ae-container-fluid rk-layout-ctrl-cont">
   <label for="layout-base" class="rk-layout-ctrl">
     <svg>
       <use xlink:href="assets/img/symbols.svg#icon-view-full" />
     </svg>
   </label>
</div>
<input type="radio" name="layout-ctrl" id="layout-grid" class="layout-ctrl-input"> 
<div class="ae-container-fluid rk-layout-ctrl-cont">
   <label for="layout-grid" class="rk-layout-ctrl">
     <svg>
       <use xlink:href="assets/img/symbols.svg#icon-view-alt" />
     </svg>
   </label>
</div>
<!-- Mobile version -->
<div class="rk-layout-ctrl-mobile layout-blog">
  <svg viewBox="0 0 9 9" class="layout-mob-1">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-2">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-3">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
  <svg viewBox="0 0 9 9" class="layout-mob-4">
    <rect width="100%" height="100%" fill="currentCOlor" />
  </svg>
</div>
<section class="rk-blog">
  <div class="rk-blog__items">
    ...blog-items
  </div>
</section>

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.

<section class="ae-container-fluid ae-container-fluid--full"> 
  <header class="rk-portfolio-cover item-inside-x">
     <div class="item-inside__meta item-inside__meta--contrast">
        <h1 class="rk-portfolio-title">Item Title</h2>
        <h5 class="rk-portfolio-category">Category</h5>
     </div>
  </header>
</sectionv>

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.

Design Styles

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.

Prev Next

<button class="arrow-button"> Button
  <svg>
     <use xlink:href="assets/img/symbols.svg#arrow" />
  </svg>
</button>

<button class="arrow-button arrow-button--reverse"> Reverse
  <svg>
     <use xlink:href="assets/img/symbols.svg#arrow" />
  </svg>
</button>

<button class="arrow-button arrow-button--center"> Center
  <svg>
     <use xlink:href="assets/img/symbols.svg#arrow" />
  </svg>
</button>

<button class="arrow-button arrow-button--right"> Right
  <svg>
     <use xlink:href="assets/img/symbols.svg#arrow" />
  </svg>
</button>

<button class="arrow-button arrow-button--right arrow-button--out"> Post
  <svg>
     <use xlink:href="assets/img/symbols.svg#arrow" />
  </svg>
</button>

<div class="group-buttons">
   <button class="arrow-button arrow-button--reverse"> Left
     <svg>
         <use xlink:href="assets/img/symbols.svg#arrow" />
     </svg>
   </button>
   <button class="arrow-button"> Right
     <svg>
         <use xlink:href="assets/img/symbols.svg#arrow" />
     </svg>
   </button>
</div>

<div class="group-buttons">
   <button class="arrow-button arrow-button--reverse arrow-button--center"> Left Center
     <svg>
         <use xlink:href="assets/img/symbols.svg#arrow" />
     </svg>
   </button>
   <button class="arrow-button arrow-button--center"> Right Center
     <svg>
         <use xlink:href="assets/img/symbols.svg#arrow" />
     </svg>
   </button>
</div>

Main Header

The rk-header is the header component used in all pages, it contains the rk-logo and therk-navigation with rk-menu and rk-search inside of it.
To set the header and switch as fixed, you can add the classtop-fixed to the body element.

<header class="rk-header rk-container--full">
  <input type="checkbox" id="mobile-menu" class="rk-mobile-menu">
  <label for="mobile-menu">
    <svg>
      <use xlink:href="assets/img/symbols.svg#bar"></use>
    </svg>
    <svg>
      <use xlink:href="assets/img/symbols.svg#bar"></use>
    </svg>
    <svg>
      <use xlink:href="assets/img/symbols.svg#bar"></use>
    </svg>
  </label>
  <div class="rk-container rk-topbar">
    <h1 class="rk-logo"><a href="index.html">urku portfolio<sup>tm</sup></a></h1>
    <nav class="rk-navigation">
      <ul class="rk-menu">
        <li class="rk-menu__item">
          <a href="url" class="rk-menu__link">Link</a>
        </li>
        <li class="rk-menu__item">
          <a href="url" class="rk-menu__link">Link</a>
          <nav class="rk-menu__sub">
            <ul class="rk-container">
              <li class="rk-menu__item">
                <a href="url" class="rk-menu__link">Sub</a>
              </li>
              ...
            </ul>
          </nav>
        </li>
        ...
      </ul>
      <form class="rk-search">
        <input type="text" placeholder="Search" id="urku-search" class="rk-search-field">
        <label for="urku-search">
          <svg>
            <use xlink:href="assets/img/symbols.svg#icon-search"></use>
          </svg>
        </label>
      </form>
    </nav>
  </div>
</header>

Plugin peHoverImage

This plugin allows you to show another image when hovering a portfolio item.
Add the class rk-item--hover to the item and declare the alternative image through the data-bg-src attribute.
For the Flex Portfolio, you need to add data-bg-src="origin" and declare the alternative image as data-img-src. You could also declare both data-bg-src(main) and data-img-src(alt) through the html markup.

Below a list of options that you can declare on initialization:
elems the CSS selector for the effect | default: '.rk-item--hover'
bgSrc path to the default image | default: null
transition valid CSS time for the fade transition | default: .3s
meta boolean to show the meta info on hover | default: false
reverse boolean to show the alternative image first | default: false
bgColor valid CSS background-color for the portfolio hover | default: 'white'

basic markup

<div class="rk-portfolio__items"> 
  <div class="rk-item rk-item--hover" data-bg-src="path/to/alt/image">
    <img src="path/to/image"/>
  </div>
</div>

load plugin

<script src="path/to/pe-hoverimage.min.js"></script>

plugin initialization

var hover = new peHoverImg();
hover.init();
 
// or Init with options
hover.init({
  elems: '.rk-item--hover',
  bgSrc: 'path/to/default/image.jpg',
  transition: '.3s',
  meta: false,
  reverse: false,
  bgColor: 'white'
});

View Examples

urku portfolio^tm

Documentation

Portfolio Items

Static Items

Essential Stationery

Tumblr hammock

Biodiesel etsy

Masonry Items

Essential Stationery

Pickled Tousled

Waistcoat vegan

Tumblr hammock

Flexible Items

Essential Stationery

Pickled Tousled

Waistcoat vegan

Tumblr hammock

Biodiesel etsy

Advanced Layouts

Size

Aspect Ratio

Hover Style

Trust fund

Smart Item Containers

Switch Layout

Tumblr hammock

Biodiesel etsy

Gentrify artisan

Blog items

Inner Pages

Hero Image

Smart Styles

Arrow Buttons

Main Header

Plugin peHoverImage