Site Structure

With so many files in the theme, it can be hard to know how the site should look in the end. Here is the typical HTML structure of the rendered site using ignition. This will help later on as you use the site and may need to adjust things.

<!doctype html class="js">
<html lang="en">
<head>
 ...
</head>
<body>
    <div class="site-container">

        <div id="panel-left"></div>
        <div id="panel-right"></div>

        <div id="page" class="site">

            <div class="site-top">...</div>

            <div class="site-content">...</div>

            <footer class="site-footer">...</footer>

        </div><!-- /#page -->

    </div><!-- /.site-container -->
</body>
</html>

The site is split into three parts where you will place content. #panel-left, #panel-right, and #page.
Here is what this looks like once rendered:

Site Structure

Breaking it Down

The entire site is contained within .site-container. Inside that, there are three main areas where your content will go (#panel-left, #panel-right, #page). Everything on the site should probably reside in one of those divs. The main one however is #page which holds the main site. The panels are used as sidebars.

Your main menu will be inside .site-top by default. Below that would be the content for the entire page. Then comes the footer.

Panels

Sometimes you will have content that resides in special panels on the left and right of the main site. By default, these panels are hidden when empty. You can make use of them at any time. For instance the main menu gets moved from .site-top into the left panel once the site gets too narrow. All this is customizable and can easily be changed within the files.

You can also place content in the right panel, like a sidebar. You can choose to have the sidebar hidden until the sidebar button is clicked, or have it open all the time.

For instance, this documentation page has content in the left panel even on desktop. The panels allow for all different sort of layouts, from dashboard looking sites, to sidebars and more. And pushing content between panels, or anywhere for that matter is extremely easy as will be discussed under the javascript section.

#Page

As stated, the #page id holds the main centered part of the site and is set to make sure the footer at the bottom is stuck to the bottom even on a page with little content. Inside the #page lives the main parts of the site.

Most of the main content will reside in .site-content within #page. Here your posts and pages will get output along with any other info you plan on showing. Ignition was made for WordPress and breaks content into parts for easy access and changes. Most of the content is controlled via the folder template-parts. Here is where the bulk of your coding will take place.