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.

There are several layout and style varations:

  • Most data room pages use the fluid layout, to maximise horizontal space for dense content such as tables.
  • Most web pages use the fixed or hybrid layout, to create a more comfortable reading length for block copy.
  • Dialog page is for full page, non-layered modal interactions.
  • There is a legacy popup page layout, to support some old corners of the data room.

Pages should include a Header and Footer; they may also include a Sidebar Menu or Vertical Navigation on the left of the main content area.

Code

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-dialog">
                                        </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 class="ace-p">Sidebar</p>
                                              </div>
                                              <div class="ace-item ace-page-content-content">
                                                <h1 class="ace-h1">Content</h1>
                                                <p class="ace-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 class="ace-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 class="ace-h1">ACE</h1>
                                                          </div>
                                                          <div class="ace-item ace-header-controls">
                                                            <ul class="ace-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 class="ace-p">Sidebar</p>
                                                          </div>
                                                          <div class="ace-item ace-page-content-content">
                                                            <h1 class="ace-h1">Content</h1>
                                                            <p class="ace-p">Your masterpiece begins here.</p>
                                                          </div>
                                                    </div>
                                              </main>
                                              <footer id="footer" role="contentinfo">
                                                    <div class="ace-footer">
                                                      <div class="ace-footer-content">
                                                        <p class="ace-p">ACE &copy; ansarada</p>
                                                      </div>
                                                    </div>
                                              </footer>
                                        </div>
                                        <div id="hidden">
                                        </div>

Page dialog pattern

Page Dialog is a new, unstable component which may change.

View the Page Dialog demonstration.

Page Dialogs are for non-layered modal interactions. Note this is similar but not the same as the Dialog component, which is used for modal interactions layered over the current view.

Configuration:

  • Set BODY to class ace-page-dialog
  • The Page Dialog pattern (starting with ace-page-dialog-content) then sits within the ace-page-content-content page content.
  • ace-dialog-footer component is required at the bottom of the ace-page-dialog-content.

Design notes

  • ace-panel-primary borders get removed.
  • ace-item last item get a grey line.
  • ace-forms get a white background.

                                    <body class="ace-page ace-page-dialog">
                                          <div id="page">
                                                <header id="header" role="banner">
                                                  <!-- ACE Header-->
                                                </header>
                                                <main id="content" role="main">
                                                      <div class="ace-group ace-page-content">
                                                            <div class="ace-item ace-page-content-content">
                                                              <div class="ace-page-dialog-content">
                                                                <!-- ACE content header can go here-->
                                                                <p class="ace-p">Page dialog contents.</p>
                                                                <div class="ace-dialog-footer">
                                                                      <div class="ace-button-group ace-button-group-separate">
                                                                            <button class="ace-button" type="button"><span>Answer and request approval</span></button>
                                                                            <button class="ace-button ace-button-icon" type="button"><span><span class="ace-icon ace-icon-control-close" title="Close">Close</span></span></button>
                                                                      </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                      </div>
                                                </main>
                                                <footer id="footer" role="contentinfo">
                                                  <!-- ACE Footer-->
                                                </footer>
                                          </div>
                                    </body>

Legacy page patterns

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 class="ace-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 class="ace-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" title="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 class="ace-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" title="close">close</span></span></button>
                                                  </footer>
                                            </form>
                                          </div>
                                          <div id="hidden">
                                          </div>
                                    </body>