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.


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>


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

cover entire viewport


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

flex center


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

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


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

external libs

css hover