Skip to content

Instantly share code, notes, and snippets.

@kingluddite
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kingluddite/3b145e0502fd8c2b42f0 to your computer and use it in GitHub Desktop.
Save kingluddite/3b145e0502fd8c2b42f0 to your computer and use it in GitHub Desktop.
3 files to create your meteor app's main layout
<template name="layout">
<div class="container">
<header class="navbar">
{{> Menu}}
</header>
<div id="main" class="row-fluid">
{{> yield}}
</div>
</div>
</template>
<head>
<title>My Full Blown App</title>
</head>
<template name="Menu">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'Home'}}">Home</a></li>
<li><a href="{{pathFor 'Projects'}}">Projects</a></li>
<li><a href="{{pathFor 'About'}}">About</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</template>
@kingluddite
Copy link
Author

/client/main.html
Here we set up our basic layout. Directly inside the client directory, we drop main.html with is just a head and a title. One of the great things of meteor is you don't need the doctype or worry about adding link tags pointing to css or script tags point to js files. Meteor takes care of all that stuff at run time.

/client/views/common/layout.html
Next we deal with our basic layout for our site. Router.js is point to this file. We pull in Menu using {{> Menu}}. Notice the capitalization of 'Menu'. I use this so I know that this will be a template (it links to menu.html with a template named 'Menu'.

client/views/common/menu.html
Here is our basic nav. The main thing to point out is how we make our links work. We use handlebars {{pathFor and points to the name of the template.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment