From 706b03b3846ada83f49687413d08cbe1f2b14805 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 15 Dec 2016 17:01:23 +0000
Subject: [PATCH] change pagination / some buttons/ tables  classes | change
 layout of claims component

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44978 d315682c-612b-4755-9ff5-7f18f6832af3
---
 portal-2/src/app/app.component.ts             |   7 +-
 .../claim-utils/claimDataset.component.ts     |  10 +-
 .../claim-utils/claimProject.component.ts     |   2 +-
 .../claimPublication.component.html           |  14 +-
 .../claim-utils/claimResult.component.ts      |   2 +-
 .../claim-utils/claims.component.html         |  54 +-
 .../linking/selected/selected.component.ts    |  14 +-
 .../selected/selectedContexts.component.ts    |   2 +-
 .../selected/selectedDatasets.component.ts    |   4 +-
 .../selected/selectedProjects.component.ts    |   2 +-
 .../selectedPublications.component.ts         |   4 +-
 .../selected/selectedResults.component.ts     |   2 +-
 portal-2/src/app/deposit/deposit.component.ts |   2 +-
 portal-2/src/app/home/home.component.ts       |   2 +-
 .../dataProvider/dataProvider.component.html  |   2 +-
 .../relatedDatasourcesTab.component.ts        |   2 +-
 .../dataset/dataset.component.html            |   2 +-
 .../organization/organization.component.html  |   4 +-
 .../landingPages/person/person.component.html |   2 +-
 .../project/project.component.html            |   2 +-
 .../publication/publication.component.html    |   6 +-
 .../app/landingPages/tabTable.component.ts    |   2 +-
 .../src/app/searchAll/searchAll.component.ts  |   6 +-
 .../datasourceTableView.component.ts          |   2 +-
 .../src/app/searchPages/search.component.ts   |   2 +-
 .../advancedSearchForm.component.ts           |   8 +-
 .../searchUtils/searchForm.component.ts       |   2 +-
 portal-2/src/app/test/test.component.ts       | 604 ++++++++++++++++++
 .../utils/entitiesAutoComplete.component.ts   |   2 +-
 .../app/utils/pagingFormatter.component.ts    |   6 +-
 .../utils/pagingFormatterNoLoad.component.ts  |   4 +-
 .../app/utils/staticAutoComplete.component.ts |   2 +-
 portal-2/src/index.html                       |  27 +-
 33 files changed, 704 insertions(+), 104 deletions(-)

diff --git a/portal-2/src/app/app.component.ts b/portal-2/src/app/app.component.ts
index 1563cd0a..ab7e0f47 100644
--- a/portal-2/src/app/app.component.ts
+++ b/portal-2/src/app/app.component.ts
@@ -42,11 +42,8 @@ export class XLargeDirective {
                    <!-- Sidebar -->
                    <aside id="tm-sidebar" class="tm-sidebar uk-width-1-4@m">
                       <div class="uk-child-width-1-1" uk-grid>
-                         <div class="uk-width-1-4@m">
-                             something in sidebar
+                              something in sidebar
                              <login></login>
-                         </div>
-
                       </div>
                    </aside>
                    <!-- end of sidebar -->
@@ -57,7 +54,7 @@ export class XLargeDirective {
           <bottom></bottom>
 
 `
- 
+
 })
 export class AppComponent {
   title = 'ftw';
diff --git a/portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts b/portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts
index 978eb464..0838a011 100644
--- a/portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts
+++ b/portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts
@@ -29,12 +29,12 @@ import{DOI} from '../../utils/string-utils.class';
                  </div>
                  <div *ngIf="dataciteResultsNum == null || dataciteResultsNum == 0" class="alert alert-info" role="alert">No results found</div>
                  <div >
-                     <ul *ngIf="dataciteResults.length > 0 "  class="list-group">
+                     <ul *ngIf="dataciteResults.length > 0 "  class="uk-list">
                         <li *ngFor=" let item of dataciteResults "  [class]="(isSelected(item.doi))?'list-group-item panel-footer':'list-group-item'" >
                          <div >
                           <a *ngIf="item.doi" target="_blank" href="{{'http://dx.doi.org/'+item.doi}}" >{{item.title}}</a>
                           <span *ngIf="!item.doi" >{{item.title}}</span>
-                          <span  *ngIf="!isSelected(item.doi)" (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi, null,'OPEN')" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
+                          <i  *ngIf="!isSelected(item.doi)" (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi, null,'OPEN')" aria-hidden="true" class= "uk-icon-plus clickable">Add</i>
                         </div>
                         <span  *ngIf="item.publisher" class="sub-title-elements">Publisher: {{item.publisher}}</span>
                         <div *ngIf="item.creator" class="sub-title-elements">Authors: <span *ngFor="let author of item.creator let i = index">{{author}}{{(i < (item.creator.length-1))?"; ":""}}</span></div>
@@ -51,13 +51,13 @@ import{DOI} from '../../utils/string-utils.class';
                   <paging-no-load [currentPage]="openairePage" [totalResults]="openaireResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"  (pageChange)="openairePageChange($event)"> </paging-no-load>
                 </div>
                 <div >
-                  <ul *ngIf="openaireResults.length > 0 "  class="list-group">
+                  <ul *ngIf="openaireResults.length > 0 "  class="uk-list">
                      <li *ngFor=" let result of openaireResults " [class]="(isSelected(result.id))?'list-group-item panel-footer':'list-group-item'">
                       <div >
                        <a *ngIf="result['title'].url" target="_blank" [href]="result['title'].url" >{{result['title'].name}}</a>
                        <span *ngIf="!result['title'].url" >{{result['title'].name}}</span>
-                       <span *ngIf="!isSelected(result.id)"
-                       (click)="add(result, result.id, 'dataset', 'openaire', result['title'].name,  result['title'].url, result.year, result['title'].accessMode)" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
+                       <i *ngIf="!isSelected(result.id)"
+                       (click)="add(result, result.id, 'dataset', 'openaire', result['title'].name,  result['title'].url, result.year, result['title'].accessMode)" aria-hidden="true" class= "uk-icon-plus clickable">Add</i>
                      </div>
                       <span  *ngIf="result.publisher" class="sub-title-elements">Publisher: {{result.publisher}}</span><span *ngIf="(result.year)">({{result.year}})</span>
                       <div *ngIf="result.authors" class="sub-title-elements">Authors: <span *ngFor="let author of result.authors let i = index">{{author.name}}{{(i < (result.authors.length-1))?"; ":""}}</span></div>
diff --git a/portal-2/src/app/claimPages/claim-utils/claimProject.component.ts b/portal-2/src/app/claimPages/claim-utils/claimProject.component.ts
index 12ed103c..9a71f201 100644
--- a/portal-2/src/app/claimPages/claim-utils/claimProject.component.ts
+++ b/portal-2/src/app/claimPages/claim-utils/claimProject.component.ts
@@ -45,7 +45,7 @@ import {ClaimProject} from '../../utils/entities/claimEntities.class';
               </div>
             </form>
             <div class="suggestions" >
-                    <ul class="list-group"  >
+                    <ul class="uk-list"  >
                         <li  *ngFor=" let item of filteredList | async " class="list-group-item" >
                             <a (click)="select(item)"> {{(item.field[1]['@value'])?item.field[1]['@value']+" - ":""}} {{item.field[3]['@value']}}</a>
                         </li>
diff --git a/portal-2/src/app/claimPages/claim-utils/claimPublication.component.html b/portal-2/src/app/claimPages/claim-utils/claimPublication.component.html
index d1967261..c3891156 100644
--- a/portal-2/src/app/claimPages/claim-utils/claimPublication.component.html
+++ b/portal-2/src/app/claimPages/claim-utils/claimPublication.component.html
@@ -16,12 +16,12 @@
            <paging-no-load [currentPage]="crossrefPage" [totalResults]="crossrefResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"  (pageChange)="crossrefPageChange($event)"> </paging-no-load>
          </div>
          <div >
-           <ul *ngIf="crossrefResults.length > 0 "  class="list-group">
+           <ul *ngIf="crossrefResults.length > 0 "  class="uk-list">
               <li *ngFor=" let item of crossrefResults " [class]="(isSelected(item.DOI))?'list-group-item panel-footer':'list-group-item'">
                <div >
                 <a *ngIf="item.URL" target="_blank" href="{{item.URL}}" >{{item.title}}</a>
                 <span *ngIf="!item.URL" >{{item.title}}</span>
-                <span *ngIf="!isSelected(item.DOI)" (click)="add(item, item.DOI, 'crossref', 'publication', item.URL, item.title, item.created['date-time'],'OPEN')" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
+                <i *ngIf="!isSelected(item.DOI)" (click)="add(item, item.DOI, 'crossref', 'publication', item.URL, item.title, item.created['date-time'],'OPEN')" aria-hidden="true" class= "uk-icon-plus clickable">Add</i>
               </div>
               <span *ngIf="item.publisher" class="sub-title-elements">Publisher: {{item.publisher}}</span><span *ngIf="(item['published-print'] && item['published-print']['date-parts'] && item['published-print']['date-parts'][0])">({{(item['published-print']['date-parts'][0][0])?item['published-print']['date-parts'][0][0]:item['published-print']['date-parts'][0]}})</span>
               <div *ngIf="item.author" class="sub-title-elements">Authors: <span *ngFor="let author of item.author  let i = index">{{author.family}} {{author.given}}{{(i < (item.author.length-1))?"; ":""}}</span></div>
@@ -42,12 +42,12 @@
           <paging-no-load [currentPage]="openairePage" [totalResults]="openaireResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"  (pageChange)="openairePageChange($event)"> </paging-no-load>
         </div>
         <div >
-          <ul *ngIf="openaireResults.length > 0 "  class="list-group">
+          <ul *ngIf="openaireResults.length > 0 "  class="uk-list">
              <li *ngFor=" let result of openaireResults " [class]="(isSelected(result.id))?'list-group-item panel-footer':'list-group-item'">
               <div >
                <a *ngIf="result['title'].url" target="_blank" [href]="result['title'].url" >{{result['title'].name}}</a>
                <span *ngIf="!result['title'].url" >{{result['title'].name}}</span>
-               <span *ngIf="!isSelected(result.id)" (click)="add(result, result.id, 'openaire', 'publication', result['title'].url, result['title'].name, result.year,result['title'].accessMode)" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
+               <i *ngIf="!isSelected(result.id)" (click)="add(result, result.id, 'openaire', 'publication', result['title'].url, result['title'].name, result.year,result['title'].accessMode)" aria-hidden="true" class= "uk-icon-plus clickable">Add</i>
              </div>
              <span  *ngIf="result.publisher" class="sub-title-elements">Publisher: {{result.publisher}}</span><span *ngIf="(result.year)">({{result.year}})</span>
              <div *ngIf="result.authors" class="sub-title-elements">Authors: <span *ngFor="let author of result.authors let i = index">{{author.name}}{{(i < (result.authors.length-1))?"; ":""}}</span></div>
@@ -68,7 +68,7 @@
            <div class = "alert alert-warning " >  Not the right author? Choose one of these:
 
              <span class="dropdown">
-               <button  class=" btn btn-default dropdown-toggle" type= "button" data-toggle="dropdown" id="orcidDropDown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+               <button  class=" uk-button dropdown-toggle" type= "button" data-toggle="dropdown" id="orcidDropDown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  Selected: {{authorGivenName}} {{authorFamilyName}}
                </button>
                <ul class="dropdown-menu " aria-labelledby="orcidDropDown">
@@ -90,11 +90,11 @@
 
              </div>
                    <div >
-                    <ul *ngIf="orcidResultsNum >0  && orcidResultsToShow.length > 0 "  class="list-group">
+                    <ul *ngIf="orcidResultsNum >0  && orcidResultsToShow.length > 0 "  class="uk-list">
                        <li *ngFor=" let item of orcidResultsToShow "  [class]="(isSelected(authorId+'-'+item['put-code']))?'list-group-item panel-footer':'list-group-item'">
                          <div>
                           <span *ngIf="!item.URL" >{{item['work-title']['title'].value}}</span>
-                          <span *ngIf="!isSelected(authorId+item['put-code'])" (click)="add(item,authorId+'-'+item['put-code'],'orcid', 'publication', '', item['work-title']['title'].value, item['publication-date']?item['publication-date'].year.value :null,'OPEN')" aria-hidden="true" class= " btn glyphicon glyphicon-plus"></span>
+                          <i *ngIf="!isSelected(authorId+item['put-code'])" (click)="add(item,authorId+'-'+item['put-code'],'orcid', 'publication', '', item['work-title']['title'].value, item['publication-date']?item['publication-date'].year.value :null,'OPEN')" aria-hidden="true" class= " uk-icon-plus clickable">Add</i>
                         </div>
                         <span  *ngIf="item['journal-title'] && item['journal-title'].value " class="sub-title-elements">Journal: {{item['journal-title'].value}}</span><span *ngIf="(item['publication-date']&&item['publication-date'].year&&item['publication-date'].year.value)"> ({{item['publication-date'].year.value}})</span>
                         <div *ngIf="item.contributors" class="sub-title-elements">Authors: <span *ngFor="let author of item.contributors let i = index">{{author}}{{(i < (item.contributors.length-1))?"; ":""}}</span></div>
diff --git a/portal-2/src/app/claimPages/claim-utils/claimResult.component.ts b/portal-2/src/app/claimPages/claim-utils/claimResult.component.ts
index ae93b9d4..cdaadcf8 100644
--- a/portal-2/src/app/claimPages/claim-utils/claimResult.component.ts
+++ b/portal-2/src/app/claimPages/claim-utils/claimResult.component.ts
@@ -34,7 +34,7 @@ import {SearchDataciteService} from '../../services/searchDatacite.service';
           <input class=" form-control" [(ngModel)]="keyword" name="keyword"/>
 
           <span class="input-group-btn">
-            <button (click)="search()"  type="submit" class="btn btn-default">Search</button>
+            <button (click)="search()"  type="submit" class="uk-button">Search</button>
           </span>
         </div>
        </form>
diff --git a/portal-2/src/app/claimPages/claim-utils/claims.component.html b/portal-2/src/app/claimPages/claim-utils/claims.component.html
index 9e2ff205..7821944c 100644
--- a/portal-2/src/app/claimPages/claim-utils/claims.component.html
+++ b/portal-2/src/app/claimPages/claim-utils/claims.component.html
@@ -1,35 +1,21 @@
-<div class="container">
-<div class="row row-offcanvas row-offcanvas-right">
-  <div class="col-xs-12 col-sm-3">
-<div class="panel panel-default">
-  <!-- Default panel contents -->
-  <div class="panel-heading">Claims related to</div>
-  <!-- List group -->
-  <div class="panel-body">
-    <p>
-      <label> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()" /> Project </label>
-    </p>
-    <p>
-      <label> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" /> Publication </label>
-    </p>
-    <p>
-      <label> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()" /> Dataset </label>
-    </p>
-    <p>
-      <label> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  /> Context </label>
-    </p>
-    <p class="align-right">
-      <button  class="btn btn-primary"  (click)="clearFilters()">Clear filters</button>
-    </p>
-  </div>
-</div>
-</div>
 
-<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
+<form class="uk-form">
+
+  <fieldset data-uk-margin>
+    <legend>Filter By:</legend>
+    <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="inputkeyword"  (keyup)="changekeyword()" name="claims-keyword" >
+    <label> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()"  name="project"  /> Project </label>
+    <label> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" name="publication"  /> Publication </label>
+    <label> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()"  name="dataset"  /> Dataset </label>
+    <label> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  name="context"  /> Context </label>
+  </fieldset>
+
+</form>
+
 <h4 *ngIf="resultsNum>0" >Showing {{(size*page - size +1)}} to {{(size*page>resultsNum)?resultsNum:(size*page)}} of {{resultsNum}} claims</h4>
 <div *ngIf="resultsNum>size*page " class="text-right">
   <span class="dropdown">
-    Show <button class="btn btn-default dropdown-toggle" type="button" id="pagingDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    Show <button class="uk-button dropdown-toggle" type="button" id="pagingDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      {{size}}
       </button>
      <ul class="dropdown-menu" aria-labelledby="pagingDropdown">
@@ -59,20 +45,20 @@
   <div *ngIf="deleteMessage.length>0 " [innerHTML]="deleteMessage">
 
   </div>
-  <button class="btn btn-default" (click)="selectAll()">Select All</button> <button class="btn btn-default" (click)="deselectAll()">Deselect All</button> <button class="btn btn-default" (click)="confirmOpen()">Delete</button>
+  <button class="uk-button" (click)="selectAll()">Select All</button> <button class="uk-button" (click)="deselectAll()">Deselect All</button> <button class="uk-button" (click)="confirmOpen()">Delete</button>
 </div>
 <br>
-<div class="input-group col-lg-6">
+<!--div class="input-group col-lg-6">
   <span class="input-group-addon" id="sizing-addon2">Filter</span>
   <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="inputkeyword"  (keyup)="changekeyword()" >
-</div>
+</div-->
 
 <div *ngIf=" claims && claims.length == 0" >
   <div class = "alert alert-info " >No entries found.</div>
 </div>
 
 <div class="">
-<table *ngIf="claims && claims.length > 0" class="table table-striped">
+<table *ngIf="claims && claims.length > 0" class="uk-table uk-table-striped">
   <thead>
      <tr>
         <th *ngIf="enableDelete"></th>
@@ -97,9 +83,7 @@
      </tr>
   </tbody>
 </table>
-</div>
-</div>
-</div>
+ 
 <modal-alert (alertOutput)="confirmClose($event)">
 </modal-alert>
 <modal-loading [message]= "'Please wait...'"></modal-loading>
diff --git a/portal-2/src/app/claimPages/linking/selected/selected.component.ts b/portal-2/src/app/claimPages/linking/selected/selected.component.ts
index 50838e11..fc907da9 100644
--- a/portal-2/src/app/claimPages/linking/selected/selected.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selected.component.ts
@@ -10,7 +10,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
         <div   [class]="(showAccessRights== 'true' )?'col-sm-6':''" >
         <!-- Contexts -->
           <div   *ngIf=" !(inline  && hideType == 'context') && contexts"  class="concepts" >
-          <ul class="list-group">
+          <ul class="uk-list">
             <li class="list-group-item list-group-item-success">Selected Concepts  ({{(contexts.length)}})
                <span *ngIf=" !inline"  title="Add More Concepts" (click)="showType('context')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
             </li>
@@ -27,7 +27,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
         <div   [class]="(showAccessRights== 'true' )?'col-sm-6':''" >
           <!-- Projects -->
           <div   *ngIf=" !(inline  && hideType == 'project') && projects "  class="projects" >
-                <ul class="list-group">
+                <ul class="uk-list">
                 <li class="list-group-item list-group-item-info">Selected Projects  ({{(projects.length)}})
                    <span  *ngIf=" !inline " title="Add More Projects" (click)="showType('project')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
                 </li>
@@ -45,7 +45,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
       <!-- Results -->
 
         <div *ngIf=" !(inline && (hideType == 'publication' || hideType == 'dataset' )) && (datasets || publications)"  class="publications" >
-          <ul class="list-group">
+          <ul class="uk-list">
             <li class="list-group-item panel-footer "> Research Results ({{(datasets.length+publications.length)}})
                <span *ngIf=" !inline  && linkToResults "  title="Add More Research Results" (click)="showType('result')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
             </li>
@@ -60,7 +60,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
                 <span *ngIf="!pub.url" >{{pub.title}}</span><span *ngIf="pub.date" >({{pub.date.substring(0,4)}})</span>
               </span>
               <span *ngIf="showAccessRights== 'true'  && pub.source != 'openaire' " class="dropdown">
-                   <button class="btn btn-default dropdown-toggle" type="button" id="{{'dropdown'+pub.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                   <button class="uk-button dropdown-toggle" type="button" id="{{'dropdown'+pub.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{pub.accessRights}}
                     </button>
                    <ul class="dropdown-menu" [attr.aria-labelledby]="'dropdown'+pub.id">
@@ -69,7 +69,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
                    <input *ngIf="pub.accessRights== 'EMBARGO'" type="date" id="{{'date'+pub.id}}" name="" [min]="todayDate" (keyup)="dateChanged($event, pub)" [value]="pub.embargoEndDate">
               </span>
               <span *ngIf="showAccessRights== 'true'  && pub.source == 'openaire' " >
-                   <button class="btn btn-default disabled " type="button" >
+                   <button class="uk-button disabled " type="button" >
                    {{pub.accessRights}}
                     </button>
               </span>
@@ -86,7 +86,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
               <span *ngIf="dataset.date" >({{dataset.date.substring(0,4)}})</span>
               </span>
               <span  *ngIf="showAccessRights== 'true' && dataset.source != 'openaire'"  class="dropdown">
-                   <button class="btn btn-default dropdown-toggle" type="button" id="{{'dropdown'+dataset.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                   <button class="uk-button dropdown-toggle" type="button" id="{{'dropdown'+dataset.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{dataset.accessRights}}
                     </button>
                    <ul class="dropdown-menu" [attr.aria-labelledby]="'dropdown'+dataset.id">
@@ -95,7 +95,7 @@ import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/cl
                    <input *ngIf="dataset.accessRights== 'EMBARGO'" type="date" id="{{'date'+dataset.id}}" name="" [min]="todayDate" (keyup)="dateChanged($event,dataset)" [value]="dataset.embargoEndDate">
               </span>
               <span *ngIf="showAccessRights== 'true'  && dataset.source == 'openaire' "  >
-                   <button class="btn btn-default disabled " type="button" >
+                   <button class="uk-button disabled " type="button" >
                    {{dataset.accessRights}}
                     </button>
               </span>
diff --git a/portal-2/src/app/claimPages/linking/selected/selectedContexts.component.ts b/portal-2/src/app/claimPages/linking/selected/selectedContexts.component.ts
index 6ebbb1d2..3efe4d29 100644
--- a/portal-2/src/app/claimPages/linking/selected/selectedContexts.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selectedContexts.component.ts
@@ -7,7 +7,7 @@ import {ClaimContext} from '../../../utils/entities/claimEntities.class';
         <!-- Contexts -->
           <!--div   *ngIf=" !(inline  && hideType == 'context') && contexts"  class="concepts" -->
           <div>
-          <ul class="list-group">
+          <ul class="uk-list">
             <li class="list-group-item list-group-item-success">Selected Concepts  ({{(contexts.length)}})
                <span *ngIf=" !inline"  title="Add More Concepts" (click)="showType('context')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
             </li>
diff --git a/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts b/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts
index 978a6b98..eebd5aa3 100644
--- a/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts
@@ -17,7 +17,7 @@ import {ClaimResult} from '../../../utils/entities/claimEntities.class';
             </div>
             <div class = "col-md-4">
               <span  *ngIf="showAccessRights && dataset.source != 'openaire'"  class="dropdown">
-                   <button class="btn btn-default dropdown-toggle" type="button" id="{{'dropdown'+dataset.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                   <button class="uk-button dropdown-toggle" type="button" id="{{'dropdown'+dataset.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{dataset.accessRights}}
                     </button>
                    <ul class="dropdown-menu" [attr.aria-labelledby]="'dropdown'+dataset.id">
@@ -26,7 +26,7 @@ import {ClaimResult} from '../../../utils/entities/claimEntities.class';
                    <input *ngIf="dataset.accessRights== 'EMBARGO'" type="date" id="{{'date'+dataset.id}}" name="" [min]="todayDate" (keyup)="dateChanged($event,dataset)" [value]="dataset.embargoEndDate">
               </span>
               <span *ngIf="showAccessRights  && dataset.source == 'openaire' "  >
-                   <button class="btn btn-default disabled " type="button" >
+                   <button class="uk-button disabled " type="button" >
                    {{dataset.accessRights}}
                     </button>
               </span>
diff --git a/portal-2/src/app/claimPages/linking/selected/selectedProjects.component.ts b/portal-2/src/app/claimPages/linking/selected/selectedProjects.component.ts
index beca6da7..3f81538b 100644
--- a/portal-2/src/app/claimPages/linking/selected/selectedProjects.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selectedProjects.component.ts
@@ -7,7 +7,7 @@ import {ClaimProject} from '../../../utils/entities/claimEntities.class';
         <div>  <!-- [class]="componentClass" >
            Projects -->
           <div   *ngIf=" !(inline  && hideType == 'project') && projects.length > 0 "  class="projects" >
-                <ul class="list-group">
+                <ul class="uk-list">
                 <li class="list-group-item list-group-item-info">Selected Projects  ({{(projects.length)}})
                    <span  *ngIf=" !inline " title="Add More Projects" (click)="showType('project')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
                 </li>
diff --git a/portal-2/src/app/claimPages/linking/selected/selectedPublications.component.ts b/portal-2/src/app/claimPages/linking/selected/selectedPublications.component.ts
index 3747b737..4fe43a53 100644
--- a/portal-2/src/app/claimPages/linking/selected/selectedPublications.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selectedPublications.component.ts
@@ -16,7 +16,7 @@ import {ClaimResult} from '../../../utils/entities/claimEntities.class';
             </div>
             <div *ngIf="showAccessRights  && pub.source != 'openaire' "  class = "col-md-4">
               <span *ngIf="showAccessRights  && pub.source != 'openaire' " class="dropdown">
-                   <button class="btn btn-default dropdown-toggle" type="button" id="{{'dropdown'+pub.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                   <button class="uk-button dropdown-toggle" type="button" id="{{'dropdown'+pub.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{pub.accessRights}}
                     </button>
                    <ul class="dropdown-menu" [attr.aria-labelledby]="'dropdown'+pub.id">
@@ -28,7 +28,7 @@ import {ClaimResult} from '../../../utils/entities/claimEntities.class';
             </div>
             <div *ngIf="showAccessRights  && pub.source == 'openaire' "  class = "col-md-4">
               <span   >
-                   <button class="btn btn-default disabled " type="button" >
+                   <button class="uk-button disabled " type="button" >
                    {{pub.accessRights}}
                     </button>
               </span>
diff --git a/portal-2/src/app/claimPages/linking/selected/selectedResults.component.ts b/portal-2/src/app/claimPages/linking/selected/selectedResults.component.ts
index 944700a8..e917a3c8 100644
--- a/portal-2/src/app/claimPages/linking/selected/selectedResults.component.ts
+++ b/portal-2/src/app/claimPages/linking/selected/selectedResults.component.ts
@@ -9,7 +9,7 @@ import {ClaimResult} from '../../../utils/entities/claimEntities.class';
       <!-- Results -->
 
         <div *ngIf=" !(inline && (hideType == 'publication' || hideType == 'dataset' )) && (datasets.length > 0 || publications.length > 0)"  class="publications" >
-          <ul class="list-group">
+          <ul class="uk-list">
             <li class="list-group-item panel-footer "> Research Results ({{(datasets.length+publications.length)}})
                <span *ngIf=" !inline  && linkToResults "  title="Add More Research Results" (click)="showType('result')" aria-hidden="true" class="glyphicon glyphicon-plus "  style="float:right;cursor: pointer;"></span>
             </li>
diff --git a/portal-2/src/app/deposit/deposit.component.ts b/portal-2/src/app/deposit/deposit.component.ts
index 5c666ec6..aff93727 100644
--- a/portal-2/src/app/deposit/deposit.component.ts
+++ b/portal-2/src/app/deposit/deposit.component.ts
@@ -40,7 +40,7 @@ import {SearchOrganizationsService} from '../services/searchOrganizations.servic
                       [placeHolderMessage] = "'Search for Organizations'" [title] = "'Organizations'"  [multipleSelections]=false
                       (selectedValueChanged)="valueChanged($event)"    ></entities-autocomplete>
                     </div>
-                    <button class="btn btn-default" type="submit" (click)="organizationSelected(selectedId)" >Next</button>
+                    <button class="uk-button" type="submit" (click)="organizationSelected(selectedId)" >Next</button>
                   </div>
 
                 </form>
diff --git a/portal-2/src/app/home/home.component.ts b/portal-2/src/app/home/home.component.ts
index 34603340..ac94e55f 100644
--- a/portal-2/src/app/home/home.component.ts
+++ b/portal-2/src/app/home/home.component.ts
@@ -14,7 +14,7 @@ import {Location} from '@angular/common';
             <div class="input-group">
               <input #term type="text" class="form-control col-xs-5" placeholder="Search for..."  name="keyword" >
               <span class="input-group-btn">
-                <button class="btn btn-default" type="submit" (click)="searchTerm(term.value)" >GO</button>
+                <button class="uk-button" type="submit" (click)="searchTerm(term.value)" >GO</button>
               </span>
             </div>
           </div>
diff --git a/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html b/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html
index 2a26496f..31027cf9 100644
--- a/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html
+++ b/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html
@@ -45,7 +45,7 @@
             </div>
 
             <div class="col-xs-12 col-sm-3" *ngIf="dataProviderInfo != null">
-                <ul class="list-group">
+                <ul class="uk-list">
                     <li class="list-group-item">
                         Share - Bookmark
                     </li>
diff --git a/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts b/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts
index ca4457a9..edb51a37 100644
--- a/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts
+++ b/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts
@@ -19,7 +19,7 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
                 <a href="mailto:">Let us know how we are doing!</a>
             </p>
 
-            <table class="table table-striped">
+            <table class="uk-table uk-table-striped">
                 <thead>
                     <tr>
                         <th class="text-center">Data Provider Name</th>
diff --git a/portal-2/src/app/landingPages/dataset/dataset.component.html b/portal-2/src/app/landingPages/dataset/dataset.component.html
index 0a055602..7cb394de 100644
--- a/portal-2/src/app/landingPages/dataset/dataset.component.html
+++ b/portal-2/src/app/landingPages/dataset/dataset.component.html
@@ -103,7 +103,7 @@
                     </dl>
 
                     <table *ngIf="metrics != undefined && metrics.infos.size > 0"
-                            class="table table-striped">
+                            class="uk-table uk-table-striped">
                         <thead>
                             <tr>
                                 <th class="text-center">ID</th>
diff --git a/portal-2/src/app/landingPages/organization/organization.component.html b/portal-2/src/app/landingPages/organization/organization.component.html
index 0cc70327..5b8603c8 100644
--- a/portal-2/src/app/landingPages/organization/organization.component.html
+++ b/portal-2/src/app/landingPages/organization/organization.component.html
@@ -85,7 +85,7 @@
                                 </ul>
                             </div>
 
-                            <table class="table table-striped" *ngIf="organizationInfo.projects.size > 0">
+                            <table class="uk-table uk-table-striped" *ngIf="organizationInfo.projects.size > 0">
                                 <thead>
                                     <tr>
                                         <th class="text-center">Funder</th>
@@ -136,7 +136,7 @@
             </div>
 
             <div class="col-xs-12 col-sm-3" *ngIf="organizationInfo != null">
-                <ul class="list-group">
+                <ul class="uk-list">
                     <li class="list-group-item">
                         Share - Bookmark
                     </li>
diff --git a/portal-2/src/app/landingPages/person/person.component.html b/portal-2/src/app/landingPages/person/person.component.html
index 0084906b..78c7cfc1 100644
--- a/portal-2/src/app/landingPages/person/person.component.html
+++ b/portal-2/src/app/landingPages/person/person.component.html
@@ -76,7 +76,7 @@
             </div>
 
             <div class="col-xs-12 col-sm-3" *ngIf="personInfo != null">
-                <ul class="list-group">
+                <ul class="uk-list">
                     <li class="list-group-item">
                         Share - Bookmark
                     </li>
diff --git a/portal-2/src/app/landingPages/project/project.component.html b/portal-2/src/app/landingPages/project/project.component.html
index bfeb6000..89bf28da 100644
--- a/portal-2/src/app/landingPages/project/project.component.html
+++ b/portal-2/src/app/landingPages/project/project.component.html
@@ -141,7 +141,7 @@
             </div>
 
             <div class="col-xs-12 col-sm-3" *ngIf="projectInfo != null">
-                <ul class="list-group">
+                <ul class="uk-list">
                     <li class="list-group-item">
                         Share - Bookmark
                     </li>
diff --git a/portal-2/src/app/landingPages/publication/publication.component.html b/portal-2/src/app/landingPages/publication/publication.component.html
index 2257f2c5..6dcb5c12 100644
--- a/portal-2/src/app/landingPages/publication/publication.component.html
+++ b/portal-2/src/app/landingPages/publication/publication.component.html
@@ -181,7 +181,7 @@
                             The results below are discovered through our pilot algorithms.
                             <a href="mailto:">Let us know how we are doing!</a>
                         </p>
-                        <table id="bioentitiesTable" class="table table-striped">
+                        <table id="bioentitiesTable" class="uk-table uk-table-striped">
                             <thead>
                                 <tr>
                                     <th class="text-center">Bio Entity</th>
@@ -207,7 +207,7 @@
                             The results below are discovered through our pilot algorithms.
                             <a href="mailto:">Let us know how we are doing!</a>
                         </p>
-                        <table id="softwareTable" class="table table-striped">
+                        <table id="softwareTable" class="uk-table uk-table-striped">
                             <thead>
                                 <tr>
                                     <th class="text-center">Site Name</th>
@@ -233,7 +233,7 @@
                         </dl>
 
                         <table *ngIf="metrics != undefined && metrics.infos.size > 0"
-                                class="table table-striped">
+                                class="uk-table uk-table-striped">
                             <thead>
                                 <tr>
                                     <th class="text-center">ID</th>
diff --git a/portal-2/src/app/landingPages/tabTable.component.ts b/portal-2/src/app/landingPages/tabTable.component.ts
index e76f66c3..04ee9d7a 100644
--- a/portal-2/src/app/landingPages/tabTable.component.ts
+++ b/portal-2/src/app/landingPages/tabTable.component.ts
@@ -4,7 +4,7 @@ import {Component, Input} from '@angular/core';
 @Component({
     selector: 'tabTable',
     template: `
-        <table class="table table-striped">
+        <table class="uk-table uk-table-striped">
             <thead>
                 <tr>
                     <th>Title</th>
diff --git a/portal-2/src/app/searchAll/searchAll.component.ts b/portal-2/src/app/searchAll/searchAll.component.ts
index 31cd5cae..664f5f1b 100644
--- a/portal-2/src/app/searchAll/searchAll.component.ts
+++ b/portal-2/src/app/searchAll/searchAll.component.ts
@@ -15,13 +15,13 @@
 //
 //       <div  *ngIf="claim">
 //         <h3>Selected publications:</h3>
-//           <p *ngFor=" let item of selected "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> {{item.DOI}} --{{item.publisher}}  <button (click)="remove(item)"  type="button" class="btn btn-default">Remove</button></p>
+//           <p *ngFor=" let item of selected "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> {{item.DOI}} --{{item.publisher}}  <button (click)="remove(item)"  type="button" class="uk-button">Remove</button></p>
 //       </div>
 //
 //       <h1>Search</h1>
 //       <form>
 //         <input #term   [(ngModel)]="keyword" name= "searchAllTerm" />
-//         <button   (click)="search(keyword)"  type="submit" class="btn btn-default">Search</button>
+//         <button   (click)="search(keyword)"  type="submit" class="uk-button">Search</button>
 //         </form>
 //       <div>
 //         <div *ngIf="resultsNum != null && resultsNum > 0">
@@ -30,7 +30,7 @@
 //         </div>
 //         <div >
 //
-//             <p *ngFor=" let item of results "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> {{item.DOI}} --{{item.publisher}} <button *ngIf="claim" (click)="add(item)"  type="button" class="btn btn-default">Select</button> </p>
+//             <p *ngFor=" let item of results "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> {{item.DOI}} --{{item.publisher}} <button *ngIf="claim" (click)="add(item)"  type="button" class="uk-button">Select</button> </p>
 //
 //         </div>
 //       </div>
diff --git a/portal-2/src/app/searchPages/dataProviders/datasourceTableView.component.ts b/portal-2/src/app/searchPages/dataProviders/datasourceTableView.component.ts
index 06b4fc90..af525ec4 100644
--- a/portal-2/src/app/searchPages/dataProviders/datasourceTableView.component.ts
+++ b/portal-2/src/app/searchPages/dataProviders/datasourceTableView.component.ts
@@ -6,7 +6,7 @@ import {Component, Input, ViewChild} from '@angular/core';
     template: `
 
 
-    <table class="table table-striped">
+    <table class="uk-table uk-table-striped">
       <tr>
         <th>Name</th>
         <th>Type</th>
diff --git a/portal-2/src/app/searchPages/search.component.ts b/portal-2/src/app/searchPages/search.component.ts
index 079f39e1..bda9d16b 100644
--- a/portal-2/src/app/searchPages/search.component.ts
+++ b/portal-2/src/app/searchPages/search.component.ts
@@ -10,7 +10,7 @@ import {SearchCrossrefService} from '../services/searchCrossref.service';
       <p><i>Fetches from crossref </i></p>
       <form>
         <input #term   [(ngModel)]="keyword" name="keyword" />
-        <button (click)="search(term.value,10,1)"  type="submit" class="btn btn-default">Search</button>
+        <button (click)="search(term.value,10,1)"  type="submit" class="uk-button">Search</button>
       </form>
       <div>
         <div *ngIf="resultsNum != null && resultsNum > 0">
diff --git a/portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts b/portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts
index 3b747221..89bce8e3 100644
--- a/portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts
+++ b/portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts
@@ -12,7 +12,7 @@ import {Dates} from '../../utils/string-utils.class';
         <form class="">
             <div *ngFor="let selectedField of selectedFields; let i = index" class="form-group  form-inline">
                 <div *ngIf = "i != 0" class="input-group">
-                    <button  type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="true">
+                    <button  type="button" id="dropdownMenu1" data-toggle="dropdown" class="uk-button dropdown-toggle" aria-haspopup="true" aria-expanded="true">
                         {{selectedField.operatorId}}
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@@ -23,7 +23,7 @@ import {Dates} from '../../utils/string-utils.class';
                 </div>
                 <div class="input-group">
                     <div class="input-group-btn">
-                    <button  class="btn btn-default btn-disabled"  type="button">
+                    <button  class="uk-button btn-disabled"  type="button">
                         {{selectedField.name}}
                     </button>
                     </div>
@@ -62,7 +62,7 @@ import {Dates} from '../../utils/string-utils.class';
             <div  class="form-group  form-inline">
               <div class=" input-group">
                   <div class="input-group-btn">
-                    <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
+                    <button aria-expanded="false" aria-haspopup="true" class="uk-button dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
                       {{fieldIdsMap[newFieldId].name}}
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@@ -79,7 +79,7 @@ import {Dates} from '../../utils/string-utils.class';
 
 
 
-            <button (click)="queryChanged()"  type="submit" class="btn btn-default">Search</button>
+            <button (click)="queryChanged()"  type="submit" class="uk-button">Search</button>
         </form>
 
     `
diff --git a/portal-2/src/app/searchPages/searchUtils/searchForm.component.ts b/portal-2/src/app/searchPages/searchUtils/searchForm.component.ts
index bdc30320..3ddedc85 100644
--- a/portal-2/src/app/searchPages/searchUtils/searchForm.component.ts
+++ b/portal-2/src/app/searchPages/searchUtils/searchForm.component.ts
@@ -9,7 +9,7 @@ import {Observable}       from 'rxjs/Observable';
                 <!--span class="input-group-addon" id="sizing-addon2">Filter</span-->
                 <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >
                 <span class="input-group-btn">
-                    <button (click)="keywordChanged()"  type="submit" class="btn btn-default">Search</button>
+                    <button (click)="keywordChanged()"  type="submit" class="uk-button">Search</button>
                 </span>
             </div>
         </form>
diff --git a/portal-2/src/app/test/test.component.ts b/portal-2/src/app/test/test.component.ts
index cd185b88..79ecd56a 100644
--- a/portal-2/src/app/test/test.component.ts
+++ b/portal-2/src/app/test/test.component.ts
@@ -48,6 +48,610 @@ import {SearchFields} from '../utils/properties/searchFields';
                   type="submit" name="action">Login</button>
           </div>
       </div>
+
+      <div class="uk-margin">
+
+        <div class="uk-grid">
+            <div class="uk-width-1-1" data-uk-margin="">
+
+                <div class="uk-button-group">
+                    <button class="uk-button">Button</button>
+                    <div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
+                        <button class="uk-button"><i class="uk-icon-caret-down"></i></button>
+                        <div class="uk-dropdown uk-dropdown-width-2" aria-hidden="true">
+
+                            <div class="uk-grid uk-dropdown-grid">
+
+                                <div class="uk-width-1-2">
+                                    <ul class="uk-nav uk-nav-dropdown uk-panel">
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Separated item</a></li>
+                                        <li class="uk-parent">
+                                            <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                                    <ul>
+                                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <div class="uk-width-1-2">
+                                    <ul class="uk-nav uk-nav-dropdown uk-panel">
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Separated item</a></li>
+                                        <li class="uk-parent">
+                                            <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                                    <ul>
+                                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </div>
+
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-primary">Primary</button>
+                    <div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
+                        <button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
+                        <div class="uk-dropdown uk-dropdown-small" aria-hidden="true">
+                            <ul class="uk-nav uk-nav-dropdown">
+                                <li class="uk-nav-header">Header</li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li class="uk-nav-divider"></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Separated item</a></li>
+                                <li class="uk-parent">
+                                    <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                    <ul class="uk-nav-sub">
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                            <ul>
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-success">Success</button>
+                    <div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
+                        <button class="uk-button uk-button-success"><i class="uk-icon-caret-down"></i></button>
+                        <div class="uk-dropdown" aria-hidden="true">
+                            <ul class="uk-nav uk-nav-dropdown">
+                                <li class="uk-nav-header">Header</li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li class="uk-nav-divider"></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Separated item</a></li>
+                                <li class="uk-parent">
+                                    <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                    <ul class="uk-nav-sub">
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                            <ul>
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-danger">Danger</button>
+                    <div data-uk-dropdown="{mode:'click'}">
+                        <button class="uk-button uk-button-danger"><i class="uk-icon-caret-down"></i></button>
+                        <div class="uk-dropdown">
+                            <ul class="uk-nav uk-nav-dropdown">
+                                <li class="uk-nav-header">Header</li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                                <li class="uk-nav-divider"></li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Separated item</a></li>
+                                <li class="uk-parent">
+                                    <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                    <ul class="uk-nav-sub">
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                            <ul>
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="uk-button" disabled="">Disabled</button>
+                <button class="uk-button" data-uk-tooltip="" title="Bazinga!">Tooltip</button>
+                <button class="uk-button" data-uk-modal="{target:'#modal-1'}">Modal</button>
+                <button class="uk-button uk-margin-small-top" data-uk-offcanvas="{target:'#offcanvas-1'}">Off-canvas</button>
+                <button class="uk-button uk-button-link uk-margin-small-top">Button link</button>
+
+            </div>
+        </div>
+
+        <hr class="uk-grid-divider">
+
+        <div class="uk-grid" data-uk-grid-margin="">
+
+            <div class="uk-width-medium-1-2 uk-row-first">
+
+                <div class="uk-grid" data-uk-grid-margin="">
+
+                    <div class="uk-width-1-1 uk-row-first">
+                        <ul class="uk-breadcrumb">
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Home</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Blog</a></li>
+                            <li><span>Category</span></li>
+                            <li class="uk-active"><span>Post</span></li>
+                        </ul>
+                    </div>
+
+                    <div class="uk-width-1-1 uk-grid-margin uk-row-first">
+
+                        <article class="uk-article">
+
+                            <h1 class="uk-article-title">Article title</h1>
+
+                            <p class="uk-article-meta">Written by Super User on 12 April. Posted in Blog</p>
+
+                            <div class="uk-grid" data-uk-grid-margin="">
+                                <div class="uk-width-medium-1-2 uk-row-first">
+                                    <a class="uk-thumbnail uk-overlay-hover" href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">
+                                        <div class="uk-overlay">
+                                            <img src="/themes/joomla/2015/bento/images/yootheme/uikit_placeholder.svg" alt="" width="300" height="90">
+                                            <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
+                                        </div>
+                                        <div class="uk-thumbnail-caption">Caption</div>
+                                    </a>
+                                </div>
+
+                                <div class="uk-width-medium-1-2">
+                                    <a class="uk-thumbnail uk-overlay-hover" href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">
+                                        <div class="uk-overlay">
+                                            <img src="/themes/joomla/2015/bento/images/yootheme/uikit_placeholder.svg" alt="" width="300" height="90">
+                                            <div class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-overlay-fade">Caption</div>
+                                        </div>
+                                    <div class="uk-thumbnail-caption">Caption</div>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <p class="uk-article-lead">Lorem ipsum dolor sit amet.</p>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                            <pre><code>&lt;div class="myclass"&gt;...&lt;/div&gt;</code></pre>
+                            <hr class="uk-article-divider">
+                            <div class="uk-grid" data-uk-grid-margin="">
+
+                                <div class="uk-width-medium-1-5 uk-row-first">
+                                    <span class="uk-text-muted">text-muted</span><br>
+                                    <span class="uk-text-primary">text-primary</span><br>
+                                    <span class="uk-text-success">text-success</span><br>
+                                    <span class="uk-text-warning">text-warning</span><br>
+                                    <span class="uk-text-danger">text-danger</span>
+                                </div>
+
+                                <div class="uk-width-medium-3-10">
+                                    <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">a element</a><br>
+                                    <em>em element</em><br>
+                                    <strong>strong</strong><br>
+                                    <code>code element</code><br>
+                                    <del>del element</del>
+                                </div>
+
+                                <div class="uk-width-medium-2-5">
+                                    <ins>ins element</ins><br>
+                                    <mark>mark element</mark><br>
+                                    <q>q <q>inside</q> a q element </q><br>
+                                    <abbr title="Abbreviation Element">abbr element</abbr><br>
+                                    <dfn title="Defines a definition term">dfn element</dfn>
+                                </div>
+
+                                <div class="uk-width-1-1 uk-grid-margin uk-row-first">
+                                    <p class="uk-text-center">
+                                        <span class="uk-badge">Badge</span>
+                                        <span class="uk-badge uk-badge-notification">1</span>
+                                        <span class="uk-badge uk-badge-success">Success</span>
+                                        <span class="uk-badge uk-badge-success uk-badge-notification">4</span>
+                                        <span class="uk-badge uk-badge-warning">Warning</span>
+                                        <span class="uk-badge uk-badge-warning uk-badge-notification">3</span>
+                                        <span class="uk-badge uk-badge-danger">Danger</span>
+                                        <span class="uk-badge uk-badge-danger uk-badge-notification">4</span>
+                                    </p>
+                                </div>
+
+                                <div class="uk-width-medium-1-2 uk-grid-margin uk-row-first">
+                                    <h1 class="uk-display-inline">h1</h1>
+                                    <h2 class="uk-display-inline">h2</h2>
+                                    <h3 class="uk-display-inline">h3</h3>
+                                    <h4 class="uk-display-inline">h4</h4>
+                                    <h5 class="uk-display-inline">h5</h5>
+                                    <h6 class="uk-display-inline">h6</h6>
+                                </div>
+
+                                <div class="uk-width-medium-1-2 uk-grid-margin">
+                                    <blockquote>
+                                        <p> Lorem ipsum dolor.</p>
+                                        <small>Someone famous</small>
+                                    </blockquote>
+                                </div>
+
+                            </div>
+
+                        </article>
+
+                    </div>
+
+                    <div class="uk-width-1-1 uk-grid-margin uk-row-first">
+                        <ul class="uk-comment-list">
+                            <li>
+                                <article class="uk-comment">
+                                    <header class="uk-comment-header">
+                                        <img class="uk-comment-avatar" src="/themes/joomla/2015/bento/images/yootheme/uikit_avatar.svg" alt="" width="50" height="50">
+                                        <h4 class="uk-comment-title">Author</h4>
+                                        <p class="uk-comment-meta">May 2, 2090 at 1:55 pm</p>
+                                    </header>
+                                    <div class="uk-comment-body">
+                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
+                                    </div>
+                                </article>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="uk-width-1-1 uk-grid-margin uk-row-first">
+                        <ul class="uk-pagination">
+                            <li class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
+                            <li class="uk-active"><span>1</span></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">2</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">3</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">4</a></li>
+                            <li><span>...</span></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">20</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#"><i class="uk-icon-angle-double-right"></i></a></li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="uk-width-medium-1-2">
+
+                <div class="uk-grid" data-uk-grid-margin="">
+
+                    <div class="uk-width-medium-1-2 uk-row-first">
+
+                        <div class="uk-panel">
+                            <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="">
+                                <li class="uk-nav-header">Header</li>
+                                <li class="uk-nav-divider"></li>
+                                <li class="uk-active"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Active</a></li>
+                                <li class="uk-parent" aria-expanded="false">
+                                    <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                                    <div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul class="uk-nav-sub" role="menu">
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                        <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                            <ul>
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul></div>
+                                </li>
+                                <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                            </ul>
+                        </div>
+
+                        <div class="uk-panel uk-panel-divider">
+                            <h3 class="uk-panel-title">Divider</h3>
+                            Lorem ipsum <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">dolor</a> sit amet, consectetur adipisicing elit.
+                        </div>
+
+                        <div class="uk-panel uk-panel-header">
+                            <h3 class="uk-panel-title">Header</h3>
+                            Lorem ipsum <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">dolor</a> sit amet, consectetur adipisicing elit.
+                        </div>
+
+                    </div>
+
+                    <div class="uk-width-medium-1-2">
+
+                        <div class="uk-panel uk-panel-box">
+                            <h3 class="uk-panel-title">Box</h3>
+                            Lorem ipsum <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">dolor</a> sit amet, consectetur adipisicing elit.
+                        </div>
+
+                        <div class="uk-panel uk-panel-box uk-panel-box-primary">
+                            <h3 class="uk-panel-title">Box primary</h3>
+                            Lorem ipsum <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">dolor</a> sit amet, consectetur adipisicing elit.
+                        </div>
+
+                        <div class="uk-panel uk-panel-box uk-panel-box-secondary">
+                            <h3 class="uk-panel-title">Box secondary</h3>
+                            Lorem ipsum <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">dolor</a> sit amet, consectetur adipisicing elit.
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div class="uk-grid" data-uk-grid-margin="">
+
+                    <div class="uk-width-1-2 uk-row-first">
+                        <div class="uk-alert" data-uk-alert="">
+                            <a class="uk-alert-close uk-close"></a>
+                            <p>Info message</p>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2">
+                        <div class="uk-alert uk-alert-success" data-uk-alert="">
+                            <a class="uk-alert-close uk-close"></a>
+                            <p>Success message</p>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin uk-row-first">
+                        <div class="uk-alert uk-alert-warning" data-uk-alert="">
+                            <a class="uk-alert-close uk-close"></a>
+                            <p>Warning message</p>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin">
+                        <div class="uk-alert uk-alert-danger" data-uk-alert="">
+                            <a class="uk-alert-close uk-close"></a>
+                            <p>Danger message</p>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin uk-row-first">
+                        <div class="uk-progress">
+                            <div class="uk-progress-bar" style="width: 55%;">55%</div>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin">
+                        <div class="uk-progress uk-progress-success">
+                            <div class="uk-progress-bar" style="width: 55%;">55%</div>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin uk-row-first">
+                        <div class="uk-progress uk-progress-warning">
+                            <div class="uk-progress-bar" style="width: 55%;">55%</div>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-grid-margin">
+                        <div class="uk-progress uk-progress-danger">
+                            <div class="uk-progress-bar" style="width: 55%;">55%</div>
+                        </div>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-form uk-grid-margin uk-row-first">
+                        <fieldset>
+                            <legend>Form states</legend>
+                            <div class="uk-form-row">
+                                <input placeholder="Text Input" class="uk-width-1-1" type="text">
+                            </div>
+                            <div class="uk-form-row">
+                                <input placeholder="form-success" value="form-success" class="uk-width-1-1 uk-form-success" type="text">
+                            </div>
+                            <div class="uk-form-row">
+                                <input placeholder="form-danger" value="form-danger" class="uk-width-1-1 uk-form-danger" type="text">
+                            </div>
+                            <div class="uk-form-row">
+                                <input placeholder="form disabled" class="uk-width-1-1" disabled="" type="text">
+                            </div>
+                        </fieldset>
+                    </div>
+
+                    <div class="uk-width-1-2 uk-form uk-grid-margin">
+                        <fieldset>
+                            <legend>Form styles</legend>
+                            <div class="uk-form-row">
+                                <input placeholder="form-large" class="uk-form-large uk-form-width-small" type="text">
+                                <button class="uk-button uk-button-large" type="reset">Large</button>
+                            </div>
+                            <div class="uk-form-row">
+                                <input placeholder="form-small" class="uk-form-small uk-form-width-small" type="text">
+                                <button class="uk-button uk-button-small" type="reset">Small</button>
+                            </div>
+                            <div class="uk-form-row">
+                                <input placeholder="form-blank" class="uk-form-width-small uk-form-blank" type="text">
+                                <button class="uk-button uk-button-mini" type="reset">Mini</button>
+                            </div>
+                        </fieldset>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <hr class="uk-grid-divider">
+
+        <div class="uk-grid" data-uk-grid-margin="">
+
+            <div class="uk-width-medium-1-4 uk-row-first">
+
+                <ul class="uk-subnav uk-subnav-line">
+                    <li class="uk-active"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Active</a></li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                    <li class="uk-disabled"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Disabled</a></li>
+                </ul>
+
+            </div>
+            <div class="uk-width-medium-1-4">
+
+                <ul class="uk-subnav uk-subnav-pill">
+                    <li class="uk-active"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Active</a></li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                    <li class="uk-disabled"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Disabled</a></li>
+                </ul>
+
+            </div>
+            <div class="uk-width-medium-1-4">
+
+                <ul class="uk-tab" data-uk-tab="">
+                    <li class="uk-active"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Active</a></li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                    <li class="uk-disabled"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Disabled</a></li>
+                <li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Active</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li></ul>
+
+            </div>
+            <div class="uk-width-medium-1-4">
+
+                <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#" class="uk-icon-button uk-icon-github"></a>
+                <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#" class="uk-icon-button uk-icon-twitter"></a>
+                <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#" class="uk-icon-button uk-icon-dribbble"></a>
+                <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#" class="uk-icon-button uk-icon-html5"></a>
+
+            </div>
+        </div>
+
+        <hr class="uk-grid-divider">
+
+        <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
+            <div class="uk-width-medium-1-4 uk-row-first">
+
+                <ul class="uk-list uk-list-line">
+                    <li>List item 1</li>
+                    <li>List item 2</li>
+                    <li>List item 3</li>
+                </ul>
+
+            </div>
+
+            <div class="uk-width-medium-1-4">
+
+                <ul class="uk-list uk-list-striped">
+                    <li>List item 1</li>
+                    <li>List item 2</li>
+                    <li>List item 3</li>
+                </ul>
+
+            </div>
+            <div class="uk-width-medium-1-4">
+
+                <table class="uk-table uk-table-striped uk-table-condensed uk-table-hover">
+                    <caption>Table caption</caption>
+                    <thead>
+                        <tr>
+                            <th>Table</th>
+                            <th>Heading</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Table</td>
+                            <td>Data</td>
+                        </tr>
+                        <tr>
+                            <td>Table</td>
+                            <td>Data</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+            </div>
+            <div class="uk-width-medium-1-4">
+
+                <dl class="uk-description-list uk-description-list-line">
+                    <dt>Description lists</dt>
+                    <dd>Description text.</dd>
+                    <dt>Description lists</dt>
+                    <dd>Description text.</dd>
+                </dl>
+
+            </div>
+        </div>
+
+        <div id="offcanvas-1" class="uk-offcanvas">
+            <div class="uk-offcanvas-bar">
+
+                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="">
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+                    <li class="uk-active"><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Active</a></li>
+
+                    <li class="uk-parent" aria-expanded="false">
+                        <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                        <div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul class="uk-nav-sub" role="menu">
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a>
+                                <ul>
+                                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                                </ul>
+                            </li>
+                        </ul></div>
+                    </li>
+
+                    <li class="uk-parent" aria-expanded="false">
+                        <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Parent</a>
+                        <div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul class="uk-nav-sub" role="menu">
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                            <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Sub item</a></li>
+                        </ul></div>
+                    </li>
+
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">Item</a></li>
+
+                    <li class="uk-nav-header">Header</li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#"><i class="uk-icon-star"></i> Item</a></li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#"><i class="uk-icon-twitter"></i> Item</a></li>
+                    <li class="uk-nav-divider"></li>
+                    <li><a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#"><i class="uk-icon-rss"></i> Item</a></li>
+                </ul>
+
+                <div class="uk-panel">
+                    <h3 class="uk-panel-title">Title</h3>
+                    Lorem ipsum dolor sit amet, <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">consetetur</a> sadipscing elitr.
+                </div>
+
+                <div class="uk-panel">
+                    <h3 class="uk-panel-title">Title</h3>
+                    Lorem ipsum dolor sit amet, <a href="https://demo.yootheme.com/themes/joomla/2015/bento/index.php/features/uikit?&amp;style=default#">consetetur</a> sadipscing elitr.
+                </div>
+
+            </div>
+        </div>
+
+        <div id="modal-1" class="uk-modal">
+            <div class="uk-modal-dialog">
+                <button type="button" class="uk-modal-close uk-close"></button>
+                <h1>Headline</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+        </div> 		</div>
 `
 
 })
diff --git a/portal-2/src/app/utils/entitiesAutoComplete.component.ts b/portal-2/src/app/utils/entitiesAutoComplete.component.ts
index ab43ab8f..deda35b2 100644
--- a/portal-2/src/app/utils/entitiesAutoComplete.component.ts
+++ b/portal-2/src/app/utils/entitiesAutoComplete.component.ts
@@ -24,7 +24,7 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
           <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control  " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search()   >
           <div *ngIf = "keyword != null && keyword.length > 0  " class="suggestions" >
                 <div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert">Loading...  <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
-                <ul class="list-group" >
+                <ul class="uk-list" >
                     <!--li  *ngIf = "numFilteredResults > 0 " class="list-group-item"  >
                         Select:
                     </li-->
diff --git a/portal-2/src/app/utils/pagingFormatter.component.ts b/portal-2/src/app/utils/pagingFormatter.component.ts
index b418768d..94dcc661 100644
--- a/portal-2/src/app/utils/pagingFormatter.component.ts
+++ b/portal-2/src/app/utils/pagingFormatter.component.ts
@@ -6,8 +6,10 @@ import {DomSanitizer} from '@angular/platform-browser';
 @Component({
   selector: 'paging',
   template: `
+
+ 
   <div *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " >
-  <ul class="pagination pagination-sm">
+  <ul class="uk-pagination">
 
   <li *ngIf=" currentPage  > 1" ><a [href]="onPage((1))" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span></a></li>
@@ -15,7 +17,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 
    <li *ngIf=" currentPage -2 > 0"><a [href]="onPage((currentPage -2))">{{currentPage -2}}</a></li>
    <li *ngIf=" currentPage -1 > 0 "><a [href]="onPage((currentPage -1))">{{currentPage -1}}</a></li>
-   <li class="active"><a >{{currentPage}}</a></li>
+   <li class="uk-active"><a >{{currentPage}}</a></li>
    <li *ngIf=" currentPage +1 <= getTotalPages() "><a [href]="onPage((currentPage +1))">{{currentPage +1}}</a></li>
    <li *ngIf=" currentPage +2 <= getTotalPages() "><a [href]="onPage((currentPage +2))">{{currentPage +2}}</a></li>
    <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a [href]="onPage((currentPage +3))">{{currentPage +3}}</a></li>
diff --git a/portal-2/src/app/utils/pagingFormatterNoLoad.component.ts b/portal-2/src/app/utils/pagingFormatterNoLoad.component.ts
index 016d394b..90a5696e 100644
--- a/portal-2/src/app/utils/pagingFormatterNoLoad.component.ts
+++ b/portal-2/src/app/utils/pagingFormatterNoLoad.component.ts
@@ -7,13 +7,13 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
   selector: 'paging-no-load',
   template: `
   <div *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " >
-  <ul class="pagination pagination-sm">
+  <ul class="uk-pagination">
 
    <li *ngIf=" currentPage  > 1" ><a (click)="onPage((1))" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span></a></li>
    <li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
    <li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
-   <li class="active"><a >{{currentPage}}</a></li>
+   <li class="uk-active"><a >{{currentPage}}</a></li>
    <li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{currentPage +1}}</a></li>
    <li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
    <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
diff --git a/portal-2/src/app/utils/staticAutoComplete.component.ts b/portal-2/src/app/utils/staticAutoComplete.component.ts
index b5fb075b..c55c240d 100644
--- a/portal-2/src/app/utils/staticAutoComplete.component.ts
+++ b/portal-2/src/app/utils/staticAutoComplete.component.ts
@@ -21,7 +21,7 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
           </div>
           <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control  " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter()   >
           <div class="suggestions" *ngIf="filtered.length > 0">
-                <ul class="list-group" >
+                <ul class="uk-list" >
                     <li  class="list-group-item"  >
                         Select:
                     </li>
diff --git a/portal-2/src/index.html b/portal-2/src/index.html
index 93526ad8..c1c9c6b5 100644
--- a/portal-2/src/index.html
+++ b/portal-2/src/index.html
@@ -13,20 +13,15 @@
       <meta name="description" content="open access infrastructure, research information, open data, scientific publication, scientific information system, European Commission, EC, FP7, ERC, Horizon 2020, H2020, linked data" />
       <title>OpenAIRE</title>
       <link href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
-      <link href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/components/com_jevents/assets/css/jevcustom.css?3.4.5" rel="stylesheet" type="text/css" />
       <link href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/css/theme.css" rel="stylesheet" type="text/css" id="theme-style-css" />
       <link href="//fonts.googleapis.com/css?family=Josefin+Sans%7CRoboto%7COpen+Sans+Condensed%7CAdvent+Pro" rel="stylesheet" type="text/css" id="google-fonts-css" />
-      <link href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/widgetkit/wk-styles-994eec94.css" rel="stylesheet" type="text/css" id="wk-styles-css" />
       <style type="text/css">
          #mailto2ce-modal-window-709581649 .modal-body{overflow-y:hidden;padding:3px}#mailto2ce-modal-window-709581649 iframe{border:0;max-height:400px}
       </style>
       <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/jquery.min.js" type="text/javascript"></script>
-      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
+      <!--script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
       <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
-      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
-      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/modules/mod_news_pro_gk5/interface/scripts/engine.jquery.js" type="text/javascript"></script>
-      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/plugins/system/jcemediabox/js/jcemediabox.js?2ee2100a9127451a41de5a4c2c62e127" type="text/javascript"></script>
-      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/com_acymailing/js/acymailing_module.js?v=490" type="text/javascript"></script>
+      <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/media/jui/js/bootstrap.min.js" type="text/javascript"></script!-->
       <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/assets/uikit/js/uikit.min.js" type="text/javascript"></script>
       <script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/js/theme.js" type="text/javascript"></script>
 
@@ -54,6 +49,24 @@
          }
       </script>
       <!-- End of Google sitelinks search markup-->
+      <style>
+      .custom-hidden-dropdown-menu {position:static !important;}
+      .searchFilterBox .values {overflow:auto; max-height:200px; }
+      .selected-filters-box {margin:5px; background-color:#F8F8F8; }
+      .search-form {margin:5px;  }
+      .clickable { cursor:pointer; }
+
+      .OPEN {
+          background: rgba(0, 0, 0, 0) url("/assets/openAccess.png") no-repeat scroll right center;
+          padding-right: 18px;
+      }
+
+      .EMBARGO, .CLOSED, .RESTRICTED {
+          background: rgba(0, 0, 0, 0) url("/assets/closedAccess.png") no-repeat scroll right center;
+          padding-right: 18px;
+      }
+    </style>
+
    </head>
    <body class="">
       <script async src="/main.bundle.js"></script>