Elephant – Dashboard and Admin Site Responsive Template

Grunt, Bower, Sass for Professionals

Elephant is downloadable in two forms, within which you’ll find the source code and compiled files. The file structure in the Elephant is similar to the HTML5 Boilerplatefile structure.

elephant.js and elephant.css files contain the latest version of Bootstrap and all extensions made specifically for the Elephant. Whereas vendor.js and vendor.cssfiles contain all the packages that were installed by Bower such as jquery, chart.js, animation.css, etc. In addition, any additional package that you will install during application development through Bower will automatically merge with other packages and will be contained in these two files. In order for you to have the latest version of the packages, run the bower update and grunt build command and in folder dist/you will have updated version of these files.

Over the years many developers have come up with their way of developing applications, and they expect from Elephant to be able to customise it to their needs, by changing the variables, excluding components, etc. After customization run the grunt build command and the new version with modifications will automatically be compiled under the folder /dist.

However, there is also a multitude of other developers who prefer tools such as Yeoman, and expect from such a product far more than the basics. To all these developers the Elephant offers functionality similar to the webapp generator made by Yeoman but with some additional actions.

If such a developer is developing a web application with the Elephant, he may then create html files in the root directory or structure them into folders depending on preference.

To be more productive while working it is enough to execute the command grunt server which results in activating the Static File Server where every change made in the files is reflected automatically in real time to the browser, after having configured the option for livereload as well as browser synchronisation.

After development is completed, execute the command grunt build and all the necessary distribution files will automatically be created under the folder /dist.

But this is not all.

1. Any SCSS file created by the developer during application development is compiled and a compressed version is automatically made.
2. Any JS file created by the developer during application development is compiled with Babel and a compressed version is automatically made.
3. The expanded version of CSS and JS files will be replaced with the compressed version, from all the HTML files.
4. The whole code will be cleaned by removing unnecessary white spaces, empty attributes, etc., and every HTML file will be formatted with 2 spaces for each indent level. (Please see our HTML code)
5. Every HTML file will be validated.
6. Every image found in the img/ folder will be compressed.
7. Every SVG file found in the img/ folder will be compressed.
8. In the root the file app-name-vx.xx.zip will be created containing all the files in the dist/ folder.