<p class="uk-article-lead">This theme is built on the <a href="http://www.warp-framework.com">Warp framework</a>, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by <a href="http://www.getuikit.com">UIkit</a>, a lightweight and modular front-end framework, which provides the theme's styling. The theme also comes with a wide range of different <a href="index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=103">layouts and widget variations</a>.</p>

<h2>Styles</h2>
<p>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.</p>

<div class="uk-grid">
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=default">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_01.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Default</div>
        </a>
    </div>
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=blue">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_02.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Blue</div>
        </a>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=salmon">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_03.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Salmon</div>
        </a>
    </div>
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=turquoise">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_04.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Turquoise</div>
        </a>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=graphite">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_05.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Graphite</div>
        </a>
    </div>
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=orange">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_06.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Orange</div>
        </a>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=lilac">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_07.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Lilac</div>
        </a>
    </div>
    <div class="uk-width-1-2">
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=gold">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_08.jpg" width="390" height="280" alt="Load Style" title="Load Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Gold</div>
        </a>
    </div>
</div>

<h3>Custom Widgetkit Styles</h3>
<p>We created a custom style for our <a href="index.php/widgetkit/gallery">Widgetkit Gallery</a> perfectly fitting the theme. To apply this style, follow these steps:</p>

<h4>Gallery</h4>
<ol>
    <li>Download and unzip the bonus styles package for Widgetkit available in the download area</li>
    <li>Copy the folder <mark>gallery/styles/avenue</mark></li>
    <li>Joomla: Paste it to <mark>media/widgetkit/widgets/gallery/styles</mark><br /> WordPress: Paste it to <mark>wp-content/plugins/widgetkit/widgets/gallery/styles</mark></li>
    <li>Now you can select the style "Avenue" in the settings of your Widgetkit Slideshow</li>
</ol>

<hr>

<h3>Social Icons</h3>
<p>Use the modifier <code>.uk-icon-button</code> class to create an icon button.</p>

<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-rss"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-flickr"></a>
<a href="#" class="uk-icon-button uk-icon-xing"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
<a href="#" class="uk-icon-button uk-icon-dribbble "></a>
<a href="#" class="uk-icon-button uk-icon-github"></a>

<p>Here is a little code example how to add them:</p>
<pre>  &lt;a href="#" class="uk-icon-button uk-icon-twitter"&gt;&lt;/a&gt;
  &lt;a href="#" class="uk-icon-button uk-icon-facebook"&gt;&lt;/a&gt;
  &lt;a href="#" class="uk-icon-button uk-icon-google-plus"&gt;&lt;/a&gt;
</pre>
<p><a href="http://www.getuikit.com/docs/icon.html" target="blank">Here</a> is an overview of all icons provided by <a href="http://fortawesome.github.io/Font-Awesome/" target="blank">Font Awesome</a>.</p>

