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

<hr class="uk-article-divider uk-margin-large">

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

<ul class="uk-grid uk-grid-width-small-1-2 uk-grid-width-large-1-3 uk-margin-large" data-uk-grid-margin>
    <li>
        <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="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Default</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=yellow-dark">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_03.jpg" width="390" height="280" alt="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Yellow Dark</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=red">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_02.jpg" width="390" height="280" alt="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Red</div>
        </a>
    </li>
    <li>
        <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_04.jpg" width="390" height="280" alt="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Blue</div>
        </a>
    </li>
    <li>
        <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_05.jpg" width="390" height="280" alt="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Lilac</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-toggle" href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102&amp;style=yellow-light">
            <div class="uk-overlay">
                <img src="images/yootheme/features_style_06.jpg" width="390" height="280" alt="Style">
                <div class="uk-overlay-area"></div>
            </div>
            <div class="uk-thumbnail-caption">Yellow Light</div>
        </a>
    </li>
</ul>

<hr class="uk-article-divider uk-margin-large">

<h2>Special Features</h2>

[widgetkit id="19" widget="grid" columns_small="2" panel="box" media_align="top"]

<hr class="uk-article-divider uk-margin-large">

<h2>Widgetkit 2</h2>

<p>Venice Theme features new Widgetkit 2, a completely overhauled version of our toolkit. You can now insert and edit widgets, like a slideshow or media grid, directly inside articles and modules. You can organize your media through its integrated media manager and upload images and other binary files via drag and drop.</p>

<p>The Widgetkit Slideshow supports videos as well as images and can be set to fullscreen mode. Additionally, Venice Theme includes its own Switcher that uses thumbnails to navigate through different content panes.</p>

<hr class="uk-article-divider uk-margin-large">

<h2>Social Icons</h2>
<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>

<h3>Socialbar</h3>
<p>Venice Theme provides an additional Socialbar Position, integrated nicely into the header. You can modify it completely to add your own icons or apply a different toggler. Here's an example of how we applied the <a href="http://getuikit.com/docs/toggle.html" target="blank">Toggle component</a> from UIkit to the Socialbar.</p>

<pre>&lt;a class="tm-social-toggle" data-uk-toggle="{target:'#tm-social-icons > li', animation:'uk-animation-slide-right'}"&gt;
    &lt;i class="uk-icon-heart-o"&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;ul id="tm-social-icons" class="uk-list"&gt;
  &lt;li class="uk-hidden"&gt;&lt;a href="" class="uk-icon-button uk-icon-github uk-margin-small-top"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="uk-hidden"&gt;&lt;a href="" class="uk-icon-button uk-icon-twitter uk-margin-small-top"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

<hr class="uk-article-divider uk-margin-large">

<div class="uk-grid uk-margin-large" data-uk-grid-margin data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-space">

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-large-2-6 uk-text-center">
                    <a class="uk-display-block" href="http://www.warp-framework.com" target="_blank">
                        <img src="images/yootheme/features_icon_warp.svg" alt="Warp Framework" width="150" height="150">
                    </a>
                </div>
                <div class="uk-width-large-4-6 uk-text-center-medium">
                    <h2>Warp Framework</h2>
                    <p>A fast and slick theme framework which is built on the latest web techniques like HTML5, CSS3 and PHP 5.3+</p>
                    <p><a class="uk-button" href="http://www.warp-framework.com" target="_blank">Visit Website</a></p>
                </div>
            </div>

        </div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-space">

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-large-2-6 uk-text-center">
                    <a class="uk-display-block" href="http://www.getuikit.com" target="_blank">
                        <img src="images/yootheme/features_icon_uikit.svg" alt="UIkit" width="150" height="150">
                    </a>
                </div>
                <div class="uk-width-large-4-6 uk-text-center-medium">
                    <h2>UIkit</h2>
                    <p>A lightweight and modular front-end framework for developing fast and powerful web interfaces.</p>
                    <p><a class="uk-button" href="http://www.getuikit.com" target="_blank">Visit Website</a></p>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-1">
        <div class="uk-panel uk-panel-box uk-panel-box uk-text-center">
            <p>This theme is available for <img src="images/yootheme/features_icon_joomla.svg" width="25" height="21" alt="Joomla">Joomla and <img src="images/yootheme/features_icon_wordpress.svg" width="23" height="22" alt="Wordpress">WordPress including the same features on each system.</p>
        </div>
    </div>
</div>