Overview
Elephant is a front-end template created to help you develop modern web applications, fast and in a professional manner. Built on top of Bootstrap, it includes a large collection of HTML, CSS, and JS components that is simple to use and easy to customise.
The file structure in the Elephant is similar to the HTML5 Boilerplate file structure, where the intention is for developers not to have problems and not waste time by trying to decrypt the fantasy, which is brought to you when buying a new product.
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.css files 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.
- Any SCSS file created by the developer during application development is compiled and a compressed version is automatically made.
- Any JS file created by the developer during application development is compiled with Babel and a compressed version is automatically made.
- The expanded version of CSS and JS files will be replaced with the compressed version, from all the HTML files.
- 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)
- Every HTML file will be validated.
- Every image found in the img/ folder will be compressed.
- Every SVG file found in the img/ folder will be compressed.
- In the root the file app-name-vx.xx.zip will be created containing all the files in the dist/ folder.
