Don of the Day

Don of the Day


Adventures in software development with Xamarin and the Web

Software developer, building things with code in sunny Scottsdale, AZ.

Share


Twitter


AdminLTE With Aurelia

Don FitzsimmonsDon Fitzsimmons

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.

Software developer, building things with code in sunny Scottsdale, AZ.

Comments