/ aurelia

AdminLTE With Aurelia

One of the first things I had to get working on my last Aurelia project was a nice clean UI. I know, the navigation starter template comes with Bootstrap, but I needed something more. I needed something that looked nice and I needed it fast. After trying to get various Bootstrap themes working in Aurelia, I was having little success. A lot of themes are structured in a way that don't fit the way Aurelia works (given enough time you could probably get any theme working with it, but like I said, I needed something quick).

Then, I came across the AdminLTE theme. It looks great, it's well documented and seems to be quite active. So I went about implementing it with Aurelia and it turned out to be pretty simple to do. It's really just a matter of using JSPM to get the theme and adding it to your app. Let's take a look.

Get The Theme

AdminLTE is not in the JSPM repository, at least not when I tried to get it, but that's not a problem. We can use JSPM to get it from GitHub. Inside your Aurelia root directory, issue the following command in a terminal:

jspm install -y github:almasaeed2010/AdminLTE

That will go and grab the AdminLTE theme and add it to your JSPM packages.

Add The Theme and JS

In your app.js file, add the following import statement:

import AdminLTE from 'almasaeed2010/AdminLTE@2.3.2';

And then, add the CSS to your app.html file.

<require from="../jspm_packages/github/almasaeed2010/AdminLTE@2.3.2/dist/css/AdminLTE.min.css"></require> <require from="../jspm_packages/github/almasaeed2010/AdminLTE@2.3.2/dist/css/skins/skin-blue.min.css"></require>

Remove any bootstrap imports and CSS from the original navigation template in app.js and app.html and you should see your nice shiny AdminLTE theme in Aurelia. I wrote some of this from memory so let me know if I got anything wrong in the comments.