Contents
What’s great about Boomerang is that you have everything you need in one place. It is very simple and easy to understand. All styles, images, javascript and other third-party plugins are stored within the assets folder, while the page templates are stored within the pages folder.
Page templates
pages is where all HTML pages are stored. Use any of these to start building your website. Everything is exactly as see in the live preview.
Each page is named after its purpose so it can be easy for you to find the one you need. You can open it directly in your browser or your favorite editor to modify its contents.
Assets
assets contains all of the assets that will be used in the html pages, from CSS and JS to images and third party plugins. Below we will explain more in detail what each one does.
Folder Structure
Documentation/
HTML/
├── assets/
│ ├── bundles/
│ ├── css/
│ ├── fonts/
│ ├── images/
│ ├── js/
│ ├── ├── Page/
│ ├── plugins/
│ ├── sass/
├── Pages/
Grunt Installation
Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.
Installing Grunt: Run npm install grunt --save-dev
command from your teminal to install grunt within your project.
Grunt Sass: Run grunt sass
command from your project directory. It will compile SASS to CSS for the project. This will read the file `assets/scss/filename.scss` and output a plain-css file to `/assets/css/filename.css`.
Grunt JSHint: Run grunt jshint
command from your project directory. It will checks all *.js files under `assetsjs/filename` for common syntax or coding errors using the JSHint utility.
Grunt Sprite: Run grunt sprite
command from your project directory.
Further help: To get more help on the grunt checkout Grunt
Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `assets/js/filename` and outputs `assets/js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.
SCSS
assets/scss contains all of raw source files that are used to create the final CSS that is included in the theme. The SCSS is structured as follows:
bootstrap
contains all the source files included in the official Bootstrap package (4.0.0). This way, you will use a single unified stylesheet that contains all styles. We will update it as long as Bootstrap releases new versions.mixins
contains overriden or new mixins used for grouping CSS declarations for reuse throughout our theme.utilities
contains all the source files responsable for spacing, fonts, colors and other quick modifier classes that can be used within our theme._variables.scss
contains all SCSS variables used to override default values that Bootstrap provides._custom.scss
is a file specially created for you, the user, in order to override SCSS variables and styles or add new ones.theme.scss
unifies all the components, utilities and mixins that are compiled in a single file that will be used as a stylesheet within our theme.
CSS
assets/css contains the minified and uncompressed CSS resulted from the SCSS files, including Bootstrap.
main.css
JS
assets/js contains all of the assets referenced in the html pages.
bootstrap
contains all the javascript files included in the official Bootstrap package (4.0.0). We will update it as long as Bootstrap releases new versions.theme.js
contains all the custom plugins and additional scripts included in Boomerang.
Vendor
assets/vendor contains all of the third party plugins used in the entire project. You can see what we used in the dedicated page for plugins.