Elephant is a front-end template created that can assist you develop fashionable net functions, quick and in knowledgeable method. Constructed on prime of Bootstrap, it contains a big assortment of HTML, CSS, and JS parts that’s easy to make use of and straightforward to customize.
The file construction within the Elephant is just like the HTML5 Boilerplate file construction, the place the intention is for builders to not have issues and never waste time by making an attempt to decrypt the fantasy, which is dropped at you when shopping for a brand new product.
elephant.js and elephant.css recordsdata comprise the most recent model of Bootstrap and all extensions made particularly for the Elephant. Whereas vendor.js and vendor.css recordsdata comprise all of the packages that have been put in by Bower resembling jquery, chart.js, animation.css, and many others. As well as, any further bundle that you’ll set up throughout utility growth via Bower will routinely merge with different packages and shall be contained in these two recordsdata. So as so that you can have the most recent model of the packages, run the bower replace and grunt construct command and in folder dist/ you’ll have up to date model of those recordsdata.
Over time many builders have provide you with their method of growing functions, they usually count on from Elephant to have the ability to customise it to their wants, by altering the variables, excluding parts, and many others. After customization run the grunt construct command and the brand new model with modifications will routinely be compiled underneath the folder /dist.
Nevertheless, there may be additionally a mess of different builders preferring instruments resembling Yeoman, and count on from such a product way over the fundamentals. To all these builders the Elephant affords performance just like the webapp generator made by Yeoman however with some further actions.
If such a developer is growing an internet utility with the Elephant, he might then create html recordsdata within the root listing or construction them into folders relying on choice.
To be extra productive whereas working it is sufficient to execute the command grunt server which ends up in activating the Static File Server the place each change made within the recordsdata is mirrored routinely in actual time to the browser, after having configured the choice for livereload in addition to browser synchronisation.
After growth is accomplished, execute the command grunt construct and all the mandatory distribution recordsdata will routinely be created underneath the folder /dist.
However this isn’t all.
- Any SCSS file created by the developer throughout utility growth is compiled and a compressed model is routinely made.
- Any JS file created by the developer throughout utility growth is compiled with Babel and a compressed model is routinely made.
- The expanded model of CSS and JS recordsdata shall be changed with the compressed model, from all of the HTML recordsdata.
- The entire code shall be cleaned by eradicating pointless white areas, empty attributes, and many others., and each HTML file shall be formatted with 2 areas for every indent stage. (Please see our HTML code)
- Each HTML file shall be validated.
- Each picture discovered within the img/ folder shall be compressed.
- Each SVG file discovered within the img/ folder shall be compressed.
- Within the root the file app-name-vx.xx.zip shall be created containing all of the recordsdata within the dist/ folder.