This theme is built on the Warp framework, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by UIkit, a lightweight and modular front-end framework, which provides the theme's styling. The theme also comes with a wide range of different layouts and widget variations.

Styles

We provide lovingly crafted style variations to give you a glimpse of what is possible with this theme. The built-in theme customizer allows you to modify colors, fonts, sizes and much more without any CSS knowledge. Just choose your colors with the color picker and adjust the theme with only a few clicks. Click on one of the images to see the style.

Parallax

To use our unique parallax effect, just add the .parallax class to a <div> element and modify it the way you want with the data-* attributes.

Syntax name	Description	Default value
data-sizeratio=""	Defines the height in relation to the width.	0.38
data-ratio=""	Defines the effect speed. The higher the value, the more slower the effect speed. "1" is the natural scroll speed.	8
data-maxdiff=""	Defines a maximal scroll height.	false
data-start=""	Defines a starting position.	0
data-mode=""	Defines, when the parallax effects begins. "inview" starts once the parallax is in view of the browser frame. "dock" starts when the browser frame top docks to the parallax.	inview
data-childanimation=""	Defines, if the child element is animated with "true" or "false".	true
data-childdir=""	Defines the direction of child elements. "-1" will scroll to top. "1" will scroll to bottom.	1
data-childratio=""	Defines the speed of child elements. "-1" will scroll to top. "1" will scroll to bottom.	3
data-childopacity=""	Adds or removes a fade-out effect from child elements by using the value "true" or "false".	true

Parallax example

<div class="parallax" id="parallax-top-image" data-childopacity="false" data-sizeratio="0.12" data-childdir="1">
   <div>This is the child element</div>
</div>

Custom Widgetkit Styles

We created a custom style for our Widgetkit Slideset, perfectly fitting the theme. To apply this style, follow these steps:

Slideset

1. Download and unzip the bonus styles package for Widgetkit available in the download area
2. Copy the folder slideset/styles/capture
3. Joomla: Paste it to media/widgetkit/widgets/slideset/styles
   WordPress: Paste it to wp-content/plugins/widgetkit/widgets/slideset/styles
4. Now you can select the style "Capture" in the settings of your Widgetkit Slideset

Social Icons

Use the modifier .uk-icon-button class to create an icon button.

Here is a little code example how to add them:

  <a href="#" class="uk-icon-button uk-icon-twitter"></a>
  <a href="#" class="uk-icon-button uk-icon-facebook"></a>
  <a href="#" class="uk-icon-button uk-icon-google-plus"></a>

Here is an overview of all icons provided by Font Awesome.