AURORA TEMPLATE

AURORA is an administrator template/skin. it is a static html template purely to focus on the style, widgets, plugins and responsive design. Designed using jQuery and Bootstrap, every input type has been overriden to provide beautiful styled widgets to streamline the user experience and make inputting data simpler.

LIVE DEMO

This is still in development, so some pages are missing and widgets may not load correctly

Charts.js

Using Charts.js to create HTML5 canvas charts, these charts are fully responsive and look professional, as the browser windows changes the chart will resize while keeping its aspect ratio intact, so the graph will not strech or warp, it will just become bigger or smaller. To setup the chart all you do is provide the data as a JSON object and the chart is rendered from that, the axis sizes are determined using the highest point of the data rounded up. The colors and point sizers are already globally set in the Aurora theme.

Form inputs

The additional form inputs are all custom designed. The checkbox and radio box inputs are purely designed in CSS, it uses the CSS :after selector to create style over the top of the traditional input box, however when the user clicks the :after element it will trigger the click on the checkbox making it still functional, using the CSS :checked selector to style it on change works flawlessly, same applies for the radio box.

The Toggle switches are more adanved. it uses a custom jQuery library to create new elements over the top of the checkbox, it allow the user to "swipe" the toggle to the over side. this works on mobile as well to act just like toggle swithes found on mobile operating system. however for processing you just treat it like a checkbox input.

The date and time pickers are custom built libraries. using Moment.js to handle the date information, full responsive design, it provides a date picker for a day, a month picker and a time picker in 12 Hour format.

The range sliders use a custom jQuery library similar to the toggle switches, just they are 100% width and allow you to do step increments. the underlying input is a range type. it is then hidden and overriden with a CSS slider. this also can be dragged on a mobile device.