Approved

Layout Template

  • Responsive Design - elements on page should shrink/adjust as the screen size is reduced
  • Required: Header - white background with NOCTI logo in navy
  • Required: Navbar - contains navigation links + other misc links
  • Optional: Footer - contains links to policies and company social media
  • Optional: Sidebar - contains navigation links in addition to (or in lieu of) the top navbar.
    • This should only be used as part of a layout for navigational purposes (not for lists/menus specific to certain pages).
    • In other words, if a sidebar is used it should appear on every standard page.
  • Page Content
    • If sidebar is used, content should always be top+left aligned
    • If sidebar is not used, content should be top+left aligned within a .container (i.e., has padding on left and right sides for XL screen sizes)
    • If sidebar is not used, content should be top+left aligned within a .container-fluid if the page specifically requires full screen (no padding on left/right, even for XL screen sizes)
    • Example of full screen pages:
      • Complex pages
      • Tables with a lot of columns
      • Html reports
400px
100%

    
<!DOCTYPE html>
<html lang='en' class='custom-scrollbar'>

<body class='has-nav-logo-and-navbar'>
    <nav class='navbar navbar-logo fixed-top'>
        <span class='sidebar-toggle d-md-none mr-3'>
            <i class='fas fa-bars fa-2x'></i>
            <span class='small d-block'>Menu</span>
        </span>
        <a href='/'>
            <img src='https://styleguide.nocti.org/img/logos/NOCTI-Navy.png' />
        </a>
        </nav>

        <nav class='navbar navbar-dark fixed-top'>
            <a href='/' class='navbar-brand'>
                Style Guide
            </a>
            <ul class='navbar-nav ml-auto'>
                <li class='nav-item'>
                    <a class='nav-link' href='#'>Nav 1</a>
                </li>
                <li class='nav-item'>
                    <a class='nav-link' href='#'>Nav 2</a>
                </li>
            </ul>
        </nav>

        <main class='has-sidebar'>
            <div class='sidebar'>
                <ul>
                    <li class='nav-item'>
                        <a class='nav-link'>Sidebar 1</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link'>Sidebar 2</a>
                    </li>
                </ul>
            </div>
            <div class='main-container'>

                <!-- Page Content Goes Here -->

            </div>
        </main>

        <footer class='footer'>
            <div class='container-fluid'>
                <div class='row'>
                    <div class='col'>Left Footer</div>
                    <div class='col text-right'>Right Footer</div>
                </div>
            </div>
        </footer>

    </body>
    </html>