1 Layout

The general layout and structure of this website: header, body and main content, and footer. Each section/module will have it's own style elsewhere.

Most of our Layout is controlled by Twitter Bootstrap responsive framework: http://getbootstrap.com/

1.1 Header

The header of the website contains branding info, navigational links, and gives the user a "Home" to always return to on the site. The header will be styled in a way to promote the Numenta/NuPIC branding. We will use a fixed-position header, always at top of client window.

Our header is instance of the Bootstrap NavBar component: http://getbootstrap.com/components/#navbar

This is a bare Header
 <header>This is a bare Header</header>

1.2 Content

This is the main content of the webpage, sandwiched between Header and Footer, wrapping a <main> article which contains <section>s. Each <section> has a white or lighter background color to ensure a global default-like user experience. The bottom of each <section> has a small color-gradient transition with a CSS-down arrow to keep the eye moving down the page to the next section.

This is a bare main content section
 <main>
   <section>
     This is a bare main content section
   </section>
   <div class="arrow-down"></div>
 </main>

1.3 Footer

The footer restates everything in the Header, but in a simple and condensed manner. It is mostly for navigation after the user is finished reading the document. It also contains legalese and copyright information.

This is a bare Footer
 <footer>This is a bare Footer</footer>