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.
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.