Reverse Engineering / Customizing Meteor LocalMarket example app

Question

I want to reverse engineer the Meteor example app "LocalMarket" and make something with a similar design for a different niche. The problem I'm having is I almost don't even know where to begin, for changing the navigation.

According to the official Meteor tutorial, when we create our meteor app it creates a folder with a .js file, an .html file, a .css file, and a .meteor folder.

But the LocalMarket app has the .meteor folder and then several other folders:

client, cordova-build-override, lib, public, resources, server.

There's also a mobile-config javascript file and a readme doc.

I (sort of) don't understand why there are separate folders for client and server and so many different style sheets. But that's kind of beside the point.

Long story short (and you have to run the app with Meteor to see what I mean for this question): I want to change the navigation text, icons, and links: Home, What's Cooking, Recipes, Bookmarks, About, while keeping that awesome menu style and probably just modifying the existing pages to avoid having to rename everything. Though if you have suggestions for easily renaming the pages I'm all for it.

In templates\\app-body.html it looks like the menu structure is defined. For example

<a href="{{pathFor 'about'}}" class="{{activePage 'about'}}">
        <span class="wrapper-menu-item">
          <span class="icon-question"></span>
          <span class="title-menu">About</span>
        </span>
      </a>

links to the Bookmarks page.

But I am not finding the styling for any of the classes listed, except in a "merged-stylesheets.css" document in .meteor\\local\\build\\programs.

Is it okay to modify merged-stylesheets.css though? I thought the .meteor folder was not for app developers to modify. Am I wrong about that?

I do see the classes in there, ie:

icon-question:before {
  content: "\e613";   

but I am not finding that "e613" reference anywhere.

Any insight on changing out the navigation icons, text, and links for the different pages in the LocalMarket example app based on the specific issues I've mentioned, would be appreciated.

Any ways to change the page titles, and change everything app-wide to reflect that, without fatally destroying the new app, would be super appreciated.

I see how to modify the content on the pages. That looks pretty straightforward.

A way to change the displayed titles of the pages without changing their classes/ functional references to them in other app files, would help too.

Thanks very much!

Answer 1

There are many questions in there, hopefully we can answer most of them.

1. Stuff in /server is only visible server-side.
2. Stuff in /client is only visible on the client.
3. Stuff in other top level directories (and their subdirectories) is visible to both server and client
4. Stuff under .meteor should not be changed. That's where all your packages end up
5. It sounds like the style sheet for the example is part of a package. That means you shouldn't edit it directly but should instead override the styles you need to change in your own .css file that you create under /client . Your style sheet(s) will load after any package style sheets which means your styles will win.
6. It also sounds like one of the packages installs its own icons, hence the "\\e613" You can install your own icons too using (for example) fontello
7. I don't know where the page titles are set in that example. There's probably a head.html file with a <title> tag or it could be set in the router.