Layout
The main layout is defined in file imports/templates/common/layout.html
<template name="layout">
<div class="wrapper">
<!-- top navbar-->
{{> topnavbar }}
<!-- sidebar-->
{{> sidebar }}
<!-- offsidebar-->
{{> offsidebar}}
<!-- Main section-->
<section class="section-container">
<!-- Page content-->
<div class="content-wrapper">
{{> yield }}
</div>
</section>
<!-- Page footer-->
{{> footer }}
</div>
{{> yield region="bodyChild" }}
</template>
The yield region="bodyChild" is used to inject from any template a portion of markup directly outside the main wrapper. This is used for modals.
Horizontal layout
This layout is defined in file import/templates/common/layout.horizontal.html
This layout can be enabled using the route configuration like follows
Router.map(function() {
this.route('dashboardh', function() {
this.layout('layouth');
this.render('dashboardh');
});
});
Pages layout
This a full page layout used mainly for login, register, lock and recover views and is defined in file imports/templates/common/layout-pages.html
This layout can be enabled using the route configuration like follows
Router.map(function() {
this.route('login', function() {
this.render('login');
this.layout('layoutPages');
});
...
Styles
All styles are based on SCSS as a preprocessor and all files can be found under imports/styles folder
The main two files that imports the entire application are both are included in file imports/startup/client/index.js
bootstrap.scss
app.scss
Themes
Themes can be easily added directly into the file app.scss at the bottom in order to override default colors
Available options
@import "themes/theme-a.scss"
@import "themes/theme-b.scss"
@import "themes/theme-c.scss"
@import "themes/theme-d.scss"
@import "themes/theme-e.scss"
@import "themes/theme-f.scss"
@import "themes/theme-g.scss"
@import "themes/theme-h.scss"
Theme selector
The themes selector used in the right sidebar (offsidebar) uses a custom plugin. This plugin looks for an attribute to receive the path to a css stylesheet to be injected into the head section of the page.
In the demo, we link to the files under the /public/themes folder which contains the predefined theme colors already compiled in order to inject directly into the browser.
<label data-load-css="themes/theme-a.css">
Note that referencing SCSS files will not work in this case.
If you plan to use only one theme, use the above approach @importing the theme-*.scss directly into app.scss
Scripts
Scripts are divided into Template scripts and Global scripts
Global scripts are located under folder imports/scripts/modules and all of them contains functions that can be used across the entire application. Most of them are initialization functions that must be called to attach a behavior to certain elements. For example
import initSlimsSroll from '/imports/scripts/modules/slimscroll.js';
initSlimsSroll();
Template scripts are used to load a JavaScript every time a view is rendered. All this files can be found under the client/templates folder and they are named with the same name used for the view that affects.
This script uses the rendered event provided by meteor Templates object.
Template.blogArticleView.onRendered(function() {
// Chosen select
if ($.fn.chosen)
$('.chosen-select').chosen();
// Wysiwyg editor
if ($.fn.wysiwyg)
$('.wysiwyg').wysiwyg();
})
Vendor
All third party plugins are manage via npm using the package.json included in the root folder of the project.
Then, necessary files are imported in file imports/startup/client/vendor.js you can add edit or remove path from there in order to customize the necessary vendor assets for your project.
About Rickshaw
There's a known issue related with the standard minify system of Meteor and rickshaw. The plugin requires to ignore the name change (mangle) of a variable ($super), this can not be configured in Meteor but is possible to use another technique to load rickshaw outside the meteor minifier system.
The solution used for the issue mentioned is to place rickshaw.js under folder /public/rickshaw and then load it using jQuery. This code is present in file imports/templates/views/charts/rickshaw.js
// when template is ready, load rickshaw
Template.chartRickshaw.onRendered(LoadRickshaw);
// when rickshaw was loaded, start the plugin
function LoadRickshaw() {
$.getScript('rickshaw/rickshaw.js', StartRickshawCharts);
}
function StartRickshawCharts() { ... }
Styles are still loaded globally in imports/startup/client/vendor.js Rickshaw also requires d3, which is included in the template using the atmosphere package d3js:d3
New vendor assets
To add new third party assets, you can install using npm:
npm install something -S
- Flag "-S" is to save the dependency in package.json
Edit imports/startup/client/vendor.js and add the paths of files you want to use
Note that you don't need to specify the node_modules folder
import 'something';
// or
import 'something/some/file.css';
import 'something/some/file.js';
Modernizr
Modernizr build is generated after the command npm install ends. Specifically, using the postinstall script in package.json which at the same time executes the "modernizr" scripts responsible for generating the file modernizr.js under folder public/
The configuration of the Modernizr build can be found in file modernizr-config.json
Public assets
All public assets like fonts, images, etc should be placed under the public folder. Any file under this folder is served like if it was under the root folder so for example, to serve an image you don't need to add public to the paths, just used the form
<img src="img/bg1.jpg" alt="" class="img-thumbnail img-responsive" />
Translation
Translation system uses the package tap:i18n
This package is configured using a file in the root folder of the project with the following information
{
"helper_name": "_",
"supported_languages": null,
"i18n_files_route": "/localize/i18n/",
"cdn_path": null
}
The files used for translation are placed in folder localize/i18n
To include a translated text in the markup you need to reference the json path for the string using the "helper_name" indicated in the configuration file (in this case the underscore) and a Blaze template expression. For example
<small>{{_"dashboard.WELCOME"}}</small>
This nonresponse to a JSON configuration like follows
{
"dashboard": {
"WELCOME": "Welcome to Angle !"
},
....
}
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.