{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
<div class="ui right vertical menu sidebar">
  <a class="item">
    Item 1
  </a>
  <a class="item">
    Item 2
  </a>
  <a class="item">
    Item 3
  </a>
</div>
<div class="pusher">

</div>

<div class="uk-animation-slide-top">
  <h1>UIKIT</h1>
</div>
<div>
  <h1>jquery-ui</h1>
  <a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
  <a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
  <a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
</div>


<div class="ui segment">
  <div class="ui grid">
    <h1>Semantic</h1>

    <div class="two column large screen only row">
      <div class="column">
        <div class="ui segment">
          Large Screen
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Large Screen
        </div>
      </div>
    </div>
    <div class="two column widescreen only row">
      <div class="column">
        <div class="ui segment">
          Widescreen
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Widescreen
        </div>
      </div>
    </div>
    <div class="two column mobile only row">
      <div class="column">
        <div class="ui segment">
          Mobile
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Mobile
        </div>
      </div>
    </div>
    <div class="three column row">
      <div class="computer only column">
        <div class="ui segment">
          Computer
        </div>
      </div>
      <div class="tablet mobile only column">
        <div class="ui segment">
          Tablet and Mobile
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          All Sizes
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          All Sizes
        </div>
      </div>
    </div>
    <div class="four column computer only row">
      <div class="column">
        <div class="ui segment">
          Computer
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Computer
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Computer
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Computer
        </div>
      </div>
    </div>
    <div class="three column tablet only row">
      <div class="column">
        <div class="ui segment">
          Tablet
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Tablet
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          Tablet
        </div>
      </div>
    </div>


    <button class="ui primary button">
      Save
    </button>
    <button class="ui button">
      Discard
    </button>
    <button class="ui secondary button">
      Okay
    </button>
    <button class="ui button">
      Cancel
    </button>


    <button id="sidebarToggleBtn" class="ui labeled icon button">
      <i class="bars icon"></i>
      Toggle Sidebar
    </button>
  </div>
</div>


<div class="container border">
  <h1>Bootstrap</h1>
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

{% endblock %}