uikit3 notes

written by on

Some notes on using uikit3

This notes is taken while uikit 3 is still in beta so things may change.

flex

Align a content center vertically and horizontally

<div class="uk-panel uk-flex uk-flex-center uk-flex-middle">
    <p class="uk-h4">Cover</p>
</div>

images

cover entire containing div

<div class="header_top uk-cover-container">
    <img src="" uk-cover>
    {% if image %}
      <img src="{{ image|url }}" alt="" uk-cover>
    {% endif %}
</div>

cover entire viewport

cover

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

flex center

flex

<div class="uk-flex uk-flex-center">
    <div></div>
</div>

.uk-flex-auto
class="uk-flex-stretch"
uk-flex uk-flex-center uk-flex-middle

fixed background

<div class="uk-background-fixed uk-background-center-center uk-height-medium uk-width-large" style="background-image: url(../docs/images/dark.jpg);"></div>

<div class="uk-height-medium {% if image %}uk-background-fixed uk-background-center-center{% endif %}"
  {% if image %}style="background-repeat: no-repeat;
  background-image: url({{ image|url }}); background-size: cover; background-position: center bottom; "{% endif %} >

add a caption

<div class="uk-inline">
  <div class="uk-overlay uk-dark uk-overlay-primary uk-position-bottom">

prev and next nav

slidenav

<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-next></a>

external libs

css hover