06 Theme structure - pimmey/nana-docs GitHub Wiki

Code structure

The theme is using the following structure:

<!DOCTYPE html>
<html>
    <head>
        <!-- meta information, stylesheets, icons, title -->
    </head>
    <body>
        <!-- remaining web-site: nav, sections, modals and footer -->
        <!-- scripts go after the main container and just before the closing body tag -->
    </body>
</html>

DOCTYPE and html tag

<!DOCTYPE html> is a way to declare your file as HTML5 and <html> is the root of your document.

head

The head tag includes a lot of important tags, like:

The HTML element represents any metadata information that cannot be represented by one of the other HTML meta-related elements
The stylesheets of Pace and Materialize libraries, as well as Linea icons stylesheet and the main stylesheet
Special tags to add favicons to the site
The <title> tag

body

Body includes all of your site elements, like navigation, sections, modals and footer. This element is also required to have a data-hsb attribute with 3 numeric values separated by spaces in order for the animated background to work. This will actually be the background-color as well as a starting point for all of the circles' background colours. You can use any of the colour pickers to convert HEX or any other colour value to HSB, e.g. http://rgb.to.

Navigation

This template's navigation bar has the following structure:

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col s12 l6">
                        <!-- Brand-->
                        <a class="brand-logo" href="#/">Nana</a>

                        <!-- Menu button visible on tablet and mobile-->
                        <span class="right show-on-medium-and-down hide-on-large-only">
                            <a id="sidenav-toggle" href="#" data-activates="slide-out" class="sidenav-toggle">Menu</a>
                        </span>
                    </div>
                    <div class="col s12 l6">
                        <!-- Desktop menu version-->
                        <ul class="right hide-on-med-and-down">
                            <li>
                                <a href="#services">Services</a>
                            </li>
                            ...
                        </ul>

                        <!-- Tablet and mobile menu-->
                        <ul id="slide-out" class="side-nav">
                            <li>
                                <a href="#services">Services</a>
                            </li>
                            ...
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

Sections

All sections should have an id corresponding to the href in the nav in order for the Scrollspy to work. You also need the .scrollspy class.

Services

We've created a useful mapping for the Linea icons.

Price box

<div class="price-box">
    <h4><sup>$</sup><span class="price">19</span></h4>
    <ul class="flow-text">
        <li>5 users<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="The number of allowed users">?</span></li>
        <li>Automation<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="Involves Gulp commands">?</span></li>
        <li>Validation</li>
        <li>Linting</li>
    </ul>
</div>

FAQ accordion

<ul data-collapsible="accordion" class="collapsible flow-text">
    <li>
        <div class="collapsible-header active">— Is the starter pack really free?</div>
        <div class="collapsible-body">
            <p>A cattle she’d creepeth. That light make. Void two they’re, can’t us don’t creepeth. Fruitful there herb from signs she’d created whales them. Lights which face. Divided they’re first. Dry wherein own itself green it.</p>
        </div>
    </li>
    ...
</ul>