Structure

Folders and files

File pack consists for Meteor is located under Homer_Full_Version_Meteor folder. Project structure presents as below.

Homer/
    ├── .meteor/
    ├── client/
    ├──── config/
    ├──── startup/
    ├──── stylesheets/
    ├──── templates/
    ├──── vendor/
    ├── public/
    ├── server/
    ├── node_modules/
    ├── README.md

Source code of your app are located in app folder with structure:

First run

To run Meteor version you will need Meteor package installed. Please go to Meteor website to install package for your system: https://www.meteor.com/install
Before you run Homer please be sure that you can create and run sample Meteor app: https://www.meteor.com/try Please be sure that you don't have any error while runing sample Meteor app.

If everything work well please go to Homer_Full_Version_Meteor (Homer Meteor folder) and run meteor command

meteor

Next open your web browser and go to.

http://localhost:3000

And after that you will see the app running. If you have any problem on this stage feel free to write to us on support@webapplayers and we will try to help.

Layout structure

Main layout file are created with few main elements:

1. {{> header}} top header.
2. {{> navigaion}} left sidebar navigation.
3. {{> yield}} main container for page elements.
4. {{> rightSidebar}} additional right sidebar.
5. {{> footer}} bottom footer.

Layout structure - file

This is example of basic layout structure.

<template name="layout">

    <!-- Splash screen -->
    {{>splash }}

    <!-- Header -->
    {{> header }}

    <!-- Navigation -->
    {{> navigation }}

    <!-- Main Wrapper -->
    <div id="wrapper">
        {{> yield}}

        <!-- Right sidebar -->
        {{> rightSidebar }}

        <!-- Footer -->
        {{> footer }}


    </div>

</template>

Option - fixed sidebar

Fixed sidebar is a (left menu) sidebar that is sticked on screen.

To add fixed sidebar you need to add .fixed-sidebar class to body. In client->templates->layouts->layout.js file you can see a comment // FIXED SIDEBAR. To add fixed sidebar you just need to uncomment this code:

$('body').addClass('fixed-sidebar');

Option - fixed navbar

Fixed navbar is a top navbar that is sticked on screen.

To add fixed sidebar you need to add .fixed-navbar class to body. In client->templates->layouts->layout.js file you can see a comment // FIXED NAVBAR. To add fixed sidebar you just need to uncomment this code:

$('body').addClass('fixed-navbar');

Common templates and pages

Main layout use common templates like navigation, header, yield. All common templates you can find under client->templates->common

Each page in Meteor is a template. All pages/templates you can find at client->templates->views folder.

Homer/
    ├── analytics
    ├── appviews
    ├── charts
    ├── commonviews
    ├── dashboards
    ├── forms
    ├── gridsystem
    ├── interface
    ├── landing
    ├── tables
    ├── transitions
    ├── widgets

Each page has also own pageHeader template - it is a heading bar with breadcrumb

It is added to view as a {{> pageHeader}}

{{> pageHeader title="Panels design" desc="Many panels design give you many possibilities." category="Interface" }}
    

And the structure of it is:

<template name="pageHeader">

    <div class="normalheader transition {{#if small}} small-header {{/if}}">
        <div class="hpanel">
            <div class="panel-body">
                <a class="small-header-action">
                    <div class="clip-header">
                        <i class="fa fa-arrow-up"></i>
                    </div>
                </a>

                <div id="hbreadcrumb" class="pull-right m-t-lg">
                    <ol class="hbreadcrumb breadcrumb">
                        <li><a href="{{pathFor route='dashboard'}}">Home</a></li>
                        <li>
                            <span>{{category}}</span>
                        </li>
                        <li class="active">
                            <span>{{title}}</span>
                        </li>
                    </ol>
                </div>
                <h2 class="font-light m-b-xs">
                    {{title}}
                </h2>
                <small>{{desc}}</small>
            </div>
        </div>
    </div>

</template>
    

Page Script

Meteor has own build and injection system. So you don't need to worry about adding a script. In client->vendor folder are all files for plugins. They are automatically added by Meteor to your app.

Route config

To manage all route we use great plugin iron-router https://github.com/iron-meteor/iron-router. It allows you to organize the parts of your interface into a templates.

Below you can see example of configuration routes. Configuration routing are in client->config->router.js

//
// Analytics route
//

Router.route('/analytics', function () {
    this.render('analytics');
});

//
// Interface route
//

Router.route('/panels', function () {
    this.render('panels');
});

Router.route('/typography', function () {
    this.render('typography');

.....
// Other routes

Panel building

Homer template are mainly build by panels (bootstrap panel). We add special custom block helper to simplify new pages with panels.

To add new panel that has title, tools (collapse, remove) and footer all you need to do is to use #panel helper like this:

{{#panel title="Title example" footer="Footer example" }}

    // Your panel body

{{/panel}}

And the structure of panel look like this: (client->templates->common->panel.html)

<template name="panel">

    <div class="hpanel {{color}} {{panelClass}}">
        {{#if title}}
            <div class="panel-heading {{#if built}} hbuilt {{/if}}">
                {{> panelTools }}
                {{title}}
            </div>
        {{/if}}
        <div class="panel-body {{bodyClass}}">
            {{> Template.contentBlock}}
        </div>
        {{#if footer }}
            <div class="panel-footer">
                {{#if footerRight}}
                    <span class="pull-right">
                        {{footerRight}}
                    </span>
                {{/if}}
                {{footer}}
            </div>
        {{/if}}
    </div>

</template>

In Homer you can find many example using panel block.