Page

Design

Page is the surface that defines the interactive space and contains the global elements that are: the layout, the header, the footer, and the content.

Code

API: stable
As this is a whole-viewport pattern, to see the variations you need to view the Page demonstration.

Page layout

The overall page layout is set by the base class ace-page on the BODY, plus optional modifiers (fluid is the default if no modifier is set):


                            <body class="ace-page ace-page-fluid">
                            </body>
                            <body class="ace-page ace-page-fixed">
                            </body>
                            <body class="ace-page ace-page-hybrid">
                            </body>
                            <body class="ace-page ace-page-popup">
                            </body>

To ensure Page works on mobiles, include the viewport meta tag in the HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1" />

The pattern continues with a page wrapper, header, content and footer element. The #hidden div provides a location for content which should never be visible, for example script elements.


                            <body class="ace-page">
                                  <div id="page">
                                        <header id="header" role="banner">
                                          <!-- Header goes here-->
                                        </header>
                                        <main id="content" role="main">
                                          <!-- Content goes here-->
                                        </main>
                                        <footer id="footer" role="contentinfo">
                                          <!-- Footer goes here-->
                                        </footer>
                                  </div>
                                  <div id="hidden">
                                    <!-- Hidden content like scripts goes here-->
                                  </div>
                            </body>

Header

Refer to the Header documentation for full details.

Content

Content has the optional pattern to set up content with a sidebar:


                            <div class="ace-group ace-page-content">
                                  <div class="ace-item ace-page-content-sidebar">
                                    <p>Sidebar</p>
                                  </div>
                                  <div class="ace-item ace-page-content-content">
                                    <h1>Content</h1>
                                    <p>Your masterpiece begins here.</p>
                                  </div>
                            </div>

To set up a simple footer with right-aligned content:


                            <div class="ace-footer">
                              <div class="ace-footer-content">
                                <p>ACE &copy; ansarada</p>
                              </div>
                            </div>

Putting it together


                            <div id="page">
                                  <header id="header" role="banner">
                                        <div class="ace-header ace-group ace-group-split">
                                              <div class="ace-item ace-header-logo"><img src="filename.ext" alt="Descriptive text" />
                                              </div>
                                              <div class="ace-item ace-header-main">
                                                <h1>ACE</h1>
                                              </div>
                                              <div class="ace-item ace-header-controls">
                                                <ul>
                                                  <li>Control</li>
                                                  <li>Control</li>
                                                </ul>
                                              </div>
                                        </div>
                                  </header>
                                  <main id="content" role="main">
                                        <div class="ace-group ace-page-content">
                                              <div class="ace-item ace-page-content-sidebar">
                                                <p>Sidebar</p>
                                              </div>
                                              <div class="ace-item ace-page-content-content">
                                                <h1>Content</h1>
                                                <p>Your masterpiece begins here.</p>
                                              </div>
                                        </div>
                                  </main>
                                  <footer id="footer" role="contentinfo">
                                        <div class="ace-footer">
                                          <div class="ace-footer-content">
                                            <p>ACE &copy; ansarada</p>
                                          </div>
                                        </div>
                                  </footer>
                            </div>
                            <div id="hidden">
                            </div>
The popup pattern is deprecated. New popups should not be created; existing popups should be migrated to use Dialogs instead. The popup pattern will be removed in a future version of ACE. 

                        <body class="ace-page ace-page-popup">
                              <div id="page">
                                    <header id="header" role="banner">
                                      <h1>Header Text</h1>
                                    </header>
                                    <main id="content" role="main">
                                          <div class="ace-group ace-page-content">
                                                <div class="ace-item ace-page-content-content">
                                                  <p>Content</p>
                                                </div>
                                          </div>
                                    </main>
                                    <footer id="footer" role="contentinfo">
                                          <button class="ace-button" id="printButton" type="button"><span>Print</span></button>
                                          <button class="ace-button ace-button-icon ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-close">close</span></span></button>
                                    </footer>
                              </div>
                              <div id="hidden">
                              </div>
                        </body>
The popupwith form pattern is deprecated. New popups should not be created; existing popups should be migrated to use Dialogs instead. The popup with form pattern will be removed in a future version of ACE. 

                        <body class="ace-page ace-page-popup">
                              <div id="page">
                                    <header id="header" role="banner">
                                      <h1>Header Text</h1>
                                    </header>
                                <form method="POST" action="http://example.com">
                                      <main id="content" role="main">
                                            <div class="ace-group ace-page-content">
                                                  <div class="ace-item ace-page-content-content">
                                                    <div class="ace-form ace-form-sidelabel">
                                                      <!-- Form content goes here-->
                                                    </div>
                                                  </div>
                                            </div>
                                      </main>
                                      <footer id="footer" role="contentinfo">
                                            <button class="ace-button" type="submit"><span>Submit</span></button>
                                            <button class="ace-button ace-button-icon ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-close">close</span></span></button>
                                      </footer>
                                </form>
                              </div>
                              <div id="hidden">
                              </div>
                        </body>