Template Overrides mit uikit

Axel Hartmann @continga

getuikit.com

Grid

Panel / Panel Box

<div class="uk-grid"> <div class="uk-width-medium-1-3"> <div class="uk-width-medium-1-3"> <div class="uk-panel uk-panel-box"> <h3 class="uk-panel-title">Title</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> <div class="uk-width-medium-1-3"> </div>

Gleiche Höhen im Grid

<div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}"> <div class="uk-width-medium-1-3"> <div class="uk-panel">...</div> </div> </div>

Cover

Cover Responsive

Benutzerdefiniertes Modul

<div class="uk-cover-background" data-uk-parallax="{bg: '-200'}"> <img class="uk-invisible" src="<?php echo $params->get('backgroundimage');?>"> <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle "> <div class="uk-width-1-1 uk-text-center uk-text-contrast"> <?php echo $module->content;?> </div> </div> </div>

Modul Beiträge - Kategorie

<div class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-4 uk-grid-collapse uk-grid-match" data-uk-grid-match=„{target:'.uk-panel'}"> <?php foreach ($list as $item) : ?> <div class="uk-panel"> <div class="uk-overlay uk-overlay-hover "> <img src="<?php echo $item->$image_intro; ?>" alt="<?php echo $item->$image_intro_alt; ?>"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade“> <h4><?php echo $item->title; ?></h4> </div> <a class="uk-position-cover" href="<?php echo $item->link; ?>"></a> </div> </div> <?php endforeach; ?></div>

Kategorie BlogModul Beiträge - Kategorie

<ul class="uk-grid" data-uk-grid-margin data-uk-grid-match="{target:'.uk-panel'}"> <li class="uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-3"> <div class="uk-panel"> <a href="<?php echo $item->link; ?>"> <figure class="uk-overlay uk-overlay-hover "> <img class="uk-overlay-scale" src="<?php echo $image; ?>" alt="<?php echo $image_alt; ?>"> <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center"> <h5 class="uk-text-bold"><?php echo $item-title; ?></h5> </figcaption> </figure> </a> </div> </li> </ul>

Kategorie-Blog Schlagworte in data-uk-filter

Dynamic Grid

Kategorie-Blog inkl. Unterkategorien Kategorie Alias in data-uk-filter

Kategorie-Blog uikit data-uk-slideshow

Navigation mit data-uk-slideshow-item

<div data-uk-slideshow="{autoplay:true, animation: 'fade'}"> <ul class="uk-slideshow"> <?php foreach ($list_preparations as $i => $preparation_step) : ?> <li> <figure class="uk-overlay"> <div class="uk-cover-background" style="background-image: url('<?php echo preparation_step['picture_large']; ?>');"> <img class="uk-invisible" src="<?php echo $preparation_step['picture_large']; ?>"> </div> <figcaption class="uk-overlay-panel uk-flex uk-flex-column uk-flex-column-reverse"> <div class="uk-width-1-3 uk-panel"> <?php echo $preparation_step['description']; ?> </div> </figcaption> </figure> </li> <?php endforeach; ?> </ul> <ul class="uk-thumbnav uk-grid-width-1-6"> <?php foreach ($list_preparations as $i => $preparation_step) : ?> <li data-uk-slideshow-item="<?php echo $preparation_step; ?>"> <a href=""><img src="<?php echo $preparation_step['picture_small']; ?>"></a> </li> <?php endforeach; ?> </ul> </div>